Echarts颜色设置技巧让你的图表更加生动鲜明

一、利用调色板实现自定义颜色

Echarts 提供了一些预设的调色板，如果这些颜色不能满足你的需求，你可以使用 echarts.init(opts: Object, [theme: Object|string], [opts2: Object]) 初始化图表时，指定颜色数组或颜色函数。其中颜色函数有两个参数，第一个参数是系列号，第二个参数是数据编号。

var chart = echarts.init(document.getElementById('main'),'light');
var option = {
    color: ['#37a2da', '#67e0e3', '#9fe6b8','#ffdb5c', '#ff9f7f', '#e062ae', '#e690d1', '#e7bcf3','#9d96f5','#8378EA'],
    series: {
        ...
    }
};

除此之外，你还可以通过 define 定义自己的颜色系列。

echarts.util.define(
    "myTheme",
    {
        color: [
            "#c23531",
            "#2f4554",
            "#61a0a8",
            "#d48265",
            "#91c7ae",
            "#749f83",
            "#ca8622",
            "#bda29a",
            "#6e7074",
            "#546570",
            "#c4ccd3"
        ]
    }
);

二、通过渐变色让图表更加引人入胜

你还可以通过 echarts graphic 组件中的 rect 和 linearGradient，利用渐变实现更加丰富的图表颜色表现。

var chart = echarts.init(document.getElementById('main'),'light');
var option = {
    graphic: [{
        type: 'rect',
        left: 'center',
        top: 'middle',
        z: 100,
        shape: {
            width: 400,
            height: 50,
            r: 20
        },
        style: {
            fill: {
                type: 'linear',
                colorStops: [{
                    offset: 0,
                    color: '#0f0'
                }, {
                    offset: 1,
                    color: '#f00'
                }]
            }
        }
    }],
    series: {
        ...
    }
};

三、利用主题色系让图表风格统一

Echarts 主题默认提供了 7 种系列配色主题。

var chart = echarts.init(document.getElementById('main'),'dark');

对于喜欢自定义主题的用户，Echarts 提供了 createTheme 函数，用户只需要提供主题的颜色数组就可以自动生成主题。

echarts.registerTheme('myTheme', {
    color: ['#9bd7ff', '#ffc448', '#ff8080', '#009cff', '#7ecef4', '#5ac8ed', '#d66bc2', '#5c71c8', '#3ed7f1', '#ffc172']
});

var chart = echarts.init(document.getElementById('main'),'myTheme');

四、动态改变图表颜色

有时候需要通过用户交互动态改变图表的颜色，Echarts 提供了 setOption 函数。你只需要修改 option.color 数组的值或者通过 option.series.itemStyle.normal.color<-Function 来更新颜色函数，然后调用 setOption 函数就可以轻松更新图表颜色。

var chart = echarts.init(document.getElementById('main'),'light');
var option = {
    color: ['#37a2da', '#67e0e3', '#9fe6b8','#ffdb5c', '#ff9f7f', '#e062ae', '#e690d1', '#e7bcf3','#9d96f5','#8378EA'],
    series: {
        ...
    }
};
chart.setOption(option);

// 修改颜色
option.color = ['#ff7875', '#ff9c6e', '#ffc069','#ffd666', '#b37feb', '#727bec', '#3eaf7c', '#4a657a','#223273','#6f6f6f'];
chart.setOption(option);

五、结合图表类型选择合适的颜色表现

图表类型不同，所要表达的信息也不同，因此在选择颜色的时候也要根据不同的图表类型搭配合适的颜色方案。例如饼图通常需要使用渐变色、饱和度高的颜色，使得整个图表更加美观。而折线图可以利用深浅不一的颜色来突出关键点。

var chart = echarts.init(document.getElementById('main'),'light');
var option = {
    color: ['#37a2da', '#67e0e3', '#9fe6b8','#ffdb5c', '#ff9f7f', '#e062ae', '#e690d1', '#e7bcf3','#9d96f5','#8378EA'],
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            roseType: 'angle',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 1,
                        colorStops: [
                            {
                                offset: 0, color: '#7ecef4' // 0% 处的颜色
                            },
                            {
                                offset: 1, color: '#3eaf7c' // 100% 处的颜色
                            }
                        ],
                    },
                }
            },
            data: [...]
        },
        {
            name:'邮件营销',
            type:'line',
            data:[120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
                color: '#009cff'
            },
            lineStyle: {
                color: '#2f4554'
            }
        }
    ]
};
chart.setOption(option);