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

最新推荐文章于 2024-08-02 10:25:43 发布

m0_67403188

最新推荐文章于 2024-08-02 10:25:43 发布

阅读量2.9w

点赞数 15

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67403188/article/details/126099486

版权

本文详细介绍了ECharts饼图颜色设置的四种方法，包括在`series`、`option`、`data`内配置颜色，以及如何设置随机颜色。此外，还推荐了使用卡拉云快速生成图表，无需编写前端代码。

摘要由CSDN通过智能技术生成

echart

本文首发：《ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色》

ECharts 饼状图颜色设置教程

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];
       }
     },
   }
 ]

01-vue-echarts-series

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

option = {
  title: {
    text: '卡拉云流量来源渠道汇总',
    subtext: '本月数据',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  ser