趋势图卡片实现原理

背景

春节看板项目中有对数据进行趋势分析的展示，其中一种卡片的展示形式经过思考后可以提炼成组件向外提供服务，于是进行封装上传Semi物料市场

设计

1. 既要支持一个卡片的展现，也要支持多个卡片的展示，所以数据源应该是一个数组 list
2. 每个卡片的大小应该是一样的，所以应该给一个统一设置卡片大小的属性 size
3. 卡片可以静态展示，也可以有响应事件，这里先支持一个点击事件 onClick
4. 单个卡片的功能需要展示趋势折线图，标题，提示，数量，还要支持定制颜色

所以单个卡片的数据结构应该是这样的

name	标题名	string 或者 ReactNode
tip	提示（可选）	string 或者 ReactNode
tipNormalShow	提示图标展示方式,默认值false,鼠标滑过才展示	boolean	FALSE
hoverLayer	鼠标hover是否展示蒙层效果,默认false,不展示	boolean	FALSE
lineColor	折线的颜色,涉及渐变色计算,配置成十六进制格式	string	#E91E63 或者 #00B3A1根据卡片位置奇偶情况切换默认颜色
value	标题下的数据	string 或者 ReactNode
xData	折线图x轴数据	Array[string或者number]
yData	折线图y轴数据	Array[string或者number]
loading	数据加载状态开启,默认false,不开启	boolean
noDataTip	没有数据时的提示	string 或者 ReactNode	抱歉，没有数据可展示
errorInfo	错误展示	{text: ‘xxx’, color: ‘xxxx’}

实现

将List 传进来的数据，循环成多个卡片，将单个卡片信息，onClick 和size都传递给卡片组件

卡片根据传递进来属性的不同状态，展示相关信息

另外折线图依靠echart来画，所以需要根据颜色和卡片位置生产曲线配置，这里依靠getChartOption

计算渐变颜色同转换成rgb格式，设置透明度来实现渐变

体验

在线体验地址：https://semi.bytedance.net/material/zh-CN/playground/219