echarts 使用方法

1:  为echarts 准备一个div 盒子

  <!--为echarts准备一个具备大小的容器dom-->
  <div id="divBar" 
       ref="divBar" 
       style="width: 100%; 
       height: 600px; 
       margin-top: 0.3rem"
   > 
  </div>

2： 导出 echarts报表：  import echarts from "echarts";

// 初始化echarts 表格
this.dataBar.charts = echarts.init(document.getElementById(获取DOM 元素));

3： 

    this.$refs.divBar.style.display = "block";
    this.columns = [{ title: "周期", key: "period" }];
    this.tableData = [];
    if (this.dataBar.charts) {
       //清空绘画内容，清空后实例可用，因为并非释放示例的资源，释放资源我们需要dispose()
       this.dataBar.charts.clear();
     }
      api
        .getList(this.searchModel, { url: `/api/Report/xxxxxxx` })
        .then((res) => {
          if (res && res.curperiod && res.curperiod.length) {
            let legendData = [],
              xCategory = [],
              seriesData = [];
            let selected = {};
            if (this.searchModel.top == "week") {
              legendData.push("本周");
              legendData.push("上周");
            } else {
              legendData.push("本月");
              legendData.push("上月");
            }

            let curSeriesDataTmp = [];
            this.tableData.push({ period: legendData[0] });
            if (res.curperiod && res.curperiod.length) {
              res.curperiod.forEach((item, index) => {
                xCategory.push(item.quanlitycode);
                let columnsCell = {
                  title: item.quanlitycode,
                  key: item.quanlitycode,
                };
                this.columns.push(columnsCell);
                //selected[item.alarmclassname] = true;
                curSeriesDataTmp.push(item.dotnocount);
                //组织列表数据
                this.tableData[0][item.quanlitycode] = item.dotnocount;

                let dss = this.tableData;
              });
            }

            seriesData.push({
              name:
                res.curperiod && res.curperiod.length
                  ? legendData[0] + "(" + res.curperiod[0].description + ")"
                  : "",
              type: "bar",
              data: curSeriesDataTmp,
            });
            let preSeriesDataTmp = [];
            this.tableData.push({ period: legendData[1] });
            if (res.preperiod && res.preperiod.length) {
              res.preperiod.forEach((item, index) => {
                //selected[item.alarmclassname] = true;
                preSeriesDataTmp.push(item.dotnocount);

                //组织列表数据
                this.tableData[1][item.quanlitycode] = item.dotnocount;
              });
            }
            seriesData.push({
              name:
                res.preperiod && res.preperiod.length
                  ? legendData[1] + "(" + res.preperiod[0].description + ")"
                  : "",
              type: "bar",
              data: preSeriesDataTmp,
            });

            this.dataBar.xCategory = xCategory;
            this.dataBar.legendData = legendData;
            this.dataBar.seriesData = seriesData;
            this.dataBar.selected = selected;
            this.dataBar.id = "divBar";

            this.drawChart(this.dataBar);
          } else {
            if (this.dataBar.charts) {
              //清空绘画内容，清空后实例可用，因为并非释放示例的资源，释放资源我们需要dispose()
              this.dataBar.charts.clear();
            }
          }
        })
        .catch((errData) => {
          this.$Modal.error({
            title: "错误",
            content: errData.message,
          });
          if (this.dataBar.charts) {
            //清空绘画内容，清空后实例可用，因为并非释放示例的资源，释放资源我们需要dispose()
            this.dataBar.charts.clear();
          }
        });
    },

4: 配置echarts 表格数据：

    drawChart(data) {
      this.dataBar.charts = echarts.init(document.getElementById(data.id));
      this.dataBar.charts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          left: "center",
          text: "周/月度环比",
        },
        legend: { right: 60, data: data.legendData },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [{ name: "质量原因", type: "category", data: data.xCategory }],
        yAxis: [{ name: "值", type: "value" }],
        series: data.seriesData,
      });
    },