echarts设置散点图颜色渐变

在echarts散点图中,可以使用系统默认的图例颜色设置散点图,也可以设置具体的颜色设置,还可以添加单个散点颜色渐变,也可以设置整个echarts散点颜色渐变

1. 不设置颜色

在不设置颜色的情况下,echarts会使用自带的调色盘进行颜色选择默认如下。

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

2. 设置调色盘

echarts可以通过setOption设置自定义的调色盘,具体如下

myChart.setOption({
	color:[]
})

3. 使用渐变色

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
{
  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
}
// 纹理填充
{
  image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

4. 使用visualMap设置整个系列渐变

 visualMap: {
      // min: 200,
      // max: 900,
      dimension: 2, // 维度 默认最后
      seriesIndex: 0, // 取数据得哪一个系列
      left: 'right',
      top: 'top',
      text: ['HIGH', 'LOW'], // 文本,默认为数值文本
      calculable: true,
      itemWidth: 18,
      itemHeight: 200,
      textStyle: {
        color: '#3259B8',
        height: 56,
        fontSize: 11,
        lineHeight: 60
      },
      inRange: {
        color: ['#9aceff', '#016bcd']  //渐变起始值
      },
      orient: 'horizontal'
    },
posted @ 2023-06-19 16:47  Cxymds  阅读(1047)  评论(0编辑  收藏  举报