Echart饼状图的使用

饼状图的属性设置

1、图例设置

//orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平）
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）

legend: {
          orient: "vertical",
          data: ["已提交题目", "提交未通过题目", "未开始题目"],
          x: "center",
          y: "bottom",
        },

2、值域设置

 series: [
          {
            name: "题目",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["30%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              normal: {
                show: true,
                position: "inner", //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16, //文字的字体大小
                },
                formatter: "{d}%",
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 35,
                name: "已提交题目",
                itemStyle: {
                  normal: {
                    color: "#1CCAB8",
                  },
                },
              },
              {
                value: 310,
                name: "提交未通过题目",
                itemStyle: {
                  normal: {
                    color: "#FFD671",
                  },
                },
              },
               {
                value: 310,
                name: "未开始题目",
                itemStyle: {
                  normal: {
                    color: "grey",
                  },
                },
              },
            ],
          },
        ],

3、提示框设置

 brushtopicRight: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
  }

接下来就是连接后台接口渲染数据的问题。
1、首先先定义一个对象，里面写入后台接口返回的相应数据

questionStatistics:{
        allsubmitNums:"",
        noPassProblemNums:"",
        noStartProblem:"",
      },

2、接下来引用接口

 getMyDidProblemCount()
      .then((res) => {
        this.questionStatistics = res.data;
        console.log("获取饼状图说明：", this.questionStatistics);
        this.brushtopicRight.series[0].data[0].value=this.questionStatistics.allSubmitNums
        this.brushtopicRight.series[0].data[1].value=this.questionStatistics.noPassProblemNums
        this.brushtopicRight.series[0].data[2].value=this.questionStatistics.noStartProblem
        loading.close();
      })
      .catch((err) => {
        loading.close();
        console.log(err);
      });
  },