echarts饼形图hover时显示hover对象的数据

这个问题是在工作中遇到的需求，效果图如下图

无hover时.png 图片hover时.png

详细的解决问题方式放在代码注释中， 自行copy改用吧

initChart() {
      const that = this
      // 获取的dom元素
      this.chart = echarts.init(this.$refs.echarts)
      this.chart.setOption({
        //  设置颜色
        color: ['rgb(45, 190, 175)', 'rgb(254, 121, 143)', 'rgb(142, 208, 57)', 'rgb(245, 197, 5)', 'rgb(0, 160, 233)'],
        // 设置主副标题，这里写总量
        title: {
          show: true,
          text: '全部',
          // 这是总量，从后端获取数据
          subtext: this.totalNum,
          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: {
          type: 'scroll',
          orient: 'vertical',
          x: 'right',
          right: 10,
          top: 20,
          bottom: 20,
          // 这里设置的是 legend， 格式： ['一体机','台式机','笔记本'...]
          data: this.legendData,
          //多个data时， 默认选中状态的data，接受一个对象， 格式：｛'一体机': true, ...｝
          selected: that.selected,
          // 禁止 legend 移入事件
          selectedMode: false,
          formatter: function(name) {
            let legenTile = name + ': '
            for (const item of that.seriesData) {
              if (name === item.name) legenTile += item.value
            }
            return legenTile
          }
        },
        series: [
          {
            name: '设备分类',
            type: 'pie',
            radius: ['50%', '70%'],
            //  移入leged不显示在中间显示
            legendHoverLink: false,
            avoidLabelOverlap: 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: this.seriesData
          }
        ]
      })

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

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

函数如上，大家自行根据自己需求修改即可