vue中echarts书写拓扑图

最新推荐文章于 2026-04-02 09:38:52 发布

原创

最新推荐文章于 2026-04-02 09:38:52 发布 · 9.5k 阅读

在前端项目中，为了创建拓扑图，对比了多种组件如jTopo、Vis.js和D3，最终选择了ECharts的graph系列，因为其交互功能满足需求。虽然ECharts的graph也需要自行实现部分功能，但相比其他选项更为合适。参考文档：https://echarts.apache.org/zh/option.html#series-graph

最近在做拓扑图找了下前端常用的组件：jTopo（感觉有点老）、Vis.js（文档是英文的，不太容易读）、D3（功能强大需要自己实现）、ECharts（同样需要自己实现）

由于图形上的交互并没有需要特别多所以用了echart - graph，文档地址：https://echarts.apache.org/zh/option.html#series-graph

这是展示样子

dom节点

<div :style="{ height: cellHeight, width: '100%' }" id="Topology"></div>

import { ImgIcon } from "@/utils/topoIcon.js"
const echarts = require("echarts")
export default {
    name: "TopologyManage",
    data() {
        return {
            cellHeight: "300px",
            topoData: [],
            chartData: {},
            detailData: {},
            myChart: null,
            alarmColor: {
                Critical: "#F56C6C",
                Major: "#E6A23C",
                Minor: "#f4ea2a",
                Warning: "#409EFF",
                Cleared: "#67C23A"
            },
            mepimg: ImgIcon["icon1"],
            mepmimg: ImgIcon["icon2"],
        }
    }
}

        draw() {
            this.chartData = {
                nodes: [
                    {
                        symbolSize: 40,
                        category: 0,
                        name: "mepm",
                        // --symbol: "image://" + this.img1
                    },
                    {
                        symbolSize: 35,
                        category: 1,
                        name: "123123sdsds",
                        alarmShow: 1,
                        optStatus: 1,
                        adminStatus: 1,
                        adminStatus: 1,
                        alarmDetail: {
                            critical: 1,
                            major: 1,