echars的简单使用
- 引入js文件
- 编辑格式
<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'
},
backgroundColor: '#fafafa', //背景颜色
//color: nodesColor, 这一条添加上数据错误
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, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol : ['arrow', 'arrow'],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：['circle', 'arrow']
edgeSymbolSize : '10',//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
cursor:'none', //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
linkSymbol:'arrow',
minRadius: 15,
gravity: 1.1,
scaling: 1.6,
draggable: true, //节点是否可以被拖拽
maxRadius: 25,
steps: 10,
coolDown: 0.9,
ribbonType: false,
hoverAnimation:true, //是否开启鼠标 hover 节点的提示动画效果。
nodeScaleRatio:0.1, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
focusNodeAdjacency:true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
symbol:'circle', //关系图节点标记的图形。包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
//symbolSize:100, //关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
//symbolOffset:[0, '50%'],//关系图节点标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。
//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 emphasis 状态。
label: {
show: true,//是否显示标签。
//position:'inside',//标签的位置,'top''left''right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom'等
//distance:5, //距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
//color:'auto',
textStyle: { //标签的字体样式
color : '#333', //字体颜色
fontStyle: 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
fontWeight: 'normal',//文字字体的粗细,'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
fontFamily: '宋体', //文字的字体系列,还可以是 'sans-serif','serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: '15', //字体大小
align:'center', //文字水平对齐方式，默认自动。'left','center','right','auto'
verticalAlign:'middle', //文字垂直对齐方式，默认自动。top,middle,bottom
//lineHeight:'',//行高
//backgroundColor:'#123234', //文字块背景色。
//borderColor:'auto', //文字块边框颜色。
//borderWidth:'', //文字块边框宽度。
//borderRadius:'', //文字边框的圆角
//padding:'', //文字块的内边距。例如：padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。padding: 4：表示 padding: [4, 4, 4, 4]。
},
//回调函数，你期望节点标签上显示什么
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）的时候不建议关闭，布局过程会造成浏览器假死。
initLayout:'circular', //进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。可以选择使用环形布局 'circular'。
},
//节点图形样式。
itemStyle: {
//每个节点的颜色即为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];
},
//borderColor:'#000', //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
//borderWidth:0 //描边线宽。为 0 时无描边。
//borderType:'dotted', //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
},
//关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
lineStyle: {
// color: { //图形的颜色。 默认从全局调色盘 option.color 获取颜色
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0, color: 'red' // 0% 处的颜色
// }, {
// offset: 1, color: 'blue' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// },
width:2, //线宽。
type:'solid', //线的类型。'solid','dashed','dotted','curve'
},
//鼠标悬停时,高亮的图形样式
emphasis: {
itemStyle : {
//color:'', //图形的颜色。
//borderColor:'', //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
//borderWidth :'', //描边线宽。为 0 时无描边
//opacity :1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
},
lineStyle : {
color :'red', //线的颜色。
width :2, //线宽
type :'solid', //线的类型。solid,dashed,dotted
},
label :{
show :true, //是否展示标签
//position :'',//标签的位置,'top''left''right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom'等
//下面的标签和label标签内容一致,参考就行
},
edgeLabel :{
show :false, //是否展示
//position: //标签位置,省略...
//下面又是一堆一样的
}
},
}
]
};
myChart.on('click', function (params){
alert(params.data.name);
var THEME_WORD = params.data.name;
top.location.href="${path}/know/graph?THEME_WORD=" + THEME_WORD;
});
myChart.setOption(option);
script>
body>
html>