今天有个画流程图的需求，在echarts官网上看到了一个简单关系图的案例， 链接如下：
https://echarts.apache.org/examples/zh/editor.html?c=graph-simple 这个是个简单的例子，节点是根据坐标来的，在现实的开发中不太容易实现，毕竟找坐标是很麻烦的，根据改进可以用force布局，实现了功能，贴下代码：
initCharts(chartList, linkList) {
let self = this
let myChart = this.echarts.init(this.$refs.echarts)
console.log(this.$refs.chart) // 绘制图表
let option = {
title: {
text: 'echarts-title',
},
tooltip: {
show: true,
backgroundColor: '#FFF',
borderColor: '#C3CBD6',
borderWidth: 1,
axisPointer: { lineStyle: { color: '#C3CBD6' } },
padding: [0, 10],
/*设置x轴左右固定，上下跟随。*/
position: function (point, params, dom, rect, size) {
return [0, point[1]]
},
formatter: function (params, ticket, callback) {
return (
'<span style="color: #657180; display:inline-block; margin-left: 8px; word-wrap: break-word;word-break:break-all;">' +
params.data.telegram +
'</span>'
)
},
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
// layout: 'none',
layout: 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。
hoverAnimation: true, //是否开启鼠标悬停节点的显示动画
coordinateSystem: null, //坐标系可选
xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
yAxisIndex: 0, //y轴坐标
force: {
//力引导图基本配置
//initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
repulsion: 100, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity: 0.02, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: 160, //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
layoutAnimation: false,
//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
},
symbolSize: 50,
roam: true,
label: {
show: true,
},
// id: 0,
// category: 0,
// lineStyle: {
// normal : {
// color : '#31354B',
// width : '1',
// type : 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
// curveness : 0, //线条的曲线程度，从0到1
// opacity : 1
// // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
// },
// emphasis : {//高亮状态
// }
// },
color: ['#66b1ff'],
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20,
},
data: chartList, // 这是动态生成的数据 保证数据里面有id 后面指向用 name 节点内容 有这两个字段即可
links: linkList,
// links: [
// {
// source: 7,
// target: 8,
// name: 'EREIGNIS',
// label: {
// show: true,
// // formatter: '<span style="color: #657180; font-size: 11px">EREGNIS</span>'
// formatter: function (params) {
// //标签内容
// return params.data.name
// },
// },
// },
// {
// source: 7,
// target: 9,
// name: 'BS_UMBUC',
// },
// // {
// // source: 2,
// // target: 4,
// // name: 'file3 ---> file5',
// // label: {
// // show: true,
// // formatter: function (params) {
// // //标签内容
// // return 'hhhhh嘿嘿嘿~~~~~~'
// // },
// // },
// // lineStyle: {
// // curveness: 0.2,
// // normal: {
// // color: '#66b1ff',
// // width: '2',
// // type: 'dotted', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
// // curveness: 0, //线条的曲线程度，从0到1
// // opacity: 1,
// // // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
// // },
// // },
// // },
// // {
// // label: {
// // show: true,
// // formatter: function (params) {
// // //标签内容
// // return '自定义内容和宽度'
// // },
// // },
// // lineStyle: {
// // width: 5,
// // curveness: 0.2,
// // },
// // source: 2,
// // target: 0,
// // name: 'file3 ---> file1',
// // },
// {
// source: 8,
// target: 1,
// name: 'IPUMUB_R',
// },
// ],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0,
},
},
],
}
myChart.setOption(option)
myChart.on('click', function (params) {
if (params.data.name) {
self.logShow = true
setTimeout(() => {
self.logLoading = true
}, 60)
//这里是给节点加的点击事件 这边加延时是因为这个echarts是渲染在弹框里 不然会显示不出来
}
})
},上面的代码还算清晰 至于vue怎么引入echart 可看我前几篇有记录 网上也很多
links的指向根据也不一定就根据id 根据name也是可以的 不过如果根据name 那name不能有重复 否则会报错 这个时候就得根据唯一id了 判断指向
\
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
