echarts统计图表与工具关系可视化

最新推荐文章于 2024-04-11 15:29:52 发布

windflyhuang

最新推荐文章于 2024-04-11 15:29:52 发布

阅读量1k

点赞数

分类专栏： Echarts 文章标签： echarts 数据可视化

本文链接：https://blog.csdn.net/u010473077/article/details/73770268

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

制作这份图的前提之下，先做了一份gexf格式的数据，这种格式数据结构就是网状节点，结构中主要分成两部分，一部分是节点（node），包括id，节点位置、颜色渲染、节点种类、节点属性、节点值，另外一部分是edge，包括id，source（源点）、target（目标点）和value（值）。

然后制作图格式数据之后，就可以使用Echarts.JS中进行配置项设置，使用的是setoptions—series—type：”graph”。

访问地址：http://106.14.147.72/Graphtest/graphnetwork.html

效果图：

源码如下

<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="JS/echarts.js"></script>
    <script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="JS/dataTool.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="title" style="height: 6%">
<h2 style="text-align:center">统计图表与工具</h2>
</div>
<div id="container"  style="height: 94%;"></div>
<script>
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    myChart.showLoading();
    $.get('Data/les-miserables.gexf', function (xml) {
        myChart.hideLoading();
        var graph =echarts.dataTool.gexf.parse(xml);
        var categories = [];
        categories[0] = { name: '图表分类' };
        categories[1] = { name: '图表类型' };
	    categories[2] = { name: '图表工具' };
        graph.nodes.forEach(function (node) {
            var attr=[]
            attr.push(node.attributes.text.toString()),
            node.value =attr,
			node.symbol='circle',
            node.label = {
                normal: {
                    show:true,
					position:'inside',
					 textStyle: {
                            'color': 'white',
                            'fontSize': 12,
							'fontWeight':'bold'
                        }
                }
            };
            node.category = node.attributes.modularity_class;
        });
        option = {
            tooltip: {
			show:true,
			},
            legend: [{
                // selectedMode: 'single',
                data: categories.map(function (a) {
                    return a.name;
                })
            }],
			//backgroundColor:'#F5F5DC',
            animationDuration: 1500,
            animationEasingUpdate: 'quinticInOut',
            series : [
                {
                    name: '',
                    type: 'graph',
                    layout: 'none',
                    data: graph.nodes,
                    links: graph.links,
					left:150,
					top:70,
					focusNodeAdjacency: true,
                    categories: categories,
					edgeSymbol: ['circle', 'arrow'],
					edgeSymbolSize: [4, 10],
					label: {
                        normal: {
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    lineStyle: {
                        normal: {
						width:2,
						opacity:0.8,
                    color: '#38f',
                    curveness: Math.random() * 0.3 // 线的弯曲度 0-1之间 越大则歪曲度更大
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);
    }, 'xml');
   if (option && typeof option === "object") {
        var startTime = +new Date();
        myChart.setOption(option, true);
        var endTime = +new Date();
        var updateTime = endTime - startTime;
        console.log("Time used:", updateTime);
    }
	
</script>
</body>
</html>

windflyhuang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts统计图表与工具关系可视化

制作这份图的前提之下，先做了一份gexf格式的数据，这种格式数据结构就是网状节点，结构中主要分成两部分，一部分是节点（node），包括id，节点位置、颜色渲染、节点种类、节点属性、节点值，另外一部分是edge，包括id，source（源点）、target（目标点）和value（值）。然后制作图格式数据之后，就可以使用Echarts.JS中进行配置项设置，使用的是seto
复制链接

扫一扫

专栏目录