echarts 饼状图

实现效果

难题1 中间换行 \n
解决方法formatter:“{a}\n{c}”

难题2 中间设置不同的样式
解决方法

		emphasis: {
            label: {
              formatter: (param) => {
                let info = param.data;
                let str = `{count|${info.value}}\n{train|${info.name}}`; //这里对不同的内容进行标识 a，b，或者可以随便自己起个别的名字
                return str;
              },
              rich: { //在rich中对两个标识进行样式修改
                count: {
                  fontSize: 24
                },
                train: {
                  fontSize: 12,
                  opacity: 0.6
                }
              },
              show: true,
              fontSize: '24',

              fontFamily: 'PangMenZhengDao',
              color: '#B0E1FF',
            }
          },

难题3 设置与原本不同的颜色
解决方法 itemStyle

itemStyle: {
   color: param => param.data.color // color自己定义的字段
 }

难题4左侧与默认不一样 自定义文字
解决方法
参考链接https://blog.csdn.net/YPJMFC/article/details/78979319

	// 总揽
      legend: {
        orient: 'vertical',
        right: 11,
        top: 0,
        itemWidth: 9,
        itemHeight: 3,
        itemGap: 12, // 修改间距
        textStyle: {
          color: '#B0E1FF', 
          fontSize: 16,
          rich: { //在rich中对两个标识进行样式修改
            train: {
              opacity: 0.8,
              padding: [0, 16, 0, 8], // 修改文字和图标距离
            },
            rate: {
              fontWeight: 'bold'
            }
          },
        },
        formatter: (name:string) => {
          var rate;
          for (var i = 0; i < this.errorData.length; i++) {
            if (this.errorData[i].name === name) {
              rate = this.errorData[i].rate;
            }
          }
          var arr = [
            '{train|'+name+'}{rate|'+(rate*100).toFixed(2)+'%}'
          ]
          return arr.join('\n')
        },
      },

难题5 想要实现中间总是显示（总数）的功能
解决办法一：
需要绑定鼠标滑入和滑出 动态的设置title的内容
借鉴 https://blog.csdn.net/Kiruthika/article/details/124442303

 private mouseover (){
    (this.$refs.echarts as Echarts).chart.setOption({
      title: {
        text: ""
      }
    })
  }

  private mouseout (){
    (this.$refs.echarts as Echarts).chart.setOption({
      title: {
        text: this.total
      }
    })
  }

因为第一种方法 有些时候会导致不局中
解决办法二：（推荐）
不使用title设置，直接使用label设置，但是在这个过程中遇到一个问题就是 饼图 label 居中的时候会重叠

		label: {
            show: true,
            position: 'center',
            formatter: () => {
              return this.total
            },
            textStyle: {
              color: '#B0E1FF',
              fontSize: 24,
              fontWeight: 600
            }
          },

后来想到使用echarts的事件监听 设置label。成功解决

	<echarts
      ref="echarts"
      :option="option"
      @mouseover="mouseover"
      @mouseout="mouseout"
    />

 private mouseover (params:any) {
    (this.$refs.echarts as Echarts).chart.setOption({
      series: {
        label:{show: false}
      }
    });
  }

  private mouseout () {
    (this.$refs.echarts as Echarts).chart.setOption({
      series: {
        label:{
          show: true
        }
      }
    });
  }

以上总代码

private get option(): ECOption|any {
    return {
      title: {
      	show:false
        // show: true,
        // text: this.total || '',
        // 具体放置位置
        // left: "20%",
        // top: "center",
        // textStyle: {
         //  color: '#B0E1FF', 
         //  fontSize: 24,
        //   fontWeight: 600,
       //  },
      },
      // 总揽
      legend: {
        orient: 'vertical',
        right: '5%',
        top: 0,
        itemWidth: 9,
        itemHeight: 3,
        itemGap: 12, // 修改间距
        textStyle: {
          color: '#B0E1FF', 
          fontSize: 16,
          rich: { //在rich中对两个标识进行样式修改
            train: {
              opacity: 0.8,
              padding: [0, 16, 0, 8], // 修改文字和图标距离
            },
            rate: {
              fontWeight: 'bold'
            }
          },
        },
        formatter: (name:string) => {
          let rate = this.errorData.filter(item=>item.name === name)[0].rate
          let arr = [
            '{train|'+name+'}{rate|'+(rate*100).toFixed(2)+'%}'
          ]
          return arr.join('\n')
        },
      },
      // 饼状图
      series: [
        {
          type: 'pie',
          radius: ['60%', '90%'], // 外/内大小
          center: ['25%', '50%'], // 距离左/上 的距离
          avoidLabelOverlap: false,
          // label: {
            //  show: false,
            //  position: 'center',
          //  },
          label: {
            show: true,
            position: 'center',
            formatter: () => {
              return this.total
            },
            textStyle: {
              color: '#B0E1FF',
              fontSize: 24,
              fontWeight: 600
            }
          },
          emphasis: {
            label: {
              formatter: (param) => {
                let info = param.data;
                let str = `{count|${info.value}}\n{train|${info.name}}`; //这里对不同的内容进行标识 a，b，或者可以随便自己起个别的名字
                return str;
              },
              rich: { //在rich中对两个标识进行样式修改
                count: {
                  fontSize: 24
                },
                train: {
                  fontSize: 12,
                  opacity: 0.5
                }
              },
              show: true,
              fontSize: '24',
              fontFamily: 'PangMenZhengDao',
              color: '#B0E1FF',
            }
          },
          labelLine: {
            show: false
          },
          data: this.errorData,
          itemStyle: {
            color: param => param.data.color
          }
        }
      ]
    };
  }

  private get total():number{
    return this.data[this.activeTab].reduce((total,cur)=>{
      return cur['faults_count'] + total;
    },0)
  }

  private get errorData(){
    if(this.data[this.activeTab]){
      return this.data[this.activeTab].map((item,index)=>{
        return {
          value: item.faults_count,
          name: item.train_number,
          rate: item.faults_rate,
          color: this.defaultColorArray[index],
          icon: 'rect'
        }
      })
    }
  }

   private mouseover (params:any) {
    (this.$refs.echarts as Echarts).chart.setOption({
      series: {
        label:{show: false}
      }
    });
  }

  private mouseout () {
    (this.$refs.echarts as Echarts).chart.setOption({
      series: {
        label:{
          show: true
        }
      }
    });
  }

在组件中

const events = ['legendselectchanged',
  'legendselected',
  'legendunselected',
  'legendscroll',
  'datazoom',
  'datarangeselected',
  'timelinechanged',
  'timelineplaychanged',
  'restore',
  'dataviewchanged',
  'magictypechanged',
  'geoselectchanged',
  'geoselected',
  'geounselected',
  'pieselectchanged',
  'pieselected',
  'pieunselected',
  'mapselectchanged',
  'mapselected',
  'mapunselected',
  'axisareaselected',
  'focusnodeadjacency',
  'unfocusnodeadjacency',
  'brush',
  'brushselected',
  'rendered',
  'finished',
  'click',
  'dblclick',
  'mouseover',
  'mouseout',
  'highlight',
  'downplay',
  'mousemove',
  'mousedown',
  'mouseup',
  'globalout',
  'contextmenu'];


	events.forEach(event => {
      this.chart.on(event, (params:any)=>{
        this.$emit(event,params) // //这里的params是图表节点的数据
      });
    });

想让其取消放大的动画
hoverAnimation:false