echarts 柱状图 bar、饼状图 pie 设置不同颜色，如何实现

echarts 柱状图 bar、饼状图 pie 设置不同颜色，如何实现

echarts 配置柱状图、饼状图，不同数据颜色不一，如何实现

实现方法一

直接修改 series > colorBy 属性，改为 data
它会遍历 option.color 中的颜色数组，循环使用，这种情况适合只是简单的区分颜色的场景。

color: [
    '#4CD964',
    '#5AC8FA',
    '#007AFF',
    '#5856D6',
    '#FF2D70',
    '#FF3B30',
    '#FF9500',
    '#FFCC00',
    '#8E8E93',
],
series: [
     {
         name: '报警数量',
         type: 'bar',
         data: [],
         colorBy: 'data' // 默认是 series
     },
 ]

实现方法二

主要是 series 中的 itemStyle 属性，这种适合需要指定类别的颜色的场景。

官方说明： https://echarts.apache.org/zh/option.html#series-pie.itemStyle

你需要先准备一个颜色数组

// 这个颜色数组中有 8 个颜色
const COLORS =  [
    '#FFA41C',
    '#2F3037',
    '#9FE080',
    '#5C7BD9',
    '#7ED3F4',
    '#EE6666',
    '#c7c7c7',
    '#FFDC60'
]

这里需要说明一下 item 的内容，它的完整内容是这样的，但我们只需要其中几个就可以了

• item.dataIndex 就是数据的 index
• item.data 就是对应的单条数据内容
  

itemStyle: {
    normal:{
        color: item => {
            return colors[item.dataIndex]
        }
    }
}

更进一步，如果数据条数比颜色数量多，如何让颜色循环使用呢？这里就用到了一个非常基础的知识点，取余的操作 %
将 item.dataIndex 对 颜色数组的数量取余即可。

解释一下：
比如数组颜色有8个颜色，它能取到颜色的 index 就是 0-7。如果数组有 10 个，我们可以将它对 7 取余 10%7，那么余数只会是 0-7 的某一个数。

所以上面这个可以改进为

itemStyle: {
    normal:{
        color: item => {
            return colors[item.dataIndex%(COLORS.length)]
        }
    }
}

完整代码

完整代码如下：

// 定义使用的颜色数组
const COLORS= ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83'];

// echart 配置项
let option = {
    title: {
        show: false,
        text: '课程统计'
    },
    color: colors,
    xAxis: {
        name: '类别',
        data: ["机构", "课程", "学校", "教师", "选课数"]
    },
    yAxis: {
        name: '人数'
    },
    series: [
        {
            type: 'bar',
            name: '人数',
            data: generateArraySize(5, [10,60]),
            itemStyle: {
                normal:{
                    color: item => {
                           return COLORS[item.dataIndex%(COLORS.length)]
                    }
                }
            },
            barWidth: '40',
            label: {
                show: true,
                position: 'top'
            },
        }
    ]
}

最终结果如下：