vue-echarts的使用

<template>
 <div>
      <div
        style="
          padding-top: 40px;
          line-height: 30px;
          border-bottom: 1px solid #cdcdcd;
        "
      >
        月度问题处理统计图
      </div>
      <div ref="pieChart" style="width: 100%; height: 400px"></div>
    </div>
</template>

首先需要有一个容器用来存储Echarts。

之后在数据方面其实有两种写法，这里我一开始用死数据进行的填充，所以用的第一种。但是实际开发中，使用到图表遍历的数据，应该都是动态数据。所以我更推荐第二种写法。

如果要用死数据，则是将数据全都写在data(){}里，

export default {
  data() {
    return {
      valueMonth: ref(""),
      barOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          top: 4,
          left: 5,
          data: ["工作日处理量", "休息日处理量"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              interval: 0,
              rotate: 270,
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            min: 0,
            max: 400,
            interval: 100,
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "工作日处理量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [390, 70, 27, 6, 4, 8, 8, 8, 1, 281, 192],
          },
          {
            name: "休息日处理量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [2, 2, 2, 2, 0, 0, 0, 0, 0, 21, 1],
          },
        ],
      },
}

之后调用方法，methods，去初始化echarts，

<script>
initChart(){
    this.barChart = echarts.init(this.$refs.barChart);
    this.barChart.setOption(this.barOption);
}
mounted:function(){
    this.initChart();
}
</script>

这种方法适合数据都是在写死状态下的（企业开发应该没人用）；顶多就是个简单的静态数据展示。那么，如何将数据动态化呢？这里我省略了从数据库获取数据，详情参考axios获取数据。

我这有点懒，没再把数据分成Array，但是大致是这样，

data(){}中就不要再写数据了。

全部移动到methods中写方法。

draw_pieChart(){
      var pieChart = echarts.init(this.$refs.pieChart);

/*       这里直接添加for循环遍历动态数组*/
      let pieOption =  {
        title: {
          text: "软件品牌月度问题统计",
          left: "center",
          top: "10%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          bottom: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 182, name: "医养his系统" },
              { value: 72, name: "NC65" },
              { value: 289, name: "元年-财务共享系统" },
              { value: 346, name: "BPM系统" },
              { value: 8, name: "U8cloud3.1" },
              { value: 8, name: "U8cloud3.0" },
              { value: 27, name: "NCC 2020.05" },
              { value: 8, name: "U8cloud2.7" },
              { value: 6, name: "NCC1909" },
              { value: 4, name: "U8cloud2.65" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      pieChart.setOption(pieOption);
    },

之后，在mounted中调用就可以了

  mounted: function () {
    this.draw_pieChart();
  },

需要特别注意的几个点。

在draw_pieChart(){}这个方法中，

      var pieChart = echarts.init(this.$refs.pieChart);

这句话实际上是将变量pieChart定位到template中

      <div ref="pieChart" style="width: 100%; height: 400px"></div>

其次，原本的this.pieChart.setOption(this.pieOption)——初始化chart ： 由于我们调用的不再是data(){}体中的数据，所以this就没必要再加了。否则会出现指向错误！！