- 项目中用到echarts现在不足为奇,但是关系图(graph)这个东西比常规的饼图,条形图,折线图等等这些都要难搞一些,项目中会有很多需求,
- 比如,A和B之间有多重关系能不能画两条以上的线? 这个问题我遇到过,echarts本身就没有实现两条线以上这个功能,在官网只能找到最多两条线的demo,最后只有想其他办法解决项目需求。
再比如,关系图节点名称的问题,我们一般都是把人员姓名来做显示,那么问题来了,当遇到重名的时候咋办呢?如果按照常规demo上的配置项来做肯定会报错,这也是本篇文章主要要讲的东西,我这里有两种方式来解决这个。
第一种:先贴上代码
- <!DOCTYPE html>
- <html>
- <head>
- <title>graph</title>
- <meta charset="utf-8">
- </head>
- <body>
- <script type="text/javascript" src="echarts.js"></script>
- <div id="main" style="width: 700px;height: 700px"></div>
- <script type="text/javascript">
- var dom = document.getElementById('main');
- var myChart = echarts.init(dom);
- var datas = [{
- name: '节点1',
- itemStyle: {
- normal: {
- color: '#f90', //圆点的颜色
- label: {
- position: 'bottom',
- textStyle: {
- color: '#f90'
- }
- }
- }
- },
- }, {
- name: '节点2',
- category: 1,
- itemStyle: {
- normal: {
- color: '#090',
- },
- emphasis: {
- color: "#000"
- }
- }
- }, {
- name: '节点2',
- category: 1,
- draggable: true,
- }, {
- name: '节点3',
- category: 0,
- draggable: true,
- }, {
- name: '节点5',
- category: 0,
- draggable: true,
- }, {
- name: '节点6',
- category: 0,
- draggable: true,
- }]
- var obj = {};
- for(var i=0;i<datas.length;i++){
- obj[i] = datas[i].name;
- }
- console.log(obj);
- var data = [];
- for(var p in obj){
- data.push({
- name: p,
- showName: obj[p],
- tooltip: {
- show: true,
- formatter: function(params){
- return params.data.showName
- }
- }
- })
- }
- var option = {
- tooltip: {
- show: false
- },
- legend: {
- x: "center",
- data: ["家人", "朋友"]
- },
- animation: false,
- series: [{
- categories: [{
- name: '家人',
- itemStyle: {
- normal: {
- color: "#009800",
- }
- }
- }, {
- name: '朋友',
- itemStyle: {
- normal: {
- color: "#4592FF",
- }
- }
- }],
- type: 'graph',
- layout: 'force',
- symbol: "circle",
- symbolSize: 50,
- roam: true, //禁止用鼠标滚轮缩小放大效果
- edgeSymbol: ['circle', 'arrow'],
- edgeSymbolSize: [0, 10],
- // 连接线上的文字
- focusNodeAdjacency: true, //划过只显示对应关系
- edgeLabel: {
- normal: {
- show: true,
- textStyle: {
- fontSize: 20
- },
- formatter: "{c}"
- }
- },
- lineStyle: {
- normal: {
- opacity: 1,
- width: 2,
- curveness: 0
- }
- },
- // 圆圈内的文字
- label: {
- normal: {
- show: true,
- formatter: function(params){
- return params.data.showName
- }
- }
- },
- force: {
- repulsion: 5000
- },
- data: data,
- links: [{
- source: 0,
- target: 1,
- value: "朋友",
- lineStyle: {
- normal: {
- color: '#38f',
- curveness: 0 // 线的弯曲度 0-1之间 越大则歪曲度更大
- }
- },
- label: {
- normal: {
- textStyle: {
- color: '#07ac72'
- }
- }
- }
- }, {
- source: 0,
- target: 2,
- value: "朋友"
- }, {
- source: 0,
- target: 3,
- value: "家人"
- }, {
- source: 0,
- target: 4,
- value: "家人"
- }, {
- source: 0,
- target: 5,
- value: "家人"
- }, ]
- }]
- };
- myChart.setOption(option);
- </script>
- </body>
- </html>
以上代码运行结果如下图:
都有代码了,自己花点时间去研究下吧,我就不赘述了。
第二种方式:这种方式很简单,就是给datas里面加上一个唯一标识的,而这个字段名必须是''id'',下面也提供一个简单的例子吧。
- option = {
- title: {
- text: 'Graph 简单示例'
- },
- tooltip: {},
- animationDurationUpdate: 1500,
- animationEasingUpdate: 'quinticInOut',
- series : [
- {
- type: 'graph',
- layout: 'none',
- symbolSize: 50,
- roam: true,
- label: {
- normal: {
- show: true
- }
- },
- edgeSymbol: ['circle', 'arrow'],
- edgeSymbolSize: [4, 10],
- edgeLabel: {
- normal: {
- textStyle: {
- fontSize: 20
- }
- }
- },
- data: [{
- name: '节点1',
- id: '120',
- x: 300,
- y: 300
- }, {
- name: '节点2',
- id: '121',
- x: 800,
- y: 300
- }, {
- name: '节点2',
- id: '123',
- x: 550,
- y: 100
- }, {
- name: '节点4',
- id: '124',
- x: 550,
- y: 500
- }],
- // links: [],
- links: [{
- source: '120',
- target: '121',
- symbolSize: [5, 20],
- label: {
- normal: {
- show: true
- }
- },
- lineStyle: {
- normal: {
- width: 5,
- curveness: 0.2
- }
- }
- }, {
- source: '120',
- target: '122',
- label: {
- normal: {
- show: true
- }
- },
- lineStyle: {
- normal: { curveness: 0.2 }
- }
- }, {
- source: '120',
- target: '123'
- }, {
- source: '120',
- target: '124'
- }],
- lineStyle: {
- normal: {
- opacity: 0.9,
- width: 2,
- curveness: 0
- }
- }
- }
- ]
- };
最后效果图如下:
谢谢大家!