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

最新推荐文章于 2024-09-09 15:44:32 发布

原创最新推荐文章于 2024-09-09 15:44:32 发布 · 4.6k 阅读

5 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

echarts

5 篇文章

订阅专栏

这篇博客介绍了如何使用Echarts库在饼图中动态改变name和value文字的颜色。通过设置emphasis和normal标签的label属性，可以实现文字居中并设定基本样式。在mouseover事件中，获取当前区域的color值，并据此更新文字颜色。提供的代码示例详细展示了这一过程。

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

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

下面附上具体代码，以供复制：

//让文字显示在中间并设置基本样式
              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
                    }
                  }
                }
              }
            }
          });
        });