echarts实现pie自定义标签

echarts实现pie自定义标签

一、环境

　　vue + echarts 实现饼图的自定义标签

二、实现效果

　　

三、实现方式

import * as echarts from 'echarts';
export default {
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'item'
        },
        color: ['#40E5F1', '#E6D41D', '#4544CC',],
        title: [{
          text: '',
          textAlign: 'center',
          left: 360,
          bottom: 280,
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: 400
          }
        }],
        series: [
          {
            left: 20,
            center: ['50%', '50%'],
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              formatter: '{b}: {c}个排期',
              color: '#fff',
              fontSize: 14
            },
            data: []
          }
        ]
      }
    }
  },
  mounted () {

    this.getData()
  },
  methods: {
    // 获取数据
    async getData () {

      // TODO 请求后端获取数据
      let successRate = 83.33; //投产成功率
      let baseRate = 88; //投产成功率基线
      let total = 52 // 总数
      let data = [
        { value: 10, name: '本周累计成功投产' },
        { value: 2, name: '本周异常回退',
          label: {
            formatter: [
              '{b}：{c}个排期',
              '{onleft|投产成功率：'+ successRate +'%}',
              '{baseline|投产成功率基线：'+ baseRate +'%}'
            ].join('\n'),
            rich: {
              onleft: {
                width: '100%',
                align: 'left',
                color: '#fff',
                fontSize: 14
              },
              baseline: {
                width: '100%',
                align: 'left',
                color: '#E6D41D',
                fontSize: 14
              }
            }
          }
        },
        { value: 40, name: '本周计划待投产' },
      ];

      // 初始化 option
      this.option.title[0].text = '本周计划投产：\n'+ total +'个排期'
      this.option.series[0].data = data;

      this.$nextTick(() => {
        this.init()
      })

    },
    // 初始化图表
    init () {
      let box = echarts.init(document.getElementById('chart'))
      box.setOption(this.option)
    }
  }
}
</script>

完整示例代码下载

~~ 完美实现