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

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e81220-b30.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e81220-b30.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?