echarts网状图

原创 448894534 随笔 JavaScript 424阅读 2017-11-06 17:15:28 举报

<!DOCTYPE html>
<html style="height: 100%" lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../../public/stylesheets/easyui.css">
<link rel="stylesheet" type="text/css" href="../../public/stylesheets/jquery-ui.min.css">
<style>

</style>

</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 80%"></div>
<script type="text/javascript" src="../../public/js/jquery.min.js"></script>
<script type="text/javascript" src="../../public/js/echarts.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
myChart.showLoading();
// $.get('data/asset/data/webkit-dep.json', function (webkitDep) {
var webkitDep = {
"type": "force",
"categories": [
{
"name": "需求",
"keyword": {},
"base": "需求"
},
{
"name": "设计",
"keyword": {},
"base": "设计"
},
{
"name": "实现",
"keyword": {},
"base": "实现"
},
{
"name": "机构",
"keyword": {},
"base": "机构"
}
// {
// "name": "Other",
// "keyword": {}
// }
],
"nodes": [
{
"name": "需求",
"value": 60,
"category": 0,
"id":0
},
{
"name": "设计",
"value": 50,
"category": 1,
"id":1
},
{
"name": "实现",
"value": 40,
"category":2,
"id":2
},
{
"name": "机构",
"value": 30,
"category":3,
"id":3
},
{
"name": "机构",
"value": 30,
"category":3,
"id":4
}
],
"links": [
{
"source": 0,
"target": 1
},
{
"source": 1,
"target": 2
},
{
"source": 1,
"target": 4
},
{
"source": 1,
"target": 3
},
{
"source": 2,
"target": 3
},
{
"source": 0,
"target": 3
}
]
}
myChart.hideLoading();
option = {
legend: {
// x: 'left',
y:'bottom',
data: ['需求', '设计', '实现', '机构']
},
tooltip : {
trigger: 'item',
// formatter: '服务名称:{b}, 版本号:{c}',
formatter: function(params){//触发之后返回的参数,这个函数是关键
if (params.data.value != undefined) {//如果触发节点
return '服务名称:'+params.data.name + ' 版本号:'+params.data.value;//返回标签
}else {//如果触发边
// return '关系:'+ params.data.label;
}
}
},

    series: [{
        type: 'graph',
        layout: 'force',
        hoverAnimation : true,//是否开启鼠标悬停节点的显示动画
        coordinateSystem : null,//坐标系可选
        xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
        yAxisIndex : 0, //y轴坐标
        roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
        nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例,当设为0时节点不随着鼠标的缩放而缩放
        draggable : true,//节点是否可拖拽,只在使用力引导布局的时候有用。
        focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
        size:400,
        animation: false,

// itemStyle : {
// label: {
// normal: {
// show:false
//// position: 'right',
//// formatter: '服务名称:{b}, 版本号:{c}'
// }
// }
// },
itemStyle : {//===============图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
normal : { //默认样式
label : {
show : false
},
// borderType : 'solid', //图形描边类型,默认为实线,支持 'solid'(实线), 'dashed'(虚线), 'dotted'(点线)。
// borderColor : 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4
// borderWidth : 2, //图形的描边线宽。为 0 时无描边。
opacity : 1
// 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5

            },
            emphasis : {//高亮状态
                label : {
                    show : true,
                    formatter: function(params){
                        return params.data.name;
                    }
                },
                borderType : 'solid', //图形描边类型,默认为实线,支持 'solid'(实线), 'dashed'(虚线), 'dotted'(点线)。
                borderColor : 'rgba(255,215,0,0.6)', //设置图形边框为淡金色,透明度为0.4
                borderWidth : 2, //图形的描边线宽。为 0 时无描边。
                opacity : 1
                // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5
            }
        },
        // 关系边的公用线条样式
        lineStyle: {
            normal: {
                show : true,
                width : '1',
                color: 'target',//决定边的颜色是与起点相同还是与终点相同
                curveness: 0//边的曲度,支持从 0 到 1 的值,值越大曲度越大。

            },
            emphasis : {//高亮状态
                show : true,
                width : '3',
                color: '#232323',//决定边的颜色是与起点相同还是与终点相同
                curveness: 0//边的曲度,支持从 0 到 1 的值,值越大曲度越大。
            }
        },
        data: webkitDep.nodes.map(function (node, idx) {
            node.id = idx;
            return node;
        }),
        categories: webkitDep.categories,
        force: {
            initLayout: 'circular',
            //initLayout: ,//力引导的初始化布局,默认使用xy轴的标点
            repulsion : 300,//节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
            gravity : 0.2,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
            edgeLength :105,//边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
            layoutAnimation : true
            //因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。
        },
        //symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'(矩形), 'roundRect'(圆角矩形), 'triangle'(三角形), 'diamond'(菱形), 'pin'(大头针), 'arrow'(箭头)  也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
        edges: webkitDep.links
    }]
};
webkitDep.nodes.forEach(function (node) {
    node.itemStyle = null;//
    node.symbolSize = node.value;//强制指定节点的大小
    // Use random x, y

// node.x = node.y = null;
node.draggable = true;

});
myChart.setOption(option);
function openOrFold(params) {  //该事件会提示节点间关系
    var str = appendPath(params);
    document.getElementById("main_1").innerHTML = str;
    return str;
}
myChart.on('click', function (params) {
    console.log(params);
    webkitDep.nodes.forEach(function (node) {
        if(params.data.id == node.id){

// node.symbolSize = 200;//强制指定节点的大小
// node.symbol ='rect';
node.symbol ='image://../../public/images/icon_user.png';
node.edgeSymbol= 'arrow';
}
});
myChart.setOption(option);
});

// myChart.on('mouseover', function (params) {
//// appendPath(params);
// console.log(params);
//// $("#over_circular").show();
// var x = params.event.offsetX;
// var y = params.event.offsetY + 30;
// $("#over_circular").css("left",x);
// $(".sign").hide();
//
// webkitDep.nodes.forEach(function (node) {
// if(params.data.id == node.id){
// node.symbolSize = 100;//强制指定节点的大小
//// node.symbol ='rect';
// node.focusNodeAdjacency = true;
//// node.symbol ='image://../../public/images/icon_user.png';
//// node.edgeSymbol= 'arrow';
// }
// });
// myChart.setOption(option);
//
// });

function appendPath(params){    //拼接节点关系并显示在左下角,
    var option = myChart.getOption();
    var series = option.series[params.seriesIndex]; //获取图表
    var nodesOption = series.data;//获取所有数据
    var links= series.links;//获取所有连线
    if(params.dataType=="node"){ //dataType可以是edge(线条)或node(数据)
        var id=params.data.id;
        var categoryName = series.categories[params.data.category].name;//获取当前节点的图例名称

// alert(id)
var str=categoryName+":"+nodesOption[id].name;
var i = 0;
var map = {};
// for( i = 0 ; i < links.length; i++){
// map[links[i].source] = links[i].target;
// }

        while(true){
            if(map[id] == undefined){
                break;
            }
            //获取父节点的图例名称并连接
            str =series.categories[nodesOption[map[id]].category].name+":"+nodesOption[map[id]].name+"->" + str;
            id = map[id] ;
        }
        return str;
    }else if(params.dataType=="edge"){ //当鼠标停留在连线上时,暂不处理
        return "";
    }
    function openOrFold(params) {  //该事件会提示节点间关系
        var str = appendPath(params);
        document.getElementById("container").innerHTML = str;
        return str;
    }
    myChart.on('mouseover', openOrFold);
}
//    });

</script>
</body>
</html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复