echarts饼图指示器文字颜色设置不同实例详解
更新时间：2022年07月27日 11:46:08 作者：空城机
在默认的饼状图里面,图例legend颜色是黑色的,有时候根据ui需要,根据不同的背景色,需要将图例文字调成白色或者其他颜色,下面这篇文章主要给大家介绍了关于echarts饼图指示器文字颜色设置不同的相关资料,需要的朋友可以参考下
学习记录，平时开发时遇到过的问题
echarts饼图label文字颜色
需求： 绘制一份环形饼状图，并且有指示器文本标签（文字的颜色需要和各部分相同）
数据：
pieData: [
{
name: '犯人',
value: 30
},
{
name: '官差',
value: 35
},
{
name: '平民',
value: 35
},
]，
// 颜色
colorList: ['#EA7267', '#F0D84B', '#7AE72F']
制作一张环形饼图其实很简单，echarts官网上也有示例，地址：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut
主要绘制代码：
let options = {
......
series: [
{
type: 'pie',
radius: ['40%', '62%'],
data: this.pieData,
itemStyle: {
color:(params)=> {
var index = params.dataIndex;
return this.colorList[index];
},
},
label: { },
}
],
}
效果：
问题
但是很明显能够看到饼图的指示器文本标签中的文字颜色都是相同的
从echarts的配置项API查看也知道可以在label中设置color进行配置，但是这样配置出来的颜色又都是相同了
解决方法
既然如此，那么久只能在data传入的数据中做文章了
将上面的pieData数组添加label属性，这样一来，也就不需要在series重新设置label了，并且指示器中文字的颜色也不同了
修改后：
series: [
{
type: 'pie',
radius: ['40%', '62%'],
data: this.pieData.map((item, index)=> {
item.label = {
color: this.colorList[index]
}
return item;
}),
itemStyle: {
color:(params)=> {
var index = params.dataIndex;
return this.colorList[index];
},
},
}
],
效果：
饼图位置
这里再记录一个知识点，echarts中通常折线图和柱状图如果想要调整在画布中的位置可以使用grid属性，但是饼图不一样，饼图需要在series中调节center,这是一个数组
center是饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
示例：
前端开发总会遇到图表的需求，绘制图表简单的可以使用canvas，复杂的统计图表基本都会使用库，比如：echarts、amcharts。
因为不同的业务需求，总会遇到卡点，平时把解决过的问题记录下来，万一能帮到别人呢（毕竟自己也肯定会从别人博客中查找问题解决方案）
总结
到此这篇关于echarts饼图指示器文字颜色设置不同的文章就介绍到这了,更多相关echarts饼图指示器文字颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
网页截图是指将网页上的内容截取下来,并保存为图片的过程,下面这篇文章主要给大家介绍了关于JavaScript实现页面截图的3种解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了JavaScript中的异步能省掉await吗?一直以来，困扰我的一个问题是JavaScript中，能否实现不带await的异步。今天我终于把这个问题想通了然后分享给大家，希望对大家的学习过程有所帮助2021-12-12
这篇文章主要介绍了Javascript判断文件是否存在的方法适用于客户端、服务器端，远程文件，示例代码如下,需要的朋友可以参考下2014-09-09
这篇文章主要为大家详细介绍了JS实现页面跳转并传值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了小程序封装wx.request请求并创建接口管理文件2019-04-04
这篇文章主要给大家介绍了关于echarts同一页面中四个图表切换的js数据交互的相关资料，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的帮助，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要为大家介绍了websocket直接绕过JS加密的示例及思路原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
下面小编就为大家分享一篇基于js 各种排序方法和sort方法的区别(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要给大家介绍了关于JavaScript中正则表达式实际应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要为大家详细介绍了js cookie实现记住密码功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
最新评论