四、Echart图表 之 颜色color配置项大全

作者主页：仙女不下凡

前言介绍：以下内容是我个人对于该技术的总结，如有不足与错误敬请指正！

欢迎点赞 收藏⭐ 留言 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！

---

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

一、color的全局与局部配置

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

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

• 全局color配置代码如下

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

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

二、color的多种数据类型

1.不透明度

① 颜色英文名

color: 'red'

② 十六进制格式

color: '#ccc'

③ rgb格式

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

2.透明度

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

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"
    }]);
  ]
]

② 线性渐变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
}

4.径向渐变

① RadialGradient

color:new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
  offset: 0,
  color: '#f7f8fa'
}, {
  offset: 1,
  color: '#cdd0d5'
}])

② 径向渐变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
}

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)']
],

6.纹理填充

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

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

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

---

推荐相关文章：Echart图表 之 基本使用及配置项

推荐相关文章：Echart图表 之 title配置项大全

推荐相关文章：Echart图表 之 legend图例组件配置项大全

推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全

推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全

推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全

参考文章：ECharts color属性设置（不透明度，透明度，线性渐变，径向渐变，扇形渐变，纹理填充）