软件系统开发定制四、Echart图表 之 颜色color配置项大全

🍓 作者主页：💖软件系统开发定制仙女不下凡💖

🍓 前言介绍：以下👇软件系统开发定制内容是我个人对于该技术的总结，软件系统开发定制如有不足与错误敬请指正！

🍓 欢迎点赞👍 收藏⭐ 留言📝 软件系统开发定制相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！

---

• 这篇文章我主要是记录了color各种颜色配置的方法，比如渐变、纹理等这些复杂颜色在实际应用中怎么配置。

一、color的全局与局部配置

• 调色盘颜色列表。如果没有设置全局颜色，则会依次循环从该列表中取颜色作为系列颜色。 默认为：

['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
1

• 全局color配置代码如下

option = {  /这里的color是全局配置，下面给的颜色会覆盖上述-调色盘颜色列表-中的颜色，数据会循环红色与绿色/  color: ['red', 'green'],  title: {}}
1
2
3
4
5

• 局部配置如下，color配置项可以写到很多地方，比如title中配置标题颜色，局部配置在tooltip中修改提示框颜色等，请根据实际使用进行配置。
  

二、color的多种数据类型

1.不透明度

① 颜色英文名

color: 'red'
1

② 十六进制格式

color: '#ccc'
1

③ rgb格式

color: 'rgb(128, 128, 128)'
1

2.透明度

color: 'rgb(128, 128, 128, .5)'
1

3.线性渐变

① LinearGradient

color: [  //仪表盘背景颜色渐变  [1,new echarts.graphic.LinearGradient(0, 0, 1, 0,     [{      offset: 0.1,      color: "#fd2100"    }, {      offset: 0.6,      color: "#d09f00"    }, {      offset: 1,      color: "#26fd00"    }]);  ]]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

② 线性渐变linear

/前四个参数分别是x0,y0,x2,y2，范围从0-1，相当于在图形包围盒中的百分比，若globalCoord为true，则该四个值是绝对的像素位置/color: {  type: 'linear',  x: 0,  y: 0,  x2: 0,  y2: 1,  colorStops: [{    offset: 0, color: 'red' // 0% 处的颜色  }, {    offset: 1, color: 'blue' // 100% 处的颜色  }],  global: false // 缺省为 false}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.径向渐变

① RadialGradient

color:new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{  offset: 0,  color: '#f7f8fa'}, {  offset: 1,  color: '#cdd0d5'}])
1
2
3
4
5
6
7

② 径向渐变radial

/前三个参数分别是圆心x,y和半径，取值同线性渐变/color: {  type: 'radial',  x: 0.5,  y: 0.5,  r: 0.5,  colorStops: [{    offset: 0, color: 'red' // 0%处的颜色  }, {    offset: 1, color: 'blue' // 100% 处的颜色  }],  global: false // 缺省为 false}
1
2
3
4
5
6
7
8
9
10
11
12
13

5.扇形渐变

color: [  [0.1, 'red'],  [0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0,    [{      offset: 0,      color: 'red'    }, {      offset: 0.8,      color: 'rgb(235,205,6)'    }]  )],  [0.7, 'rgb(235,205,6)'],  [0.9, new echarts.graphic.LinearGradient(0, 1, 0, 0,    [{      offset: 0,      color: 'rgb(13,211,97)'    }, {      offset: 0.6,      color: 'rgb(235,205,6)'    }]  )],  [1, 'rgb(13,211,97)']],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6.纹理填充

color: {  //支持为HTMLImageElement, HTMLCanvasElement，不支持路径字符串  image: document.getElementById('bg_img'),   repeat: 'repeat' // 是否平铺，可以是'repeat-x','repeat-y','no-repeat'}
1
2
3
4
5

<img src="bg.png" id="bg_img" style="display:none" />
1

• 以上基本就是所有color的格式，后期会补上效果图~~

---

👉推荐相关文章：

👉推荐相关文章：

👉推荐相关文章：

👉推荐相关文章：

👉推荐相关文章：

👉推荐相关文章：

参考文章：