🍓 作者主页：💖仙女不下凡💖

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

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

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

一、color的全局与局部配置

  • 调色盘颜色列表。如果没有设置全局颜色，则会依次循环从该列表中取颜色作为系列颜色。 默认为：
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
  • 全局color配置代码如下
option = {
  /这里的color是全局配置，下面给的颜色会覆盖上述-调色盘颜色列表-中的颜色，数据会循环红色与绿色/
  color: ['red', 'green'],
  title: {}
}
  • 局部配置如下，color配置项可以写到很多地方，比如title中配置标题颜色，局部配置在tooltip中修改提示框颜色等，请根据实际使用进行配置。

echarts progress颜色 echarts颜色搭配_echarts progress颜色

二、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的格式，后期会补上效果图~~