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

date
Nov 20, 2023
slug
echarts-colorpicker
status
Published
tags
Technology
summary
总结一下最近在公司做需求遇到的一些问题
type
Post
记录一下在公司遇到的一些功能，以及相关实现
效果展示
notion image
 

ColorPicker的选择

对于ColorPicker的选择，看过市面上大多数的组件都感觉不大行，主要还是看是否支持渐变色功能，TDesign算是比较好的一种了
TDesign Web React
React UI Component
TDesign Web React
https://tdesign.tencent.com/react/components/color-picker
 

解析

主要用到的组件是TDesign的ColorPicker组件以及ECharts的图表组件
对于ColorPicker的渐变色实现，本质上就是CSS的线性渐变功能
linear-gradient(90deg,rgba(168, 28, 8, 1) 0%,rgb(73, 106, 220) 100%)
 
接下来，我们来看看ECharts的渐变色实现，之前也讲过一次了，我们直接看代码
与CSS相比，最大的一点不同就是它是用两个点坐标来表示角度的
举个例子，比如说90deg也就相当于点(0,0)到点(0,1)，所有参数就是 0 0 0 1
接下来，就是最重要的，转换函数了
 

CSS渐变色转换为ECharts渐变色

首先判断是否为渐变色，不是则不用转换
接下来对解析好的matches进行提取，获取到角度和颜色两部分
对于角度的转换，通过将角度转换成弧度值，然后计算出渐变线上的两个端点坐标，就可以支持任意角度的线性渐变了
而颜色的话，就正常字符串解析拆解就好了
 
完整代码
 
最终效果
notion image
 
对于其他图表来说，也是一样的，这里再放个环形图的例子
notion image
 

© JinSo 2021 - 2025