ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色

本文首发：《》

ECharts 饼状图中的每个扇形颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各销售渠道名，那么你可以需要使用全局统一的识别色彩，那么就需要指定每个扇面的颜色。本文讲解 4 种配置修改 ECharts 饼图颜色的方法。

另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用 —— 新一代低代码开发工具帮你搭建后台工具，卡拉云可一键接入常见数据库及 API ，无需懂前端，内置包括 ECharts 在内的各类前端组件，无需调试，拖拽即用。原来三天的工作量，现在 1 小时搞定，谁用谁知道，早用早下班，详见本文文末。

方法一：在 series 内配置饼状图颜色

series: [
  itemStyle: {
    normal: {
      color: function (colors) {
         var colorList = [
           #fc8251,
           #5470c6,
           #91cd77,
           #ef6567,
           #f9c956,
           #75bedc
         ];
         return colorList[colors.dataIndex];
       }
     },
   }
 ]

EChart.js 在 series 中设置饼状图颜色的 Demo 源代码：

扩展阅读：《》

方法二：在 option 内配置饼状图颜色

color**:**[#3ca170,#5470c6, #91cd77,#ef6567, #f9c956,#75bedc],

EChart.js 在 option 中设置饼状图颜色的 Demo 源代码：

扩展阅读：《》

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

EChart.js 在 data 中设置饼状图颜色的 Demo 源代码：

扩展阅读：《》

方法四：配置 ECharts 饼状图随机颜色

color: function () {
          return (
            rgb( +
            [
              Math.round(Math.random() * 270),
              Math.round(Math.random() * 370),
              Math.round(Math.random() * 400)
            ].join(,) +
            )
          );
        },

扩展阅读：《》

使用「卡拉云」直接生成饼状图

本文介绍了如何解决在 Vue 中 ECharts 饼图指定或随机颜色的解决方案，虽然开源库已经帮我们解决了大部分造轮子的事，但总有些细枝末节的问题需要我们自己手动解决。那么有没有一种完全不用会前端，一行代码也不用写的方法，生成图表呢？这里推荐你使用，卡拉云内置多种样式的图表，仅需鼠标拖拽即可生成，完全不用懂任何前端。

卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费。

扩展阅读：