ID

9

配置代码

const option = {
        backgroundColor: '#0e2147',
        title: {
            text: 'echarts 折线图自定义图标移动效果',
            left: 'center',
            top: 10,
            textStyle: {
                color: '#00ffff',
                fontSize: 16,
                fontWeight: 400
            }
        },
        grid: {
            left: '5%',
            top: '15%',
            bottom: '5%',
            right: '5%',
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            type: "scroll",
            data: "来电量",
            itemWidth: 18,
            itemHeight: 12,
            textStyle: {
                color: "#00ffff",
                fontSize: 14
            },
        },
        yAxis: [{
            type: 'value',
            position: 'left',
            nameTextStyle: {
                color: '#00FFFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(135,140,147,0.8)'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value}',
                color: '#fff',
                fontSize: 14
            }
        }],
        xAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#0696f9',
                }
            },
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#fff',
                    fontWeight: 'normal',
                    fontSize: '14',
                    lineHeight: 22
                }
            },
            data: XName,
        }],
        series: [
            {
                // 折线图：自定义大图标作为拐点
                symbolSize: 50,
                symbol: img[2], // 用第三个图标作为折线拐点
                name: '折线图',
                type: "line",
                data: data1,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        color: '#0696f9',
                    }
                },
                lineStyle: {
                    color: '#0696f9',
                    width: 4
                }
            },
            {
                // 移动光点：用 lines + effect 实现滑行动画
                name: '滑行的光点',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                symbolSize: 30,
                polyline: true,
                effect: {
                    show: true,
                    trailLength: 0.3,
                    symbol: "arrow",
                    period: 8, // 光点滑动速度（秒）
                    symbolSize: 150,
                    symbol: img[0] // 用第一个图标作为移动光点
                },
                lineStyle: {
                    normal: {
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: data
            }
        ],
    };

完整示例代码