鍍金池/ 問答/HTML/ 通過異步獲取了數(shù)據(jù)設(shè)置到echart餅圖上餅圖全成全黑色

通過異步獲取了數(shù)據(jù)設(shè)置到echart餅圖上餅圖全成全黑色

出現(xiàn)的問題是當(dāng)不異步獲取數(shù)據(jù)時(shí),其顏色可以正常顯示,部分代碼及效果如下:

setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/> : {c} (vzbnnhz%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: "訪問來源",
            type: "pie",
            radius: "85%",
            center: ["50%", "45%"],
            data: [
              { value: 335, name: "鋼混" },
              { value: 310, name: "磚混" },
              { value: 274, name: "水泥" },
              { value: 235, name: "鋼筋" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "angle",
            label: {
              normal: {}
            },
            labelLine: {
              normal: {
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            }
          }
        ],
        animationDuration: 2800,
        animationEasing: "cubicInOut"
      });
    },

clipboard.png

但是當(dāng)異步獲取了數(shù)據(jù)并綁定時(shí),餅圖變成了全黑色,不知道原因是什么,我的異步設(shè)置代碼和最后效果如下,其中g(shù)etData方法的調(diào)用也附在下面:

  mounted() {
    this.initChart();
    this.getData();
    if (this.autoResize) {
      this.__resizeHanlder = _.debounce(() => {
        if (this.chart) {
          this.chart.resize();
        }
      }, 100);
      window.addEventListener("resize", this.__resizeHanlder);
    }
  },
// getData方法
    getData() {
      let params = {
        paramTypeId: 1
      };
      this.chart.showLoading();
      getHouseParamCount(params).then(res => {
        console.log(res.data.data)
        this.chart.setOption({
          series: {
            data: res.data.data.content
          }
        });
        this.chart.hideLoading();
      });
    },

clipboard.png

回答
編輯回答
默念

發(fā)現(xiàn)問題好像是echart的原因,當(dāng)換了一個(gè)示例時(shí)可以正常顯示顏色了

2017年5月12日 02:43