用Echart可视化有向图

最新推荐文章于 2024-05-18 08:44:25 发布

原创

最新推荐文章于 2024-05-18 08:44:25 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #有向图可视化 #力导向布局图 #有向图

本文分享了使用Echarts库绘制有向图的实践经验，包括HTML、JavaScript代码示例及力导向布局图的Option配置详解，适合初学者快速上手。

尝试学习使用Echart可视化有向图

结果图

直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"></meta>
<script src="http://cdn.bootcss.com/echarts/3.2.2/echarts.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script src="echarts..js"></script>
<script type="text/javascript">

    function draw(){
    
    

        var text1 = $("#links-input").val();
        var text2 = $("#nodes-input").val();
        var data1 = eval(text1);
        var data2 = eval(text2);
        var graph = data2Graph(data1,data2);
        drawGraph(graph);
    }


    function data2Graph(data1,data2) {
    
    
        var graph = {
    
    };
        var links = [];
        var nodes = [];
        for (var i = 0; i < data1.length; i++) {
    
    
            var s = String(data1[i][0]);
            var t = String(data1[i][1]);
            var w = data1[i][2];
            var v1 = data1[i][3];
            links.push({
    
    'source' : s, 'target' : t,  'weight' : v1,'value' : w});
        };
        for (var i = 0; i < data2.length; i++) {
    
    
            var c = data2[i][0];
            var n = String(data2[i][1]);
            var v2 = data2[i][2];
            nodes.push({
    
    'category' : c, 'name' : n, 'value' : v2});
        };
        graph['links'] = links;
        graph['data'] = nodes;
        return graph;

    }


    function drawGraph(graph) {
    
    
        var myChart = echarts.init(document.getElementById("echarts-main"));
        var option = {
    
    
            title : {
    
    
                        text:
                        x:'right',
                        y:'bottom'
                    },


            legend: {
    
    
                        x: 'left',
                        data:['普通点','转移点']
                    },

            toolbox: {
    
    
                        show : true,
                        feature : {
    
    
                            restore : {
    
    show: true},
                            
                            saveAsImage : {
    
    show: true}
                        }
                    },

            tooltip: {
    
    
                triggerOn:'click' ,
                // showDelay: 100
            },
            color:[ '#bda29a', '#c4ccd3','#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            series : [
                {
    
    
                    type: 'graph',
                    layout: 'force',

                    // animationDelay: 300,

                    symbolSize: 10,//如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。
                    edgeSymbol: ['none', 'arrow'],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记
                    edgeSymbolSize: 6,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
                    
                    categories : [
                                {
    
    
                                    name: '普通点',
                                    symbol: 'circle',
                                    
                                },
                                {
    
    
                                    name:'转移点',
                                    symbol: 'pin'
                                }
                    ],


                    data: graph.data,
                    links: graph.links,

                    roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    // draggable:true,//节点是否可拖拽，只在使用力引导布局的时候有用。
                    // focusNodeAdjacency :true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。

                    label: {
    
    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 emphasis 状态。
                        normal: {
    
    
                            show: true,
                            color: 'auto',
                            position: 'top',
                            formatter: function (e) {
    
    
                                return e['data']['value'];
                            }
                        }
                    },

                    edgeLabel: {
    
    
                        normal: {
    
    
                            show: false,
                            // position:'middle',
                            color: 'auto',
                            baseline:'middle',
                            align

最低0.47元/天解锁文章