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>

 

完整示例代碼下載 

 

~~ 完美實現