echarts图表动态绑定数据异常解决办法！！！

在使用echarts图表时遇到动态绑定数据后没有数据显示的问题，尝试多次无果。

最后发现是网页在加载时echarts绘制图表的速度总是比get请求动态获取数据的速度快，所以导致每次绘制图表时数据都无法显示。😭

最终我想到了一个办法，给绘制echarts图表的方法设置一个定时器，让绘制速度慢于数据的获取速度。😄

解决方法：

1.主体内容

 <div id="ranking" style="width: 750px; height: 530px"></div>

2.绘制图表方法：

drawChart() {
let myChart = this.$echarts.init(document.getElementById("ranking"));
      //动态绑定数据
      var yData = this.chmname;
      var seriesData = this.yaxis;
      console.log(this.yaxis);
      console.log(seriesData);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: (p) => {
            if (p.seriesName === "total") {
              return "";
            }
            return `${p.name}<br/>销售量: ${p.value}`;
          },
        },
        legend: {
          show: false,
        },
        grid: {
          left: 50,
          top: 36,
          right: 50,
        },
        xAxis: {
          type: "value",
          name: "销量/kg",
          nameLocation: "end",
          nameTextStyle: {
            fontSize: 14,
            color: "#666666",
            padding: [60, 0, 0, -65],
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#555555",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#e2e4e8",
            },
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              label: {
                show: false,
                margin: 30,
              },
            },
            data: yData,
            axisLabel: {
              margin: 40,
              fontSize: 14,
              align: "left",
              color: "#333",
              // 配置序号背景
              rich: {
                a1: {
                  color: "#fff",
                  backgroundColor: "red",
                  width: 30,
                  height: 30,
                  align: "center",
                  borderRadius: 2,
                },
                a2: {
                  color: "#fff",
                  backgroundColor: "blue",
                  width: 30,
                  height: 30,
                  align: "center",
                  borderRadius: 2,
                },
                a3: {
                  color: "#fff",
                  backgroundColor: "lightgreen",
                  width: 30,
                  height: 30,
                  align: "center",
                  borderRadius: 2,
                },
                b: {
                  color: "#fff",
                  backgroundColor: "#9ec6fe",
                  width: 30,
                  height: 30,
                  lineHeight: 30,
                  align: "center",
                  verticalAlign: "middle",
                  borderRadius: 15,
                },
              },
              formatter: function (params, index) {
                var leftIndex = index + 1;
                if (leftIndex < 4) {
                  return ["{a" + leftIndex + "|" + leftIndex + "}" + "  "].join(
                    "\n"
                  );
                } else {
                  return ["{b|" + leftIndex + "}" + "  "].join("\n");
                }
              },
            },
          },
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              label: {
                show: false,
                inside: false,
              },
            },
            data: yData,
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            zlevel: 1,
            name: "value",
            type: "bar",
            barGap: "-100%",
            barWidth: 20,
            legendHoverLink: false,
            data: seriesData,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1595f8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#51eff9", // 100% 处的颜色
                  },
                ],
              },
              barBorderRadius: [0, 10, 10, 0],
            },
            // 配置柱子上方类目轴名字
            label: {
              show: true,
              position: [0, "-15px"],
              color: "#555",
              fontSize: 14,
              offset: [0, 0],
              formatter: function (a) {
                return `${a.name}`;
              },
            },
          },
          {
            zlevel: 2,
            name: "访问量",
            type: "bar",
            barWidth: 20,
            data: seriesData,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1595f8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#51eff9", // 100% 处的颜色
                  },
                ],
              },
              barBorderRadius: [0, 10, 10, 0],
            },
            label: {
              show: true,
              position: "right",
              color: "#39caf9",
              fontSize: 14,
              offset: [10, 1],
            },
          },
        ],
      };
      myChart.setOption(option);
    },

3.设置定时器方法:

mounted() {
    setTimeout(() => {
        //控制图表的绘制时间
      this.drawChart();
    }, 300);//时间根据情况自行设置
},

解决后的最终效果：