Echarts 环形图 label formatter自定义

echarts yekong

Echarts 环形图 label formatter自定义


 drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var colors = ['rgba(62, 131, 246, 1)',
        'rgba(255, 196, 81, 1)',
        '#0AE5FF',
        '#06BCFF',
        '#3EF6C4',
        '#F1DA1A',
        '#807BFF']
      var option = {
        color: colors,
        legend: {
          orient: 'horizontal',
          bottom: 0,
          right: 'center',
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 6,
          width: '100%',
          textStyle: {
            color: '#fff',
            fontSize: FontChart(12)
          },
        },
        tooltip: {
          trigger: 'item',
          show: false,
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '景区消费',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['50%', '45%'],
            minShowLabelAngle: 0,
            label: {
              normal: {
                show: false,
                position: 'center',
                fontSize: FontChart(14),
                color: 'auto',
                formatter: (params) => {
                  return params.value + '\n' + params.name
                },
              },
              emphasis: {
                show: true,
                position: 'center',
                fontSize: FontChart(14),
                color: 'auto',
                formatter: function (value, index) {
                  console.log(value)
                  return '{label|' + value.percent + '%}\n'
                    + '{value|' + value.name + '}'
                },
                rich: {
                  label: {
                    padding: 0,
                    align: 'center',
                    verticalAlign: 'middle',
                    fontSize: FontChart(26),
                    color: 'rgba(0, 255, 255, 1)',
                    fontFamily: 'Helvetica Condensed Bold'
                  },
                  value: {
                    align: 'center',
                    color: '#fff',
                    padding: [0, 0, 10, 0],
                    fontSize: FontChart(16),
                    verticalAlign: 'middle',
                  },
                },
              },
            },
            labelLine: {
              length: 1,
              length2: 20,
              show: false
            },
            data: that.data
          }
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