echarts书写拓扑图

效果图

用了echart - graph，文档地址：https://echarts.apache.org/zh/option.html#series-graph
完整vue代码如下

<template>
  <div>
    <div :style="{ height: '700px', width: '100%' }" id="Topology"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      data: {
        cellHeight: "300px",
        topoData: [],
        chartData: {},
        detailData: {},
        myChart: null,
        
      },
    };
  },

  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      this.chartData = {
        nodes: [
          {
            symbolSize: 100,
            category: 0,
            name: "桃子",
            alarmShow: 1,
            optStatus: '坏掉',
            adminStatus: 1,
            alarmDetail: {
              critical: 0,
              major: 1,
              minor: 2,
              warning: 1,
            },
            // symbol: "image://" + require('@/assets/logo.png'), //可使用自定义图片
            symbol: "image:iconfont.alicdn.com/t/a81b0d34-ccb1-497c-a3b3-4ac7aa597a70.png"
          },
          {
            symbolSize: 80,
            category: 1,
            name: "牛油果",
            alarmShow: 0,
            optStatus: '新鲜',
            adminStatus: 1,
            alarmDetail: {
              critical: 0,
              major: 1,
              minor: 3,
              warning: 4,
            },
            symbol: "image:iconfont.alicdn.com/t/7a2b46d7-f8bd-4656-bc0b-060f61c3c75f.png"
          },
          {
            symbolSize: 80,
            category: 1,
            name: "西瓜",
            alarmShow: 1,
            optStatus: '临近保质期',
            adminStatus: 1,
            alarmDetail: {
              critical: 1,
              major: 2,
              minor: 1,
              warning: 3,
            },
            symbol: "image:iconfont.alicdn.com/t/a3158f33-08ff-4c76-a6a4-da4e6f3ef534.png"
          },
        ],
        links: [
          { source: 0, target: 1 },
          { source: 0, target: 1 },
        ],
      };
      let chartId = document.getElementById("Topology");
      this.myChart = echarts.init(chartId);
      let categories = [
        {
          name: "桃子",
          type: "桃子",
        },
        {
          name: "MEP",
          type: "MEP",
        },
      ];
      let option = {
        tooltip: {
          show: true,
          trigger: "item",
          triggerOn: "click",
          formatter: (value) => {//插入结构
            var str = "";
            if (value.data.name) {
              var optStatus =
                value.data.optStatus === null ? "-" : value.data.optStatus;
              var adminStatus =
                value.data.adminStatus === null ? "-" : value.data.adminStatus;
              str =
                "<b>" +
                value.data.name +
                "</b><br/>" +
                "运行状态：" +
                optStatus +
                "<br/>" +
                "管理状态：" +
                adminStatus +
                "<br/>";
              if (value.data.alarmShow === 1) {
                str +=
                "<div  style='font-weight:700;color:#F56C6C'></div>告警信息："+
                  "<br/>" +
                  "<span class='dl-dot mr-10' style='color:#F56C6C'></span>严重告警：" +
                  value.data.alarmDetail.critical +
                  "<br/>" +
                  "<span class='dl-dot mr-10' style='color:#E6A23C'></span>主要告警：" +
                  value.data.alarmDetail.major +
                  "<br/>" +
                  "<span class='dl-dot mr-10' style='color:#f4ea2a'></span>次要告警：" +
                  value.data.alarmDetail.minor +
                  "<br/>" +
                  "<span class='dl-dot mr-10' style='color:#409EFF'></span>警告告警：" +
                  value.data.alarmDetail.warning;
              }
            }
            return str;
          },
        },
        legend: {
          show: true,
          left: "0",
          data: [
            {
              name: "桃子",
              type: "桃子",
              icon: "image:iconfont.alicdn.com/t/a81b0d34-ccb1-497c-a3b3-4ac7aa597a70.png",
            },
            {
              name: "MEP",
              type: "MEP",
              icon: "image:iconfont.alicdn.com/t/a81b0d34-ccb1-497c-a3b3-4ac7aa597a70.png",
            },
          ],
          itemHeight: 25,
          itemWidth: 25,
          symbolKeepAspect: true,
        },
        series: [
          {
            type: "graph",
            hoverAnimation: false, // 是否开启鼠标悬停节点的显示动画
            coordinateSystem: null, // 坐标系可选
            xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项
            yAxisIndex: 0, // y轴坐标
            layout: "force", // 图的布局，类型为力导图，'circular' 采用环形布局
            force: {
              repulsion: 1450, // 相距距离
              edgeLength: [150, 360],//连线两个之间的距离
              layoutAnimation: true, // 力引导布局会在多次迭代后才会稳定
            },
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            nodeScaleRatio: 0.6, // 鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
            draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
            focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
            edgeSymbol: ["none", "arrow"], // ["circle", "arrow"] 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
            symbolSize: 35, // 图形大小
            edgeSymbolSize: 10, // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
            lineStyle: {
              color: "rgba(7,102,174,.9)",
              width: "1",
              type: "dashed", // 线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
              curveness: 0, // 线条的曲线程度，从0到1
              opacity: 1,
            },
            label: {
              normal: {
                show: true, // 是否显示标签。
                position: "bottom", // 标签的位置。['50%', '50%'] [x,y]   'inside'
                textStyle: {
                  color: "#f40", // 字体颜色
                  fontStyle: "normal", // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                  fontWeight: "bolder", // 'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                  fontFamily: "sans-serif", // 文字的字体系列
                  fontSize: 12,
                  formatter: "{b}",
                },
              },
              emphasis: {},
            },
            edgeLabel: {
              normal: {
                show: false,
              },
            },
            data: this.chartData.nodes,
            categories: categories,
            links: this.chartData.links,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
</style>

转载于：https://blog.csdn.net/messicr7/article/details/113174193