Echart 关系图使用

下载资源文件

  1. dataTool.min.js
  2. les-miserables.gexf
  3. 其他自行找

Coding


<html>
<head>
    <meta charset='utf-8'>
    <title>EChartstitle>
    
    <script src='echarts.js'>script>
    <script src='dataTool.min.js'>script>
    <script src='../jquery-1.12.4.min.js'>script>
head>
<body>
<div id='main' style='width: 600px;height:400px;'>div>
<script type='text/javascript'>
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();
    $.get('les-miserables.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;
                })
            }],
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series : [
                {
                    name: 'Les Miserables',
                    type: 'graph',
                    layout: 'none',
                    circular: {
                        rotateLabel: true
                    },
                    data: graph.nodes,
                    links: graph.links,
                    categories: categories,
                    roam: true,
                    label: {
                        normal: {
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: 'source',
                            curveness: 0.3
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }, 'xml');
script>
body>
html>

你可能感兴趣的:(EChart)