echarts设置颜色

发表于 | 分类于 | | 阅读次数:
字数统计: 170 字 | 阅读时长 ≈ 1 分钟
  1. 标准色
  2. 配色

项目中，产品给的图表往往颜色难看，需UI协助给出图表的颜色。

其实只需按照色环进行配色即可。

标准色

介绍

12阶色环如下所示：

6阶标准色：

12阶标准色

用法

  1. 饼状图色块在1-6个时，使用“6阶标准色”，超过6个使用“12阶标准色”
  2. 柱状图单一色时使用标准色1，之后按顺序使用标准色

echarts 配色

## 饼图

饼图设置option.color数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
color: [
	'#004DA1',
	'#009EA7',
	'#AACD03',
	'#F9BE00',
	'#EC6C00',
	'#A40081',
	'#0068B6',
	'#00A73B',
	'#FFD800',
	'#F29600',
	'#E5002D',
	'#541B85'
]

柱状图

柱状图设置option.series[index].itemStyle

1
2
3
itemStyle: {
	normal: { color: 'rgb(0,77,161)' }
}