type
status
date
slug
summary
tags
category
icon
password
Edited
Nov 24, 2023 08:03 AM
Created
Nov 20, 2023 12:14 PM
记录一下在公司遇到的一些功能,以及相关实现
效果展示
ColorPicker的选择
对于ColorPicker的选择,看过市面上大多数的组件都感觉不大行,主要还是看是否支持渐变色功能,TDesign算是比较好的一种了
解析
主要用到的组件是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进行提取,获取到角度和颜色两部分
对于角度的转换,通过将角度转换成弧度值,然后计算出渐变线上的两个端点坐标,就可以支持任意角度的线性渐变了
而颜色的话,就正常字符串解析拆解就好了
完整代码
最终效果
对于其他图表来说,也是一样的,这里再放个环形图的例子
- 作者:JinSo
- 链接:https://jinso365.top/article/echarts-colorpicker
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。