vue：echarts多条柱状图数据的渲染

*初级小白*~

已于 2022-03-15 09:26:44 修改

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：项目实战遇到的问题文章标签： echarts vue.js javascript

于 2022-03-15 09:13:15 首次发布

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/123493808

本文主要探讨如何在Vue项目中利用ECharts库，有效地渲染多条柱状图数据，实现动态数据展示。通过实例代码详细解析配置过程，帮助开发者掌握这一常用图表的创建技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：对多柱状图进行数据渲染
在这里插入图片描述

<template>
  <div>
    <div id="myChart" style="width: 100%; height: calc(100vh - 300px)"></div>
  </div>
</template>

<script>
const labelOption = {
  show: true,
  verticalAlign: "middle",
  formatter: "{a}",
};
export default {
  data() {
    return {
      defectsCategory: [
        "苹果",
        "香蕉",
        "橙子",
        "橘子",
        "菠萝",
        "草莓",
        "梨子",
        "西瓜",
      ],
      tatolEcharts: [
        {
          time: "2020/2/2",
          defects: [],
        },
        {
          time: "2020/2/3",
          defects: [
            {
              name: "草莓",
              count: "1232",
            },
            {
              name: "香蕉",
              count: "1232",
            },
          ],
        },
        {
          time: "2020/2/11",
          defects: [