echarts 饼图 让中间文字与饼图对应的色块保持一致

图一:先获取到data值,将name和value的字体颜色设置为你的背景色,数据存在也显示只是因为颜色所以看不见。

echarts 饼图 让中间文字与饼图对应的色块保持一致_第1张图片

图二:鼠标移动事件,鼠标移动后获取到里面的color值,建议先打印params,以便确定具体的路径。

echarts 饼图 让中间文字与饼图对应的色块保持一致_第2张图片

下面附上具体代码,以供复制:

//让文字显示在中间并设置基本样式
              emphasis: {
                label: {
                  fontSize: '20',
                  position: 'center',
                  show: true,
                  formatter: function ({ data }) {
                    let html = `{b| ${data.name}}\n{c|${data.value}}`;
                    return html
                  },
                  rich: {
                    b: {
                      //name 文字样式
                      lineHeight: 20,
                      fontSize: 18,
                      textAlign: "center",
                      color: "#fff",
                    },
                    c: {
                      //value 文字样式
                      lineHeight: 36,
                      fontSize: 18,
                      textAlign: "center",
                      color: "#fff",
                    },
                  }
                }
              },
              label: {
                normal: {
                  position: 'center',
                  show: false
                }
              },




//最后设置文字的具体颜色
        pie.on("mouseover", params => {
          pie.setOption({
            series: {
              label: {
                emphasis: {
                  rich: {
                    b: {
                      //获取 该区域的颜色值,为对应的企业数字体设置颜色
                      color: params.color.colorStops
                    },
                    c: {
                      //获取 该区域的颜色值,为对应的企业数字体设置颜色
                      color: params.color.colorStops
                    }
                  }
                }
              }
            }
          });
        });

 

你可能感兴趣的:(echarts,vue)