echarts实现环状图显示总数，并在hover时显示自定义数据

实现饼图中间显示总数功能，版本：“echarts”: “^4.2.1”

在网上看到了几个前辈给出的饼图显示总数的实现方法，本方法采用了title来显示总数，但出现了高亮不显示内容的bug，具体情况如下

代码部分

InitroundPie () {
      this.chart = echarts.init(this.$refs[this.bindRef])
      let _data = [ // 当前写死
        { value: 120, name: '在线' },
        { value: 120, name: '离线' },
        { value: 160, name: '未激活' }
      ]

      let options = {
        title: {
          show: true,
          text: '全部', // 当前写死
          subtext: '400', // 当前写死
          top: 95,
          left: 115,
          textAlign: 'center',
          textStyle: {
            fontSize: '14',
            fontWeight: 'bold'
          },
          subtextStyle: {
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data: ['在线', '离线', '未激活'],
          selectedMode: false,
          top: 40,
          formatter: function (name) {
            let legenTile = name + ': '
            for (let item of _data) {
              if (name === item.name) legenTile += item.value
            }
            return legenTile
          }
        },
        series: [
          {
            name: 'from',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            textAlign: 'center',
            center: [120, 120],
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: '{b}\n{c}',
                align: 'center',
                verticalAlign: 'middle'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: _data
          }
        ]
      }

      this.chart.setOption(options)

      this.chart.on('mouseover', { seriesName: 'from' }, () => {
        this.chart.setOption({
          title: {
            show: false
          }
        })
      })

      this.chart.on('mouseout', { seriesName: 'from' }, () => {
        this.chart.setOption({
          title: {
            show: true
          }
        })
      })
    },

方法逻辑：在鼠标移入时隐藏title,移出时显示title，此方法实现效果如下：

展示效果正常，但当鼠标悬浮至数据上时，title.show:false后，原始的emphasis事件失效，情况如下：

使用dispatchAction事件主动触发也不能触发当前选中，但能触发其它选中，使用其它方法进行了解决。

代码如下：

InitroundPie () {
      this.chart = echarts.init(this.$refs[this.bindRef])

      let _data = [
        { value: 120, name: '在线' },
        { value: 120, name: '离线' },
        { value: 160, name: '未激活' }
      ]

      let options = {
        title: {
          show: true,
          text: '全部',
          subtext: '400',
          top: 95,
          left: 115,
          textAlign: 'center',
          z: 0,
          textStyle: {
            fontSize: '14',
            fontWeight: 'bold'
          },
          subtextStyle: {
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          show: false,
          trigger: 'item',
          alwaysShowContent: true,
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data: ['在线', '离线', '未激活'],
          selectedMode: false,
          top: 40,
          formatter: function (name) {
            let legenTile = name + ': '
            for (let item of _data) {
              if (name === item.name) legenTile += item.value
            }
            return legenTile
          }
        },
        series: [
          {
            name: 'from',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            textAlign: 'center',
            center: [120, 120],
            label: {
              normal: {
              	// 此处重点，设置为显示
                show: true,
                position: 'center',
                formatter: '{b}\n{c}',
                align: 'center',
                verticalAlign: 'middle',
                // 此处重点，字体大小设置为0
                textStyle: {
                  fontSize: '0'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                // 同步样式
                formatter: function (params) {
                  return `{tTitle|${params.name}}\n{tSubTitle|${params.value}}`
                },
                rich: {
                  tTitle: {
                    fontSize: '14',
                    fontWeight: 'bold',
                    lineHeight: '25'
                  },
                  tSubTitle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    lineHeight: '25'
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: _data
          }
        ]
      }

      this.chart.setOption(options)

      this.chart.on('mouseover', { seriesName: 'from' }, params => {
        this.chart.setOption({
          title: {
            show: false
          }
        })
      })

      this.chart.on('mouseout', { seriesName: 'from' }, params => {
        this.chart.setOption({
          title: {
            show: true
          }
        })
      })
    }

更改后，显示效果如下：

鼠标悬浮高亮效果：

完成了预期效果，显示总数，鼠标移入显示当前选中数据，显示位置居中。