echarts 饼图指示器文字颜色设置不同
学习记录，平时开发时遇到过的问题
echarts 饼图 label 文字颜色
需求： 绘制一份环形饼状图，并且有指示器文本标签（文字的颜色需要和各部分相同）
数据：
制作一张环形饼图其实很简单，echarts 官网上也有示例，地址：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut
主要绘制代码：
效果：
问题
但是很明显能够看到饼图的指示器文本标签中的文字颜色都是相同的
从echarts的配置项API查看也知道可以在 label 中设置 color 进行配置，但是这样配置出来的颜色又都是相同了
解决方法
既然如此，那么久只能在data传入的数据中做文章了将上面的pieData数组添加 label 属性，这样一来，也就不需要在 series 重新设置 label 了，并且指示器中文字的颜色也不同了
修改后：
效果：
饼图位置
这里再记录一个知识点，echarts中通常折线图和柱状图如果想要调整在画布中的位置可以使用grid属性，但是饼图不一样，饼图需要在series中调节center,这是一个数组
center是饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
示例：
如果想要将饼图上的文字设置在内部，可以将 position 属性设置为inner，并且需要对颜色进行修改，否则文字与饼图颜色相同是看不到的
前端开发总会遇到图表的需求，绘制图表简单的可以使用 canvas，复杂的统计图表基本都会使用库，比如：echarts、amcharts。
因为不同的业务需求，总会遇到卡点，平时把解决过的问题记录下来，万一能帮到别人呢（毕竟自己也肯定会从别人博客中查找问题解决方案）
版权声明: 本文为 InfoQ 作者【空城机】的原创文章。
原文链接:【http://xie.infoq.cn/article/61869e4bbc5dc4b9b2a9fb147】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
曾经沧海难为水,只是当时已惘然 2021.03.22 加入
业余作者，在线水文 主要干前端的活，业余会学学python 欢迎各位关注，互相学习，互相进步
评论