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的渐变色实现,之前也讲过一次了,我们直接看代码

typescript 复制代码
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渐变色

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

javascript 复制代码
const matches = cssColor.match(/linear-gradient\((.*)\)/)

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

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

typescript 复制代码
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)

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

完整代码

typescript 复制代码
// 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
  }
}

最终效果

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

相关推荐
m0_728033134 分钟前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端
简小瑞11 分钟前
VSCode源码解密:Event<T> - 类型安全的事件系统
前端·设计模式·visual studio code
寧笙(Lycode)13 分钟前
OpenTelemetry 入门
前端
猪哥帅过吴彦祖15 分钟前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
用户3521201956015 分钟前
React hooks (useRef)
前端
Mintopia19 分钟前
⚡当 Next.js 遇上实时通信:Socket.io 与 Pusher 双雄传
前端·后端·全栈
tangdou36909865522 分钟前
可怕!我的Nodejs系统因为日志打印了Error 对象就崩溃了😱 Node.js System Crashed Because of Logging
前端·javascript·后端
Takklin25 分钟前
Vue 与 React 应用初始化机制对比 - 前端框架思考笔记
前端·react.js
Mintopia28 分钟前
🎨 数据增强技术在 AIGC 训练中的应用:提升 Web 生成的多样性
前端·javascript·aigc
华仔啊29 分钟前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js