vue2 echarts 柱状图使用

在Vue2中使用echarts绘制柱状图的方法如下所示：

首先，需要在Vue组件中引入echarts库，并在data中定义需要展示的数据。例如，定义x轴数据xData和y轴数据yData。

import * as echarts from "echarts";

export default {
  data() {
    return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], // 数据
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 创建echarts实例
      const myChart = echarts.init(document.getElementById("mychart"));

      // 配置项
      const option = {
        xAxis: {
          data: this.xData,
        },
        yAxis: {},
        series: [
          {
            type: "bar", // 形状为柱状图
            data: this.yData,
          },
        ],
      };

      // 设置配置项
      myChart.setOption(option);

      // 监听窗口大小变化，自适应图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};

然后，在模板中使用div标签来容纳echarts图表，并设置id为"mychart"。

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

最后，通过调用initEcharts方法来初始化echarts图表。

mounted() {
  this.initEcharts();
},

这样就可以在Vue2中使用echarts绘制柱状图了。如果需要展示多列数据，可以在series中添加多个对象，每个对象代表一列数据。可以通过设置name属性来对应图例中的数据，并通过legend属性来设置图例的位置和样式。

series: [
  {
    type: "bar", // 形状为柱状图
    data: data1,
    name: "人数", // 对应图例中的数据
  },
  {
    type: "bar", // 形状为柱状图
    data: data2,
    name: "任务数", // 对应图例中的数据
  },
],

希望对你有帮助！