ECharts 饼图颜色设置，随机颜色

最新推荐文章于 2024-11-26 10:37:49 发布

轻重711

最新推荐文章于 2024-11-26 10:37:49 发布

阅读量705

点赞数 4

分类专栏： echarts框架文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/god_of_war_01/article/details/143307871

版权

echarts框架专栏收录该内容

2 篇文章

订阅专栏

饼图颜色设置方式

一、在 `series` 内设置饼状图颜色

color: function () {
   let colorList = [
     '#0060E5',
     '#33C2FF',
     '#FFC61A',
     '#61bc7e',
     '#64bd80',
     '#e4f4ff',
    ];
   return colorList[colors.dataIndex];
}

二、在 `option` 中设置饼状图颜色

option: {
  ...
  color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'],

}

三、在 `data` 内配置饼状图颜色

     data: [
        { value: 1, name: '2',itemStyle: {color:'#fc8251'}},
        { value: 1, name: '2',itemStyle: {color:'#5470c6'}},
        { value: 1, name: '2',itemStyle: {color:'#91cd77'}},
        { value: 1, name: '2',itemStyle: {color:'#ef6567'}},
        { value: 1, name: '2',itemStyle: {color:'#f9c956'}}
      ]

四、随机颜色

   itemStyle: {
        // borderRadius: 5
        normal: {
          color: function (colors) {
            return 'rgb(' + [
	            Math.round(Math.random() * 270),
	            Math.round(Math.random() * 370),
	            Math.round(Math.random() * 400)
	            ].join(',') + ')';
          },
          label: { 
            show: true, 
            formatter: '{d}% \n {c}' 
          }
        }
      },