option = {
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
type: 'value'
},
series: [{
type: 'line', // 线图
data: [150, 230, 224, 218, 135, 147],
smooth: true, // 是否平滑曲线
effect: {
show: true, // 是否显示特效
period: 6, // 特效动画时长,单位为 s
trailLength: 0.7, // 特效尾迹的长度,取值范围 [0,1]
symbol: 'circle', // 特效图形,支持 'circle' 和 'rect' 两种形状
symbolSize: 3 // 特效图形的大小
},
lineStyle: {
normal: {
color: '#5470c6' // 线的颜色
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
在上述代码中,通过在 series 的配置中添加 effect,可以启用特效。参数解释如下:
- show:是否显示特效。
- period:特效动画时长,单位为秒。
- trailLength:特效尾迹的长度,取值范围为 [0, 1],表示尾迹占特效线长度的百分比。
- symbol:特效图形,支持 'circle' 和 'rect' 两种形状。
- symbolSize:特效图形的大小。
上述例子中的特效是涟漪特效,表示线图的涟漪动画效果。你可以根据实际需求,调整特效的参数和样式,以适应你的可视化需求。
转载请注明出处:http://www.zyzy.cn/article/detail/5438/ECharts