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
  }
}

最终效果

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

相关推荐
华仔啊8 分钟前
前端登录token到底应该存在哪?LocalStorage、SessionStorage还是Cookie?一篇说透!
前端·javascript
BeefyBytes16 分钟前
动态组件库建设
前端
懒大王952737 分钟前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
yinuo44 分钟前
Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)
前端
xkroy1 小时前
ajax
前端·javascript·ajax
Yvonne爱编码1 小时前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
闲人编程1 小时前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang1 小时前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区2 小时前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript