ECharts 饼状图颜色设置

背景：
引入饼状图，不自定义颜色，会自动给颜色，但是，在不同的页面调用了同一个接口的饼图，相同数据，显示的颜色不一致，希望显示的能颜色一致
。
解决
。
饼状图颜色设置有好几种方式

• 方式一：在 option 内通过color属性配置饼状图颜色
• 方式二：在 series 内配置饼状图颜色
• 方式三：在 data 内配置饼状图颜色

先放下实现的图例

具体使用
方式一：在 option 内通过color属性配置饼状图颜色

option = {color: ['#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'],series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]
};

方式二：在 series 内配置饼状图颜色

option = {series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],itemStyle: {normal: {color: function (colors) {let colorList = ['#C1EBDD','#FFC851','#5A5476','#1869A0','#FF9393'];return colorList[colors.dataIndex];}}},}]
};

方式三：在 data 内配置饼状图颜色

option = {series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine', itemStyle: { color: '#C1EBDD' } },{ value: 735, name: 'Direct', itemStyle: { color: '#FFC851' } },{ value: 580, name: 'Email', itemStyle: { color: '#5A5476' } },{ value: 484, name: 'Union Ads', itemStyle: { color: '#1869A0' } },{ value: 300, name: 'Video Ads', itemStyle: { color: '#FF9393' } }]}]
};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！