前端echarts 小知识/legend样式

自定义图标样式
首先根据样式与后台传来的数据自定义图表数据

   async getChart() {
      let { data } = await this.$api.getTestChart({
        TestID: this.objectId,
        Type: this.status,
      })
      if (data.status == 1) {
        let arr = ['优秀', '良好', '中等', '及格', '不及格']
        let region = [
          '[90%，100%]',
          '[80%，90%）',
          '[70%，80%）',
          '[60%，70%）',
          '[0，60%）',
        ]
        if (this.status == 1) this.barData = data.data.CorrectRateStuNumList
        if (this.status == 2) {
          data.data.CorrectRateStuNumList.forEach((r, index) => {
            this.pieData.push({
              name: arr[index],
              value: r,
              region: region[index],
              rate:
                this.testNum.FinishStuNum == 0
                  ? 0
                  : (r / this.testNum.FinishStuNum).toFixed(2) * 100,
            })
          })
          //console.log(this.pieData)
        }
      }
    },

//样式
  if (this.status == 2) {
        //let arr = [{ name: '优秀', range: '[90%，100%]' }]
        let value = 0
        let region = ''
        let rate = ''
        obj = {
          title: {
            //text: total,
            right: '73%',
            top: '43%',
            textStyle: {
              //环形图内默认文字样式
              fontSize: 20,
              fontWeight: 'bold',
              color: '#333',
            },
          },
          tooltip: {
            //提示框，可以在全局也可以在
            trigger: 'item', //提示框的样式
            backgroundColor: '#FFFFFF',
            borderColor: '#E5E5E5',
            padding: [10, 18],
            extraCssText: 'box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.08);',
            textStyle: {
              color: '#333333',
            },
            formatter: function (params) {
              //console.log(params)
              return ` <div>${params.name} 人数 <span style="color: #2C5BE8">${params.value}</span>  占比 <span style="color: #2C5BE8">${params.data.rate}%</span></div>  `
            },
          },
          legend: {
            textStyle: {
              color: '#969696',
              fontSize: 14,
              rich: {
                a: {
                  fontSize: 14,
                  color: '#333333',
                  padding: [0, 0, 0, 5],
                  width: 60,
                },
                b: {
                  fontSize: 14,
                  width: 105,
                },
                c: {
                  fontSize: 14,
                  color: '#333333',
                  width: 20,
                },
                d: {
                  fontSize: 14,
                  color: '#333333',
                  //width: 20,
                },
              },
            },

            icon: 'circle',
            itemGap: 25,
            itemWidth: 8,
            x: '500px',
            y: '95px',
            orient: 'vertical',
            formatter: (name) => {
              for (let i = 0; i < this.pieData.length; i++) {
                if (this.pieData[i].name == name) {
                  value = this.pieData[i].value
                  region = this.pieData[i].region
                  rate = this.pieData[i].rate
                }
              }
              return (
                '{a|' +
                name +
                '}{b|' +
                region +
                '}{c|' +
                value +
                '}人,  占比 {d|' +
                rate +
                '}%'
              )
            },
          },
          series: [
            {
              name: '',
              type: 'pie', //环形图的type和饼图相同
              radius: ['40%', '60%'], //饼图的半径，第一个为内半径，第二个为外半径
              center: ['25%', '45%'],
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    baseline: 'top',
                    fontSize: 12,
                  },
                },
              },
              color: ['#00DDA5', '#21C5EB', '#FAE335', '#F97834', '#E43839'],
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: this.pieData,
            },
          ],
        }
      }

当x/y轴没有设置坐标时 图标的x/y轴坐标会根据数据自适应