echarts饼图修改当前鼠标浮动数值信息等样式

echarts饼图修改当前鼠标浮动数值信息等样式

重点

 emphasis: {
              scale: true, // 关闭放大效果
              scaleSize: 5,
              label: {
                show: true,
                fontSize: 10,
                color: '#fff',
                fontWeight: 'bold',
                // formatter: '{fs20|{b}}\n{c} ({d}%)',
                formatter: '{c|{d}}{b| %}\n\n{a|{b}}',
                // formatter: function (params) {
                //   console.log(params);
                //   let { percent, name } = params;
                //   return [
                //     `{c| ${percent}}`, // 这里注意返回数组类型，内为对象，对象必须包裹成字符串，c为当前文字标识，| 后为你想显示的值
                //     `{a|  }%`,
                //     `{b| ${name}}`,
                //   ].join('\n') // 换行
                // },
                rich: {
                  // 定义c类文字样式
                  // 水质类别文字
                  a: {
                    fontSize: 12,
                    fontWeight: 350,
                    fontFamily: 'Source Han Sans CN-Normal',
                    color: 'rgba(255, 255, 255, 0.80)',
                  },
                  // 百分比数值
                  c: {
                    fontSize: 20,
                    fontWeight: 700,
                    fontFamily: 'D-DIN-DIN-Bold',
                    color: '#fff',
                  },
                  // 百分号
                  b: {
                    fontSize: 10,
                    fontWeight: 400,
                    fontFamily: 'D-DIN-DIN-Bold',
                    color: '#ffffff',
                  }
                }

                // formatter: function (value) {
                //   console.log(value);
                //   return value.percent + '%\n' + value.name
                // },
              }
            },

整体

   // 初始化
    initCategoryChart(data) {
      if (this.categorychart != '') {
        this.categorychart.dispose()
      }
      this.categorychart = this.$echarts.init(document.getElementById('categorychart'))
      this.categorychart.clear()

      let that = this
      var option = {
        title: {
          // text: '53.1%',
          // subtext: ' 一类水质',
          left: 'center',
          top: '30%',
          textStyle: {
            color: '#C8E4FF',
            fontFamily: 'DIN-Medium',
            fontSize: 24
          },
          subtextStyle: {
            color: '#FFFFFF',
            fontWeight: 400,
            fontFamily: 'SourceHanSansCN-Regular',
            fontSize: 14
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['80%', '93%'],
            color: this.color,
            avoidLabelOverlap: true,

            label: {
              show: false,
              // formatter: function (value) {
              //   var index = that.categoryList.findIndex(item => item.name === value.name)
              //   if (index != -1) {
              //     that.categoryList[index].percent = value.percent
              //   }
              //   return value.percent
              // },
              position: 'center'
            },
            emphasis: {
              scale: true, // 关闭放大效果
              scaleSize: 5,
              label: {
                show: true,
                fontSize: 10,
                color: '#fff',
                fontWeight: 'bold',
                // formatter: '{fs20|{b}}\n{c} ({d}%)',
                formatter: '{c|{d}}{b| %}\n\n{a|{b}}',
                // formatter: function (params) {
                //   console.log(params);
                //   let { percent, name } = params;
                //   return [
                //     `{c| ${percent}}`, // 这里注意返回数组类型，内为对象，对象必须包裹成字符串，c为当前文字标识，| 后为你想显示的值
                //     `{a|  }%`,
                //     `{b| ${name}}`,
                //   ].join('\n') // 换行
                // },
                rich: {
                  // 定义c类文字样式
                  // 水质类别文字
                  a: {
                    fontSize: 12,
                    fontWeight: 350,
                    fontFamily: 'Source Han Sans CN-Normal',
                    color: 'rgba(255, 255, 255, 0.80)',
                  },
                  // 百分比数值
                  c: {
                    fontSize: 20,
                    fontWeight: 700,
                    fontFamily: 'D-DIN-DIN-Bold',
                    color: '#fff',
                  },
                  // 百分号
                  b: {
                    fontSize: 10,
                    fontWeight: 400,
                    fontFamily: 'D-DIN-DIN-Bold',
                    color: '#ffffff',
                  }
                }

                // formatter: function (value) {
                //   console.log(value);
                //   return value.percent + '%\n' + value.name
                // },
              }
            },
            // emphasis: {
            //   scale: true, // 关闭放大效果
            //   label: {
            //     show: true,  // 鼠标滑上去是否展示占比
            //     fontSize: 10,
            //     color: '#fff',
            //     formatter: function (value) {
            //       return value.percent + '%'
            //     },
            //     // padding: ['20', '20', '20', '20'],
            //   },
            // },
            labelLine: {
              show: true
            },
            data: [
              { value: data[1], name: '一类水质' },
              { value: data[2], name: '二类水质' },
              { value: data[3], name: '三类水质' },
              { value: data[4], name: '四类水质' },
              { value: data[5], name: '劣四类水质' },
            ],
            selectedMode: "multiple",
            selectedOffset: 3
          },
        ]
      };
      this.categorychart.setOption(option);
      let currentIndex = 0; // 当前高亮图形在饼图数据中的下标
      selectPie()
      if (this.changePieInterval)
        clearInterval(this.changePieInterval);
      this.changePieInterval = setInterval(selectPie, 5000); // 设置自动切换高亮图形的定时器

      function highlightPie() { // 取消所有高亮并高亮当前图形
        for (var idx in option.series[0].data)
          // 遍历饼图数据，取消所有图形的高亮效果
          that.categorychart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: idx
          });
        // 高亮当前图形
        that.categorychart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        });
      }

      that.categorychart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        if (this.changePieInterval)
          clearInterval(this.changePieInterval);
        currentIndex = params.dataIndex;
        highlightPie();
      });

      that.categorychart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
        if (this.changePieInterval)
          clearInterval(this.changePieInterval);
        this.changePieInterval = setInterval(selectPie, 5000);
      });

      function selectPie() { // 高亮效果切换到下一个图形
        var dataLen = option.series[0].data.length;
        currentIndex = (currentIndex + 1) % dataLen;
        highlightPie();
      }
    },