记录一下在公司遇到的一些功能，以及相关实现

效果展示

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渐变色