echars的简单使用

由于业务需要使用到echars的插件,自己又不是专业前端,之前没有使用过该插件,所以去官网大概看了一下,echars是一个非常强大的视图插件样式繁多,使用方便灵活,我也去百度浏览了一下一些该插件的使用方法,总结一下,留着以后作为参考,若有哪里写的不对,欢迎指正
点击进入echars官网地址
该示例需要使用的js
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/echarts.js"></script>
    <title></title>
</head>
<body>
<div id="main" style="width: 100%;height:460px;overflow: hidden;margin: 0;"></div>
<script>
    var myChart = echarts.init(document.getElementById('main'));
	//myChart.on('myChart',myChart);
    var graph = {
		"nodes":[
			{"wordId":150249,"name":"组织相容性试验","value":7},
			{"wordId":150253,"name":"血型鉴定和交叉配血","value":9},
			{"wordId":150251,"name":"混合淋巴细胞培养试验","value":4},
			{"wordId":150252,"name":"血型","value":1},
			{"wordId":150250,"name":"免疫学试验","value":8},
			{"wordId":150248,"name":"血液交叉配血","value":4}
		],
		"links":[
			{"name":"下位词","source":"组织相容性试验","target":"血液交叉配血"},
			{"name":"上位词","source":"组织相容性试验","target":"免疫学试验"},
			{"name":"下位词","source":"组织相容性试验","target":"混合淋巴细胞培养试验"},
			{"name":"下位词","source":"组织相容性试验","target":"血型"},
			{"name":"下位词","source":"组织相容性试验","target":"血型鉴定和交叉配血"},
			{"name":"上位词","source":"血液交叉配血","target":"组织相容性试验"},
			{"name":"下位词","source":"免疫学试验","target":"组织相容性试验"},
			{"name":"上位词","source":"混合淋巴细胞培养试验","target":"组织相容性试验"},
			{"name":"上位词","source":"血型","target":"组织相容性试验"},{
			"name":"上位词","source":"血型鉴定和交叉配血","target":"组织相容性试验"}
		]
	}

    graph.nodes.forEach(function (node) {
        node.itemStyle = null;
        node.symbolSize = 40;	//圆圈大小
        node.value = node.label;
        // Use random x, y
        node.x = node.y = null;
        node.draggable = true;//指示节点是否可以拖动
    });
    option = {
        title: {
            text: '知识图谱',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {
			formatter: function (x) {
				return x.data.name;//设置提示框的内容和格式 节点和边都显示name属性
			}
		},
        animation: true,
		series : [
            {
                name: 'Les Miserables',
                type: 'graph',
                layout: 'force',
                data: graph.nodes,
                links: graph.links,
                roam: 'true',	//是否开启鼠标缩放和平移漫游
				lineStyle: {            // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。  
					normal: {
						color: '0066cc',      // 线的颜色[ default: '#aaa' ] 
						width: '2',              // 线宽[ default: 1 ] 
						type: 'solid',         // 线的类型[ default: solid ]   'dashed'    'dotted'
						opacity: '0.5',          // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ] 
						curveness: '0',        // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
					},
				},
                label: {
                    normal: {
                        show: true,//显示
                        //position: '',//相对于节点标签的位置
                        textStyle: { //标签的字体样式
                            color : '#000000', //字体颜色
                            fontStyle: 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                            fontWeight: 'normal',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                            fontFamily: '宋体', //文字的字体系列
                            fontSize: '15', //字体大小
                        },
                        //回调函数，你期望节点标签上显示什么
                        formatter: function (params) {
                            if (params.data.name.length > 6) {
                                return params.data.name.substr(0, 5) + '...';
                            }
                            return params.data.name;
                        }
                    }
                },
                force: {
					edgeLength: 150,//线的长度，这个距离也会受 repulsion，支持设置成数组表达边长的范围
                    repulsion: 600,		//节点之间的斥力因子。值越大则斥力越大
					gravity: 0.1,
					layoutAnimation : true,	//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
				},
				edgeSymbol : [ 'arrow', 'arrow' ],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
				edgeSymbolSize : '10',//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
				legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
				itemStyle: {   
					//通常情况下：
					normal:{  
				　　　　//每个节点的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
						color: function (params){
							<!-- var colorList = ['rgb(164,205,438)','rgb(42,170,727)','rgb(25,46,94)','rgb(195,229,235)']; -->
							var colorList = ['#11EE3D','#FF0000','#ccffff','#B0E2FF','#55AA88','#9955AA',,'#E6941A',,'33ffff'];
							return colorList[params.dataIndex];
						}
					},
					//鼠标悬停时：
					emphasis: {
							shadowBlur: '10',
							shadowOffsetX: 0,	//悬停时截点的颜色,0为何截点重合
							//shadowColor: 'rgba(0, 0, 0, 0.5)'
							shadowColor: '#ffff00',
							position: 'inside'
					},
				},
            }
        ]
    };

	myChart.on('click', function (params){
						alert(params.data.name);
                    	top.location.href="www.baidu.com";             	
       			});
    myChart.setOption(option);
</script>
</body>
</html>	
</script>
实际效果
友情链接
echars配置详解
 echars配置
猜你喜欢
