箭头动态效果-CSDN博客

本文链接：https://blog.csdn.net/qidaorenzhe/article/details/106128274

本文介绍如何使用ECharts在网页中创建动态箭头效果，通过设置箭头符号、颜色及动态移动参数，实现数据间的连接展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

箭头是可以动的

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>业务归档拓扑</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var nodes = [
	{
        x: '0',
        y: '12',
        name: 'A端网点名称',
        img: '3.png'
    },
	{
        x: '4',
        y: '12',
        name: '设备名称1',
        img: '4.png'
    },
    {
        x: '8',
        y: '12',
        name: '光交名称1',
        img: '4.png'
    },
    {
        x: '12',
        y: '12',
        name: '光交名称2',
        img: '4.png'
    },
    {
        x: '12',
        y: '6',
        name: '设备名称2',
        img: '4.png'
    },
    {
        x: '8',
        y: '6',
        name: 'UNT网络',
        img: '4.png'
    },
    {
        x: '4',
        y: '6',
        name: '设备名称3',
        img: '4.png'
    },
    {
        x: '0',
        y: '6',
        name: '光交名称3',
        img: '4.png'
    },
    {
        x: '0',
        y: '0',
        name: '光交名称4',
        img: '4.png'
    },
    {
        x: '4',
        y: '0',
        name: '设备名称4',
        img: '4.png'
    },
    {
        x: '8',
        y: '0',
        name: 'Z端网点名称',
        img: '4.png'
    }
]
var links = [
    {
        source: 'A端网点名称',
        target: '设备名称1'
    },
	{
        source: '设备名称1',
        target: '光交名称1'
    },
    {
        source: '光交名称1',
        target: '光交名称2'
    },
    {
        source: '光交名称2',
        target: '设备名称2'
    },
    {
        source: '设备名称2',
        target: 'UNT网络'
    },
    {
        source: 'UNT网络',
        target: '设备名称3'
    },
    {
        source: '设备名称3',
        target: '光交名称3'
    },
    {
        source: '光交名称3',
        target: '光交名称4'
    },
    {
        source: '光交名称4',
        target: '设备名称4'
    },
    {
        source: '设备名称4',
        target: 'Z端网点名称'
    }
]
var charts = {
    nodes: [],
    links: [],
    linesData: []
}
var dataMap = new Map()
for (var j = 0; j < nodes.length; j++) {
    var x = parseInt(nodes[j].x)
    var y = parseInt(nodes[j].y)
    var node = {
        name: nodes[j].name,
        value: [x, y],
        symbolSize: 50,
        symbol: 'image:///Users/huhub/Desktop/tuopudemo/img/' + nodes[j].img,
		//symbol: 'image://img/' + nodes[j].img,
        itemStyle: {
            normal: {
                color: '#12b5d0',
            }
        }
    }
    dataMap.set(nodes[j].name, [x, y])
    charts.nodes.push(node)
}
for (var i = 0; i < links.length; i++) {
    var link = {
        source: links[i].source,
        target: links[i].target,
        label: {
            normal: {
                show: false
            }
        },
        lineStyle: {
            normal: {
                color: '#00FFFF'
            }
        }
    }
    charts.links.push(link)
    // 组装动态移动的效果数据
    var lines = [{
        coord: dataMap.get(links[i].source)
    }, {
        coord: dataMap.get(links[i].target)
    }]
    charts.linesData.push(lines)
}
option = {
    title: {
        text: '',
        textStyle: {
            fontWeight: 'normal',
            color: "#00FFFF",
        }
    },
    backgroundColor: "#1b2735",
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: {
        show: false,
        type: 'value'
    },
    series: [{
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: 50,
        label: {
            normal: {
                show: true,
                position: 'bottom',
                color: '#00FFFF'
            }
        },
        lineStyle: {
            normal: {
                width: 2,
                shadowColor: 'none'
            }
        },
        edgeSymbolSize: 8,
        data: charts.nodes,
        links: charts.links,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    formatter: function(item) {
                        return item.data.name
                    }
                }
            }
        }
    }, {
        name: 'A',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        effect: {
            show: true,
            trailLength: 0,
            symbol: 'arrow',
            color: '#00FFFF',
            symbolSize: 8
        },
        data: charts.linesData
    }]
};
myChart.setOption(option)
</script>
</body>
</html>

图片可以自定义