Get the data asynchronously and set it to the echart pie chart. The pie chart is all black.

The problem with

is that when the data is not obtained asynchronously, its color can be displayed normally. Part of the code and effect are as follows:

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

        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

getData:


clipboard.png

Feb.28,2021

found that the problem seems to be the cause of echart. When changing the example, the color can be displayed normally

.
Menu