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

最终效果

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

相关推荐
Mr.Liu610 分钟前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
76756047911 分钟前
useDateFormat源码解析
前端·源码
Mintopia11 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52012 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖12 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia12 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
贵州数擎科技有限公司13 分钟前
Threejs绘制小兩伞快拿去送给你的女神
前端
Carlos_sam15 分钟前
OpenLayers:封装Overlay的方法
前端·javascript
MariaH15 分钟前
Sequelize模型初探
前端·后端
树豪16 分钟前
跟着官网学 Lynx 之 搭建 Lynx todo-list app
android·前端