echarts渐变内置生成器echarts.graphic.LinearGradient

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

  series: [
    {
      name: '',
      type: 'bar',
      barMaxWidth: 20,
      label: {
        show: true,
        color: '#fff',
      },
      showBackground: true,
      backgroundStyle: {
        color: '#d5f1f9',
        borderRadius: [20, 20, 20, 20],
      },
      itemStyle: {
        borderRadius: [20, 20, 20, 20],
	    // 颜色渐变函数 前四个参数分别表示四个位置依次为
        // 右下左上
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          { offset: 0, color: 'blue' },
          { offset: 1, color: 'red' },
        ]),
      },
      data: [0, 0, 0],
    },
  ]

入了5个参数：

前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位。而0 0 0 1则代表渐变色从正上方开始.
第5个参数则是一个数组，用于配置颜色的渐变过程. 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色

echarts渐变色实现方法