echart：饼图扇形颜色和文字颜色设置

最新推荐文章于 2025-04-22 14:36:11 发布

原创最新推荐文章于 2025-04-22 14:36:11 发布 · 5.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #javascript

echarts 专栏收录该内容

33 篇文章

订阅专栏

本文探讨如何在图表中确保扇形图的颜色与文字颜色保持一致，通过实例展示了如何配置数据项的样式，如襄州区的红色、高新技术产业开发区的绿色等。

效果图：扇形颜色和文字颜色保持一致

 data: [{
                value: 40,
                name: '襄州区',
                // 设置扇形的颜色
                itemStyle: {
                        color: 'red'
                      },
                // 设置文字的颜色
                label: {
                        color: 'red'
                      }
              },
              {
                value: 22,
                name: '高新技术产业开发区',
                itemStyle: {
                        color: 'green'
                      },
                label: {
                        color: 'green'
                      }
              },
              {
                value: 33,
                name: '襄城区',
                itemStyle: {
                        color: 'yellow'
                      },
                label: {
                        color: 'yellow'
                      }
              },
              {
                value: 28,
                name: '樊城区',
                itemStyle: {
                        color: 'blue'
                      },
                label: {
                        color: 'blue'
                      }
              },
              {
                value: 20,
                name: '鱼梁洲经济开发区',
                itemStyle: {
                        color: 'pink'
                      },
                label: {
                        color: 'pink'
                      }
              }
              
            ]
          }]