Echarts拓扑图

最新推荐文章于 2024-03-18 14:46:47 发布
最新推荐文章于 2024-03-18 14:46:47 发布
阅读量2.5k 收藏 9
点赞数 1
文章标签： 前端 echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_Wnnnn/article/details/121908092
版权

效果图:

代码块: 

var nodes = [
  {
    x: 10,
    y: 990,
    nodeName: '秋藤',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 200,
    y: 990,
    nodeName: '台积一',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 10,
    y: 750,
    nodeName: '高旺',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 150,
    y: 800,
    nodeName: '桥林',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 10,
    y: 550,
    nodeName: '研创',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 10,
    y: 350,
    nodeName: '城南河',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 200,
    y: 350,
    nodeName: '山江',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 110,
    y: 150,
    nodeName: '沿泰',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 300,
    y: 500,
    nodeName: '东大',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 500,
    y: 900,
    nodeName: '六合',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 700,
    y: 900,
    nodeName: '熊州',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 900,
    y: 900,
    nodeName: '宁北',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 500,
    y: 550,
    nodeName: '三汊湾',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 700,
    y: 400,
    nodeName: '槽坊',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 700,
    y: 150,
    nodeName: '扬巴',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 800,
    y: 200,
    nodeName: '扬石',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 900,
    y: 550,
    nodeName: '黄巷',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 1000,
    y: 550,
    nodeName: '宁化',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 900,
    y: 300,
    nodeName: '杨石二',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 980,
    y: 300,
    nodeName: '玉带',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 500,
    y: 150,
    nodeName: '汊河',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 400,
    y: 250,
    nodeName: '刚五',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 300,
    y: 200,
    nodeName: '刚三',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 300,
    y: 50,
    nodeName: '盘城',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 500,
    y: -50,
    nodeName: '桃花',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  },
  {
    x: 650,
    y: -50,
    nodeName: '南热',
    svgPath: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z',
    symbolSize: 20
  }
];
var charts = {
  nodes: [],
  linesData: [
    {
      coords: [
        //秋藤 -> 台积一
        [10, 1000],
        [200, 1000]
      ],
      label: {
            normal: {
                show: true,
                formatter: '1212',
                color: '#ed46a2',
                fontSize: 12,
                fontWeight: 'normal'
            }
        },
    },
    {
      coords: [
        //秋藤 -> 桥林
        [10, 970],
        [80, 970],
        [80, 800],
        [150, 800]
      ]
    },
    {
      coords: [
        //秋藤 -> 高旺
        [10, 1000],
        [10, 750]
      ]
    },
    {
      coords: [
        //高旺 -> 研创
        [10, 750],
        [10, 550]
      ]
    },
    {
      coords: [
        //研创 -> 城南河
        [10, 550],
        [10, 350]
      ]
    },
    {
      coords: [
        //城南河 -> 山江
        [10, 350],
        [200, 350]
      ]
    },
    {
      coords: [
        //山江 -> 沿泰
        [193, 350],
        [192, 150],
        [110, 150]
      ]
    },
    {
      coords: [
        //沿泰 -> 桃花
        [110, 150],
        [110, -60],
        [500, -60]
      ]
    },
    {
      coords: [
        //山江 -> 桃花
        [205, 350],
        [205, -40],
        [500, -40]
      ]
    },
    {
      coords: [
        //山江 -> 东大
        [200, 360],
        [395, 360],
        [395, 490],
        [300, 490]
      ]
    },
    {
      coords: [
        //山江 -> 三汊湾
        [200, 340],
        [405, 340],
        [405, 540],
        [500, 540]
      ]
    },
    {
      //三汊湾 -> 六合
      coords: [
        [500, 550],
        [500, 900]
      ]
    },
    {
      //三汊湾 -> 槽坊
      coords: [
        [500, 540],
        [695, 540],
        [695, 400]
      ]
    },
    {
      //三汊湾 -> 东大
      coords: [
        [500, 560],
        [395, 560],
        [395, 515],
        [300, 515]
      ]
    },
    {
      //六合 -> 熊州
      coords: [
        [500, 900],
        [700, 900]
      ]
    },
    {
      //熊州 -> 宁北
      coords: [
        [700, 900],
        [900, 900]
      ]
    },
    {
      //宁北 -> 黄巷
      coords: [
        [900, 900],
        [900, 550]
      ]
    },
    {
      //黄巷 -> 宁化
      coords: [
        [900, 550],
        [1000, 550]
      ]
    },
    {
      //黄巷 -> 槽坊
      coords: [
        [900, 540],
        [705, 540],
        [705, 400]
      ]
    },
    {
      //黄巷 -> 杨石二
      coords: [
        [900, 550],
        [900, 300]
      ]
    },
    {
      //黄巷 -> 玉带
      coords: [
        [900, 550],
        [980, 300]
      ]
    },
    {
      //三汊湾 -> 黄巷
      coords: [
        [500, 560],
        [900, 560]
      ]
    },
    {
      //三汊湾 -> 汊河
      coords: [
        [500, 550],
        [500, 150]
      ]
    },
    {
      //糟坊 -> 扬巴
      coords: [
        [700, 400],
        [700, 150]
      ]
    },
    {
      //糟坊 -> 汊河
      coords: [
        [700, 400],
        [600, 400],
        [600, 150],
        [500, 150]
      ]
    },
    {
      //糟坊 -> 扬石
      coords: [
        [700, 400],
        [800, 400],
        [800, 200]
      ]
    },
    {
      //汊河 -> 桃花
      coords: [
        [500, 150],
        [500, -50]
      ]
    },
    {
      //汊河 -> 刚五
      coords: [
        [500, 160],
        [400, 160],
        [400, 250]
      ]
    },
    {
      //汊河 -> 盘城
      coords: [
        [500, 140],
        [400, 140],
        [400, 50],
        [300, 50]
      ]
    },
    {
      //盘城 -> 刚三
      coords: [
        [300, 50],
        [300, 200]
      ]
    },
    {
      //桃花 -> 南热
      coords: [
        [500, -50],
        [650, -50]
      ]
    }
  ]
};
for (var j = 0; j < nodes.length; j++) {
  const { x, y, nodeName, svgPath, symbolSize } = nodes[j];
  var node = {
    nodeName,
    value: [x, y],
    symbolSize: symbolSize || 50,
    symbol: 'path://' + svgPath,
    itemStyle: {
      color: 'orange'
    }
  };
  charts.nodes.push(node);
}
option = {
  backgroundColor: '#090E45',
  grid: {
    left: '3%',
    top: '3%',
    right: '3%'
  },
  xAxis: {
    min: 0,
    max: 1000,
    show: false,
    type: 'value'
  },
  yAxis: {
    min: -70,
    max: 1020,
    show: false,
    type: 'value'
  },
  series: [
    {
      type: 'graph',
      coordinateSystem: 'cartesian2d',
      label: {
        show: true,
        position: 'bottom',
        color: 'orange',
        formatter: function (item) {
          return item.data.nodeName;
        }
      },
      data: charts.nodes
    },
    {
      type: 'lines',
      polyline: true,
      coordinateSystem: 'cartesian2d',
      lineStyle: {
        type: 'solid',
        width: 1,
        color: '#175064',
        curveness: 1,
        shadowBlur:1, //阴影
        shadowColor:"#9AEFFF",
        // shadowOffsetX:10,
        // shadowOffsetY:10
      },
      effect: {
        show: true,
        trailLength: 0.1,
        symbol: 'rect', //线特效的配置
        color: 'orange',
        symbolSize: [3,9]
      },
      data: charts.linesData
    }
  ]
};

