master

分支 (1)

管理

管理

master

leaflet-book
/
echart graph.html

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;


    var graph = [];
    var categories = [];
    for (var i = 0; i < 9; i++) {
        categories[i] = {
            name: '类目' + i
        };
    }

    console.log(graph);

    graph = {
        nodes: [
            {
                attributes: {
                    modularity_class: 1
                },
                category: 0,
                id: "0",
                itemStyle: null,
                label: {
                    normal: {
                        show: false
                    }
                },
                name: "Myriel",
                symbolSize: 19.12381,
                value: 28.685715,
            },
            {
                attributes: {
                    modularity_class: 1
                },
                category: 0,//图例
                id: "1",
                itemStyle: null,
                label: {
                    normal: {
                        show: false
                    }
                },
                name: "Myriel",
                symbolSize: 19.12381,
                value: 28.685715,
//                x: -266.82776,
//                y: 399.6904 //位置一定要动
            },
            {
                attributes: {
                    modularity_class: 1
                },
                category: 0,//图例
                id: "2",
                itemStyle: null,
                label: {
                    normal: {
                        show: false
                    }
                },
                name: "Myriel",
                symbolSize: 19.12381,
                value: 28.685715,
//                x: -266.82776,
//                y: 399.6904 //位置一定要动
            }
        ],
        links: [
            {
                id: "0",
                lineStyle: {normal: {}},
                name: null,
                source: "1",
                target: "0",
            },
            {
                id: "1",
                lineStyle: {normal: {}},
                name: null,
                source: "1",
                target: "2",
            }

        ]
    };

    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: '',
                type: 'graph',
                layout: 'force', //力图生效
                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
                    }
                },
                force: {
                    repulsion: 2500,
                    edgeLength: [10, 50]
                },
                draggable: true,
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>
</html>