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

原创

已于 2022-03-15 09:26:44 修改 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript

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

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

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

<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: [