ECharts-关系图悲惨世界（HTML版）

时间：2023-04-02 13:50:26 HTML

在运行悲惨世界例子的时候，出现了很多问题。以下是需要注意的两点1.工具包的介绍。这里需要三个工具包，echarts、jquery、dataTool。前两个可以直接通过CDN导入，dataTool可以从github上复制过来自己新建一个。dataTool.min.js下载地址：(https://github.com/apache/incubator-echarts/blob/master/dist/extension/dataTool.min.js)第二，les_miserables.gexf数据文件。由于官方示例中的les_miserables.gexf文件与我们本地机器不在同一台服务器上，所以这里涉及到跨域访问问题。这里我们只是下载它并在Ajax.get()中修改url。下载地址可以直接在他的网站源码中找到。（当然也可以用JSONP来请求。)下载地址：https://www.echartsjs.com/examples/data/asset/data/les-miserables.gexf$.get('url',function(xml)//url附在les_miserables的文件路径下.gexf代码：悲惨世界

//根据准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));varoption;myChart.showLoadi吴（）;$.get('les_miserables.gexf',function(xml){//读取本地文件console.log('读取到数据文件')myChart.hideLoading();vargraph=echarts.dataTool.gexf.parse(xml);varcategories=[];for(vari=0;i<9;i++){categories[i]={name:'category'+i};}graph.nodes.forEach(function(node){节点。itemStyle=null；node.value=node.symbolSize；node.symbolSize/=1.5；node.label={正常：{显示：node.symbolSize>30}};node.category=node.attributes.modularity_class;});option={title:{text:'LesMiserables',subtext:'Defaultlayout',top:'bottom',left:'right'},tooltip:{},legend:[{//selectedMode:'single',数据：categories.map(function(a){returna.name;})}],animationDuration:1500,animationEasingUpdate:'quinticInOut',series:[{name:'LesMiserables',type:'graph',layout:'none',data:graph.nodes,links:graph.links,categories:categories,roam:true,focusNodeAdjacency:true,itemStyle:{正常：{borderColor:'#fff',borderWidth:1,shadowBlur:10,shadowColor:'rgba(0,0,0,0.3)'}},label:{position:'right',formatter:'{b}'},lineStyle:{color:'source',curveness:0.3},emphasis:{lineStyle:{width:10}}}]};myChart.setOption(选项);},'xml');

上一篇：GoodProgrammerWeb前端教程分享JavaScript开发技巧

下一篇：前端工程师需要掌握哪些技能？

ECharts-关系图悲惨世界（HTML版）相关文章