Echarts关系图

最新推荐文章于 2025-08-14 05:30:00 发布

原创最新推荐文章于 2025-08-14 05:30:00 发布 · 628 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端学习

该博客通过一个示例展示了如何使用Echarts库创建关系图。内容包括加载Echarts和相关依赖库，从外部数据源获取数据，解析数据并设置图表选项，如标题、图例、节点样式和链接样式，最后展示图表。博客使用了Les Miserables的数据集来呈现图的布局和交互效果。

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <title>Echarts关系图解析</title>
   </head>
   <body style="height: 100%; margin: 0">
       <!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
       <div id="container" style="height:900px;"></div>
       <script type="text/javascript" src="js/echarts.js"></script>
       <script type="text/javascript" src="js/jquery.js"></script>
       <script type="text/javascript" src="js/dataTool.js"></script>

       <script type="text/javascript">
           // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);

           myChart.showLoading();
           $.get('data/les-miserables2.gexf', function (xml) {
               myChart.hideLoading();

               var graph = echarts.dataTool.gexf.parse(xml);
               var categories = [];
               for (var i = 0; i < 9; i++) {
                   categories[i] = {
                       name: '类目' + i
                   };
               }
               graph.nodes.forEach(function (node) {
                   node.itemStyle = null;
                   node.value = node.symbolSize;
                   node.symbolSize /= 1.5;
                   node.label = {
                       normal: {
                           show: node.symbolSize > 30
                       }
                   };
                   node.category = node.attributes.modularity_class;
               });
               option = {
                   title: {
                       text: 'Les Miserables',
                       subtext: 'Default layout',
                       top: 'bottom',
                       left: 'right'
                   },
                   tooltip: {},
                   legend: [{
                       // selectedMode: 'single',
                       data: categories.map(function (a) {
                           return a.name;
                       })
                   }],
                   animationDuration: 1500,
                   animationEasingUpdate: 'quinticInOut',
                   series : [
                       {
                           name: 'Les Miserables',
                           type: 'graph',
                           layout: 'none',
                           data: graph.nodes,
                           links: graph.links,
                           categories: categories,
                           roam: true,
                           focusNodeAdjacency: true,
                           itemStyle: {
                               normal: {
                                   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(option);
           }, 'xml');
            </script>
   </body>
</html>

标签

#Echarts