echarts simple graph上下级关系图

本文介绍了如何使用Echarts将现有功能图修改为清晰展示上下级关系的图表。在实现过程中,需要注意数据去重以避免错误,并可以通过设置符号为图片来美化图表。
摘要由CSDN通过智能技术生成

1、需求:
现有功能不够清晰展示关系,修改为上下级关系,现有功能图如下:
在这里插入图片描述
修改后功能图如下:
在这里插入图片描述
2、话不多说上代码

 gxt(src,dst,attacks){
   
            if(src.length<=1){
   
                this.domWidth = "20%"
            }
            if(src.length>1){
   
                this.domWidth = "100%"
            }
                let dom = document.getElementById('mychats');
                let domW = dom.clientWidth;
                let myCharts = echarts.init(document.getElementById('mychats'));
                //源ip数据格式
                var nodes = [{
   
                    y: '700',
                    name: '服务器AA',
                },
                {
   
                    y: '700',
                    name: '服务器Aa',
                },
                {
   
                    y: '700',
                    name: '服务器Ad',
                }
            ]
            //目的ip数据格式
            var nodess = [{
   
                    y: '100',
                    name: '服务器Ab',
                },
                {
   
                    y: '100',
                    name: '服务器Ac',
                },
                {
   
                    y: '100',
                    name: '服务器Ae',
                },
                {
   
                    y: '100',
                    name: '服务器Af&#
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts3 是一款非常强大的 JavaScript 可视化库,可以用于绘制各种类型的表。其中,Graph 表是 ECharts3 中的一种类型,可以用于绘制拓扑。 Java 与 ECharts3 的集成可以通过 java-echarts3 库来实现,该库提供了 Java 与 ECharts3 的交互接口。下面是一个简单的示例代码,演示了如何使用 java-echarts3 绘制一个简单的拓扑: ```java import com.timeyang.jkes.core.support.ECharts3; import com.timeyang.jkes.core.support.ECharts3.Graph; import com.timeyang.jkes.core.support.ECharts3.Graph.CategoryData; import com.timeyang.jkes.core.support.ECharts3.Graph.GraphData; import com.timeyang.jkes.core.support.ECharts3.Graph.Link; import com.timeyang.jkes.core.support.ECharts3.Graph.Node; import com.timeyang.jkes.core.support.ECharts3.Graph.Option; import java.util.ArrayList; import java.util.List; public class TopologyChart { public static void main(String[] args) { // 创建一个 ECharts3 实例 ECharts3 echarts = new ECharts3(); // 创建一个 Graph 实例 Graph graph = new Graph(); // 设置 Graph 的标题和布局方式 graph.setTitle("Topology Chart"); graph.setLayout("force"); // 创建节点数据 List<Node> nodes = new ArrayList<>(); nodes.add(new Node("node1", "Node 1", "circle", 50)); nodes.add(new Node("node2", "Node 2", "circle", 50)); nodes.add(new Node("node3", "Node 3", "circle", 50)); nodes.add(new Node("node4", "Node 4", "circle", 50)); nodes.add(new Node("node5", "Node 5", "circle", 50)); // 创建分类数据 List<CategoryData> categories = new ArrayList<>(); categories.add(new CategoryData("Category 1")); categories.add(new CategoryData("Category 2")); // 创建边数据 List<Link> links = new ArrayList<>(); links.add(new Link("node1", "node2", 1)); links.add(new Link("node2", "node3", 1)); links.add(new Link("node3", "node4", 1)); links.add(new Link("node4", "node5", 1)); links.add(new Link("node5", "node1", 1)); // 创建 Graph 数据 GraphData data = new GraphData(nodes, categories, links); // 创建 Graph 配置项 Option option = new Option(); option.setSeries(data); // 将 Graph 配置项设置给 ECharts3 实例 echarts.setOption(option); // 输出 ECharts3 实例的 HTML 代码 System.out.println(echarts.toHtml()); } } ``` 运行上述代码,将输出一个包含拓扑的 HTML 页面。你可以使用任何 Web 浏览器打开该页面,查看绘制的拓扑
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值