效果展示:
源码:
/**
* series-lines路径图
* @param xAxis 维度数据,如["测1", "测2", "测3", "测4", "测5", "测6", "测7", "测8"],
* @param dataSet 指标数据 serise的value,如[90, 555, 666, 999, 567, 999, 888, 0]
* @returns
*/
export const getSeriesLineEffect = (xAxis:any=[],dataSet:any=[],yAxisIndex:any=0,color='#fff')=>{
let yData = dataSet,
xData = xAxis,
datacoords:any = [];
if(xData.length){
for (var i = 0; i < xData.length; i++) {
datacoords.push([
{
coord: [i, yData[i]],
},
{
coord: [i + 1, yData[i + 1]],
},
]);
};
}
let effect = {
type: "lines",
// 流动特效只支持非平滑曲线(smooth:false)
smooth: false,
showSymbol: false,
// 是否是多段线
polyline: true,
// 该系列使用的坐标系,可选:'cartesian2d'-使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件
coordinateSystem: "cartesian2d",
zlevel: 1,
effect: {
// 是否显示特效
show: true,
// 特效图形的标记
smooth: true,
// 特效动画的时间,单位为 s
period: 6,
// 特效标记的大小
symbolSize: 4,
},
lineStyle: {
color: color,
width: 1,
opacity: 0,
curveness: 0,
cap: "round",
},
// 使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
yAxisIndex :yAxisIndex,
// 一个包含两个到多个二维坐标的数组
data: datacoords,
}
return effect;
}
生成数据结构展示:
{
"type": "lines",
"smooth": false,
"showSymbol": false,
"polyline": true,
"coordinateSystem": "cartesian2d",
"zlevel": 1,
"effect": {
"show": true,
"smooth": true,
"period": 6,
"symbolSize": 4
},
"lineStyle": {
"color": "#fff",
"width": 1,
"opacity": 0,
"curveness": 0,
"cap": "round"
},
"data": [
[
{
"coord": [
0,
"130396"
]
},
{
"coord": [
1,
"129195"
]
}
],
[
{
"coord": [
1,
"129195"
]
},
{
"coord": [
2,
"128497"
]
}
],
[
{
"coord": [
2,
"128497"
]
},
{
"coord": [
3,
null
]
}
]
]
}