hw成长记录
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts升级版关系图，网络拓扑图，资源关系图，可添加，搜索（支持高亮显示），排序，删除
11-19
echarts升级版关系图，网络拓扑图，资源关系图，可添加，搜索（支持高亮显示），排序，删除
使用echarts画设备拓扑图
知无涯
03-26 1万+
开发需求背景 今天领导派了一个小活，要求我将公司的物联网平台的网络拓扑图画出来。做一个数据展示的页面，集成到现有的iot平台上。 说到拓扑图，大家都也都比较清楚，能够清晰地表示网络链路的链接关系。 官方一点的解释是： 网络拓扑结构是指用传输媒体互连各种设备的物理布局（将参与LAN工作的各种设备用媒体互连在一起有多种方法，但是实际上只有几种方式能适合LAN的工作）。 网络拓扑图是指由网络节点设备和通信介质构成的网络结构图。 一般的拓扑图都是这样子的 还有这一种 这些设计图都是架构师使用软件画出来的，数据都
使用echart绘制拓扑图，树类型，自定义tooltip和label样式，可收缩
最新发布
weixin_43896125的博客
03-18 513
完整代码引用即可
echarts实现拓扑图，点击按钮放大缩小
Phoebe_helloworld的博客
08-04 2976
echarts实现拓扑图，鼠标滚轮放大缩小，漫游平移，点击外部按钮放大缩小。
echarts Graph+lines 拓扑图（直角坐标系版）
qq_40295815的博客
03-04 3090
const targetCoord = [1000, 140] const curveness = 0.2 const linesData = [] const categories = [{ name: '流入中', itemStyle: { normal: { color: new echarts.graphic.LinearGradi...
echarts拓扑图(graph，力导向布局图)
weixin_30835923的博客
06-14 991
echarts连接：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 讲解：https://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html 代码： jsp： <script type="text/javascript" src="http://...
使用echarts制作拓扑图
热门推荐
林雨静
01-24 3万+
使用echarts制作拓扑图1.首先是设置option，设置基本属性。this.option = { title: { text: '', }, tooltip:{}, // animationDurationUpdate: 10, // anim
使用Echarts实现拓扑结构(graph)
抛物线的博客
10-14 6558
使用echarts实现集群拓扑结构，支持动态拉伸缩小
vue项目中实际构建echarts拓扑关系图业务
SHALLNY
11-15 8199
由于现在echarts的利用率增强，需要用到拓扑图的设计，如果单纯针对echarts文档来看，虽然可以利用API详细了解到功能点，但具体的实际运用与开发场景经验案例还是略有欠缺，下面将针对echarts关系拓扑图进行实例讲解。关系拓扑图，顾名思义，是有具体的关系存在的点，具有向量指向特点。那么就要求数据具备和的属性。思路是这样的，首先描绘物体（关系点），再者是描绘连接关系点的连线。 简单效果图如上图，共4层类型，同一层为同一个类型，分别是：运维人员、数据库、应用、用户，连接线为起始到终点的指向关系 2.测
echarts拓扑图一些功能实现
仙途路漫漫其修远兮
03-25 3633
1. 更新echarts数据 2. 给节点添加右键点击事件 3. 字体大小跟着 滚动键 缩放 4. 线路曲度设置的一些建议 5. 线路宽度与颜色的设置 6. 节点背景色修改 7. 力引导布局设置（节点位置随机但美观，可设置节点拖拽） 8. 用vue组件形式添加提示框（echarts 默认不支持vue模板编译） 9. 连接线路设置箭头 10. 设置自定义工具栏 附上一份基础配置......
echartst拓扑图数据传输图.rar
06-12
echartst拓扑图数据传输图 使用说明访问 https://blog.csdn.net/qq_32442967/article/details/91556764
echart拓扑图单节点拖拽.zip
02-09
echart拓扑图单节点拖拽.zip
echart拓扑图单节点拖拽互不影响demo
04-22
该资源是一个echart拓扑图节点拖拽互不影响，位置可自己设置保存在后端。是放在vue文件中测试的，拖拽效果不是太好，但还是能用的
echartst拓扑图.rar
06-12
echarts网络拓扑图数据传输图 详细使用说明： https://blog.csdn.net/qq_32442967
echarts书写拓扑图
c_qianxia5040的博客
08-30 692
效果图 用了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>
Echarts 画关系拓扑图，并带移动迁移特效，基于vue
c_qianxia5040的博客
08-30 2896
效果图如下: 1.安装 Echarts： npm install echarts --save 2.注意：由于关系拓扑图在 echarts配置中 类型 type 是 ‘graph’，其中连接线条是不带有 迁移（effect）特效的 需要配合 type：‘lines’ 同时使用，'lines’是带有 迁移（effect）特效的 vue完整代码如下（内有释义） <template> <div class="echart-block"> <div style="h
【记录】echarts 拓扑图
陈铭杰的博客
04-26 918
【代码】【记录】echarts 拓扑图。
echarts拓扑图
sinat_28761919的博客
07-02 6131
前台代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <link rel="stylesheet"href="../../framework/css/stationTopology.c...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值