echarts 饼图 富文本图例

饼图组件 pie.vue

<template>
  <div class="pie" :style="{height:height,width:width}">

  </div>
</template>
<script>
import { mapState } from 'vuex'
// import echarts from 'echarts'
export default {
  computed:mapState({
    // 箭头函数可使代码更简练state
    scale: state =>state.overView.scale
  }),
  props:{
    title:{
      type: String,
    },
    initData:{
      type:Array,
      default:()=>{
          return []
      }
    },
    legendData: {
      type:Array,
      default:()=>{
          return []
      }
    },
    legend:{
      type:Array,
       default:()=>{
          return []
      }
    },
    height:{
       type: String,
       default:'100%'
    },
    color:{
      type:Array,
      default:()=>{
          return ['#4e84fe','#ecc04f','#fe4e77']
      }
    },
    width:{
       type: String,
       default:'100%'
    },
    autoResize: {
        type: Boolean,
        default: true
      },
  },
  data () {
    return {
      pieLengenFs: 12
    }
  },
  computed:{
    PieLegend(){
      let b = []
      this.initData.forEach(element => {
           b.push(element.name)
      });
      return b
    }
  },
  mounted () {
    let that =this
    that.chart = this.$echarts.init(this.$el);
    that.initChart();
    if (this.autoResize) {
       window.addEventListener('resize', this.__resizeHanlder)
    }
    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('mainCont')[0] // 获取根节点的类名
    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)

    // 获取当前浏览器的宽度
    
  },
  methods: {
    __resizeHanlder(){
       this.chart.resize()
       let win_width = document.body.clientWidth
      //  console.log('win_width', win_width)
       if (win_width < 1800) {
         this.pieLengenFs = 12
       } else {
         this.pieLengenFs = 14
       }
    },
    draw(param){
      let that =this
      this.chart.setOption({
            legend: {
              data:this.PieLegend
            },
            series: [
                {
                    name:this.title,
                    data:param
                }
              ]
        });
    },
    initChart(){
      let _this = this
      this.chart.setOption({
          // title:{
          //   text:this.title,
          //   left:'center',
          //   top:10,
          //   textStyle:{
          //     fontSize:14,
          //     fontWeight:300,
          //     fontFamily:'Microsoft YaHei',
          //     align:'center',
          //     color:'RGBA(98, 98, 102, 1)'
          //   }
          // },
          tooltip : {
              trigger: 'item',
              formatter: "{b} : {c} ({d}%)" // {a} <br/>
          },
          color:this.color,
          legend: {
            itemWidth: 10,
            itemHeight: 10,
            orient: 'vertical',
            right: 20,
            top: 'center',
            padding:[40, 0, 40, 0],
            itemGap: 10,
            data: this.PieLegend,
            textStyle: {
              rich:{
                  a:{
                      fontSize: this.pieLengenFs,
                      verticalAlign:'middle',
                      align:'center',
                      lineHeight:this.pieLengenFs,
                      padding:[0,6,0,0],
                      color: '#000'
                  },
                  b:{
                      fontSize: this.pieLengenFs,
                      align:'center',
                      padding:[0,6,0,0],
                      lineHeight:this.pieLengenFs,
                      color: '#000'
                  },
                  c: {
                      fontSize: this.pieLengenFs,
                      align:'center',
                      padding:[0,6,0,0],
                      lineHeight:this.pieLengenFs,
                      color: '#000'
                  },
                  d: {
                      fontSize: this.pieLengenFs,
                      color: '#000'
                  }
              }
            },
            formatter: function(name){
              // console.log(data)
              let data = _this.legendData
              let target = 0
              let target1 = ''
              let sum = 0
              for(var i=0; i< data.length; i++){
                  if(data[i].name == name){
                      target = data[i].value
                      target1 = data[i].value1
                  }
                  sum += data[i].value
              }
              let arr = [
                '{a|'+name+'}',
                // '{b|'+target+'}',
                // '{c|'+target1+'}',
                '{d|'+(sum>0?((target/sum)*100).toFixed(2):0)+'%}'
              ]
              return arr.join('')
            }
          },
          series: [
                {
                    name: '支付方式',
                    type: 'pie',
                    radius : ['40%', '70%'],
                    center: ['25%', '50%'],
                    selectedMode: 'single',
                    label: {
                       show:true,
                       normal: {
                            show: false,
                            position: 'center'
                        },
                    },
                    itemStyle: {
                      borderColor: '#fff',
                      borderWidth: 10,
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      },
                      normal:{
                        color: function(params) {
                          //自定义颜色
                          var colorList = [     
                              '#0080FF', '#0AD4D6', '#F54DB7', '#6C5CE7', '#AAB3C9',
                              '#0080FF', '#0AD4D6', '#F54DB7', '#6C5CE7', '#AAB3C9',
                              '#0080FF', '#0AD4D6', '#F54DB7', '#6C5CE7', '#AAB3C9',
                              '#0080FF', '#0AD4D6', '#F54DB7', '#6C5CE7', '#AAB3C9',
                          ]
                          return colorList[params.dataIndex]
                        }
                      }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[]
                }
              ]
          })
     }
  },
  data(){
    return {
      chart:null,
        label: {
           
        }
    }
  },
  watch:{
    initData:{ // 监听initDta,数据变化的时候，重新绘制饼图
      deep:true,
      handler (v, ov) {
        this.draw(v);
      }
      
    },
    scale(){
      this.__resizeHanlder()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

父组件调用

<div style="width:50%;height:300px;">
        <pie title="支付方式" :initData="initDataPayType" :legend="pieLegend" :legendData="legendData"></pie>
      </div>

<script>
import pie from './components/pie'
export default {
    components:{pie},
    mounted() {
       this.initDataPayType = [
      { value: 16, name: 'a' },
      { value: 73, name: 'b' },
      { value: 58, name: 'c' },
      { value: 48, name: 'd' },
      { value: 30, name: 'e' },
      { value: 16, name: 'f' },
      { value: 73, name: 'g' },
      { value: 58, name: 'h' },
      { value: 48, name: 'i' },
      { value: 30, name: 'j' },
      { value: 16, name: 'k2' },
      { value: 73, name: 'l2' },
      { value: 58, name: 'm2' },
      { value: 48, name: 'n2' },
      { value: 30, name: 'o2' },
      { value: 16, name: 'p3' },
      { value: 73, name: 'q3' },
      { value: 58, name: 'r3' },
      { value: 48, name: 's3' },
      { value: 30, name: 't3' }
    ]
    console.log('this.initDataPayType', this.initDataPayType)
    this.legendData = this.initDataPayType.map(item => {
      item.value1 = item.value
      return item
    })
    console.log('this.legendData', this.legendData)
    this.initDataPayType.forEach(e => {
        this.pieLegend.push(e.name)
    });
    }
        

}

</script>

 

示例：

 

 

 

initData