vue中echarts通过axios获取到数据，但是前端页面图却显示不出来！

Question

export default {
  data() {
    return {
      colors: [
        "#f7797d",
        "#2C5364",
        "#40E0D0",
        "#12c2e9",
        "#1565C0",
        "#6b6b83",
        "#11998e",
        "#c94b4b",
        "#00b09b",
        "#CAC531"
      ],

    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    //画图
    drawChart() {
      //建立series1数组，用于存放遍历的series的数据配置信息
      var series1 = [];
      var myChart = this.$echarts.init(document.getElementById("container"));
      let _that = this;
      //指定图表的配置项和数据
      var option = {
        color: this.colors,
        legend: {
          show: true,
          orient: "vertical",
          right: 15,
          top: 35,
          itemGap: 30,
          textStyle: {
            //图例文字的样式
            fontSize: 20
          }
        },
        grid: {
          height: 720,
          width: 1220,
          top: 40
        },
        xAxis: {
          type: "time",
          axisLine: {
            show: true
          },
          axisLabel: {
            rotate: -11,
            margin: 20,
            fontWeight: "bold",
            fontSize: 14
          }
        },
        yAxis: [
          {
            splitLine: {
              //网格线
              lineStyle: {
                type: "solid" //设置网格线类型
              },
              show: true //隐藏或显示
            },
            axisLabel: {
              fontWeight: "bold",
              fontSize: 16
            },
            data: [
              "2#回火炉",
              "1#回火炉",
              "2#冷水机",
              "1#清洗机",
              "4#加热炉",
              "3#加热炉",
              "2#加热炉",
              "1#加热炉"
            ]
          }
        ],
        //将配置信息数组，赋给series
        series: series1
      };
      //加载数据图表
      //第二个参数为true的原因是防止多次请求造成数据错乱
      //true:覆盖掉之前的配置信息
      myChart.setOption(option, true);
      //显示等待画面
      myChart.showLoading();
      // 接收后端发送过来的数据
      this.$axios({
        method: "get",
        url: "/api/productiton"
      })
        .then(res => {
          var result = res.data;
          //隐藏加载动画
          myChart.hideLoading();
          //循环series内的数据
          for (var i = 0; i < result.length; i++) {
            series1.push({
              type: "custom",
              name: result[i].name,
              renderItem: function(params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                var rectShape = echarts.graphic.clipRectByRect(
                  {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                  },
                  {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                  }
                );
                return (
                  rectShape && {
                    type: "rect",
                    shape: _that.$echarts.graphic.clipRectByRect(
                      {
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                      },
                      {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                      }
                    ),
                    style: api.style()
                  }
                );
              },
              itemStyle: {
                opacity: 1
              },
              encode: {
                x: [1, 2],
                y: 0
              },
              data: result[i].equipment
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
      //清空数组，避免多次请求，数据重复添加
      series1 = [];
    }
  }
};

Answer 1

我都不清楚从哪开始吐槽，正常myChart.setOption(option, true);后，option中用到的变量就固定为setOption之前的值，之后的改动就无效了
就是之后对series1操作都是没意义的，这是正常来说
但是就算后续你对series1的操作有传到option里，你最后让series1 = [] ，那么就无论返回数据是什么，series1的值就一直为空，怎么会显示内容

先把series1 = []放在axios前面，然后把myChart.setOption(option, true);放在axios回调中，series1赋值的后面试试