ECharts — 通过ColorPicker控制ECharts图表的渐变色

记录

效果展示

ColorPicker的选择

对于ColorPicker的选择，看过市面上大多数的组件都感觉不大行，主要还是看是否支持渐变色功能，TDesign算是比较好的一种了

TDesign Web React

解析

主要用到的组件是TDesign的ColorPicker组件以及ECharts的图表组件

对于ColorPicker的渐变色实现，本质上就是CSS的线性渐变功能

linear-gradient(90deg,rgba(168, 28, 8, 1) 0%,rgb(73, 106, 220) 100%)

接下来，我们来看看ECharts的渐变色实现，之前也讲过一次了，我们直接看代码

color: props.option.color.map(color => {
  return {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(0,180,255,.05)' // 0% 处的颜色
      },
      {
        offset: 1,
        color: color // 100% 处的颜色
      }
    ]
  }
})

与CSS相比，最大的一点不同就是它是用两个点坐标来表示角度的

举个例子，比如说90deg也就相当于点(0,0)到点(0,1)，所有参数就是 0 0 0 1

接下来，就是最重要的，转换函数了

CSS渐变色转换为ECharts渐变色

首先判断是否为渐变色，不是则不用转换

const matches = cssColor.match(/linear-gradient\((.*)\)/)

接下来对解析好的matches进行提取，获取到角度和颜色两部分

对于角度的转换，通过将角度转换成弧度值，然后计算出渐变线上的两个端点坐标，就可以支持任意角度的线性渐变了

const angle = +parts[0]
const radian = (angle * Math.PI) / 180
const x = Math.cos(radian)
const y = Math.sin(radian)
const x2 = Math.cos(radian + Math.PI)
const y2 = Math.sin(radian + Math.PI)

而颜色的话，就正常字符串解析拆解就好了

完整代码

// css颜色转换为echarts颜色
export const convertCssColorToEChartsColor = (cssColor: string) => {
  const matches = cssColor.match(/linear-gradient\((.*)\)/)
  // 不是渐变色直接返回
  if (!matches) return cssColor

  const parts = matches[1].split('deg,')

  // 将角度转换成坐标
  const angle = +parts[0]
  const radian = (angle * Math.PI) / 180
  const x = Math.cos(radian)
  const y = Math.sin(radian)
  const x2 = Math.cos(radian + Math.PI)
  const y2 = Math.sin(radian + Math.PI)

  // 颜色转换处理
  const colors = parts[1].split('%,')
  const colorStops: { offset: number; color: string }[] = []
  for (let i = 0; i < colors.length; i++) {
    const splitIndex = colors[i].lastIndexOf(' ')

    const color = colors[i].slice(0, splitIndex)
    let percent = colors[i].slice(splitIndex + 1)
    if (percent.endsWith('%')) percent = colors[i].slice(splitIndex + 1, -1)

    colorStops.push({
      offset: +percent / 100,
      color
    })
  }

  return {
    type: 'linear',
    x,
    y,
    x2,
    y2,
    colorStops
  }
}

最终效果

对于其他图表来说，也是一样的，这里再放个环形图的例子