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

来源：互联网发布：淘宝卖家怎样发布宝贝编辑：程序博客网时间：2024/04/30 19:19

制作这份图的前提之下，先做了一份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>

阅读全文

0 0