在 ECharts 中,你可以通过特效(effect)来增加一些动态效果,比如线图的涟漪特效。以下是一个简单的例子,演示如何为线图添加特效:
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