<template>
<div class="wrap">
<div ref="main" class="charts"/>
</div>
</template>
<script>
import echarts from 'echarts'
import { debounce } from '@/utils'
export default {
name: 'Topology',
props: {
title: {
type: String,
default: ''
},
centerName: {
type: String,
default: ''
},
centerIcon: {
type: String,
default: 'https://www.easyicon.net/api/resizeApi.php?id=1093990&size=48'
},
chartData: {
type: Array,
default: () => {
return []
/*[
{
"tps":"14",
"businessName":"pc端登陆",
"tp99":"0.000",
"serviceName":"td-passport",
"url":"/2login",
"status":"0"
}
]*/
}
},
autoResize: {
type: Boolean,
default: true
}
},
data() {
return {
curService: 0,// 第几个服务器被点中。0 没有点击服务器
preStatus: 2,// 0 或 1
curService2: 0,// 第几个服务器被点中。0 没有点击服务器
preStatus2: 2,// 0 或 1
clickFlag: false,
chartMain: null,
chartWidth: 100,
chartHeight: 100,
// 服务有问题 展现的红色图
symbol0: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDA5ODIxRkFCRDY3MTFFODgyOTFEQjFCMzQyMDVDMDkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDA5ODIxRjlCRDY3MTFFODgyOTFEQjFCMzQyMDVDMDkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQ2NTY0RjFCNzNFMTFFOEEzMUQ4ODgxODhFNEIxNzAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ2NTY0RjJCNzNFMTFFOEEzMUQ4ODgxODhFNEIxNzAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7XK8zIAAAGM0lEQVR42txc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',
symbol1: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkwN0QzREJBQjczRTExRThCOEUxOTQzMDhFOTYyNTFCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkwN0QzREJCQjczRTExRThCOEUxOTQzMDhFOTYyNTFCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTA3RDNEQjhCNzNFMTFFOEI4RTE5NDMwOEU5NjI1MUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTA3RDNEQjlCNzNFMTFFOEI4RTE5NDMwOEU5NjI1MUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5b6bCLAAAF4ElEQVR42txc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',
// Options Begin
chartOption: {
title: {
// text: 'Graph'
},
tooltip: {},
// tooltip: {
// formatter: '单击: 看基本数据<br/>双击: 跳业务详情',
// textStyle: {
// fontSize: 10
// }
// },
animation: true,
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
backgroundColor: '#242730',
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRENjU2NEYxQjczRTExRThBMzFEODg4MTg4RTRCMTcwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRENjU2NEYyQjczRTExRThBMzFEODg4MTg4RTRCMTcwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQ2NTY0RUZCNzNFMTFFOEEzMUQ4ODgxODhFNEIxNzAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ2NTY0RjBCNzNFMTFFOEEzMUQ4ODgxODhFNEIxNzAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz56qQUIAAAF1UlEQVR42txbXWhbZRh+m5wkTZOmsdVRJ+iUbc4NFC9EUS8mCiooyBCZu/TCGxHEHxiiInoh+IN4UxCZCKKbIIoIiqBOBl74h26sq3Na23Xd2qS2aXpy8p/4vOd8qaXL1i/nfF9yji88pD/Jl/M+533e5z3J+fqazSZtFA9+TrrjRuBZ4G4gDHwL7AfGvSz68f1yzwtRb2MUOAD8zFwDg8AAcB/wG/CG+JvW6BUJUeApYAJ45ALHYQBPAieBff83Eu4VZf46kJZ4/uXAB8BhYGfQSeAEvgS+ALa6eP1u4CjwGpAMGglpcdZZ4/d4XIsl8rSQyN4gkMBrPwqcEvqPKFx7M3BQuMhOv5KwW3T8t4FLNRJ9B/Ar8KoXiagm4Upxhg4L7++W0zwD/A481EsS4sDL4kD2Um/iCuAj4Gvgum6S0Ac8LJJ/TpDR67iTmzAm4f3dIIHL/QjwoZCBnyJarTde1EnCpjWj7u3kwzCLFfp+fEY6N6PDBvS4KPu0H5Ov1uo0cWaB/jq7RI1mM6KahJtE2W/1Y/J8HTw9n6Pj01kqV2uuJrCNGW7QkUiI+v1IwELeoqOT85QrlDyNoRvG5DJFtkEAoT7/JG+VqzjzGZrJ5j2vJUtCOGNhPh0hGulxPdQbTfpj9h86Ce3zzypCujGaVaIf53Bdm8AkMkwUC3efgJmFPB2fythVoDKMTl9wrkCUKRJtGyLaksK01AWJsN6P/T1P2WVLy/qGu5LEiLhEdMYk2gWJDGuSSLlap3Hofgqdv6mRZMPLi1kiP2iQCDze9nr2fPZ+3WGoWGRVInCQLYPeJDK/ZNIx6D5vlSWHBNRIA6UZDveWhFWJLEIiK+4kYpYqtt/PgQTpKIGoFZyBMCbk4XTvSVgvkc2QyA4JiawbdWXnYyQPsirCJeL9vZdDuzi7RiJXtZGIq1GXy96EQ1hFcfmHCkgOEA3E/UkCRw3HPLHouMh2kDHiHGsjmzPN8elsSnrUZcY48UKBu6bzKQYnnkgoGWNdkdDEGamYixQZSFHIiG74/JUK0S+Z/15uzc4k5H2y4pR+yyVieL/BJI5c3bTmuhLqZcuGEU+CjDT1haQv3+WOnpPm5JkE+0jDTvKxqPKKdUUCJxxJpKlaWKZa0aR6CWQkUhSJ89eGHsuTy53LnsufZcDlzmXP5d/nM4tkKYRjcaqaS1SvlPCYo3qxQJHkJRSOuuzWFnqEWXCS4hjAOsmE0wD9apGhcIRiQ5sECbC4epXKyxmbBCaD/y/vrZZDgP0ZVsQp/YgRHIvkpMPDo1QtrlCtkLdJqS/OQTJDdsVIRaXinFFOvj/mf4ts7w596AkpMmJJ9Ioc1Uqm/Wj0J9BDJPQ6NOgk1W7m9qNFXswd+DE6OGz/vWrl5RvlhRqbXy1Sxh24QmIpD19D+t0itblD0CxSuTsE1SKVukPQLFKLOwTNIrW4Q9AsUos7BM0itbpDkCxSizsE0SKVukPQLFKLOwTxKlK5OwTNIrW4g3qLrGuvBOXuoN4i/wyuO6izyAPBdAc3FtlmBeAd4C3VJHAtblB/Ht3BjUWeH3xf5RPk3O+svDEeI8l7lV27QycWeX6cJmfP1CHRRjuTteTz3ux4YeEO0l/KtCwynXIGHzkC2CtfAHbQXPagGwI6qYT3gauB50nX95cXs8j2pnnIPvtz2dNe37qT23pfAq4HPtVCAlukHAGs99uQ/D4VBLhxB969toecTR2vALdQ9+IcObcUv2c7wOhlyhZ2e5f7d8Ct5GzVm9ScPA8KvD9yO/CusECl4eVWf9YlNyPeYMGbs5Y0EMDS2yXWN3WxHFJ4pq4RjxUFa54gZ+fcnk7G316S0IqcOGPXigpxY1eLwGPADcBX3Wo2OnbDTYlecbPoHVJXCsCYIHBM/E5BJqEVP5GzZe8BUd6rH4kItOIbcea5AhaoB9GNHbKfrUmSneQTMeOfEpq/ax1JXQ+jS+/TKvcxa3aCxMVYU4fduYl/BRgAoZJNN0izn34AAAAASUVORK5CYII=',
label: {
normal: {
show: true,
position: 'bottom',
offset: [0, -6], // [0, -18],
// backgroundColor: 'rgba(255,255,255,.4)',//改文字背景色
// borderColor: '#f3f3f3',
borderWidth: 0, // 1,
borderRadius: 0, // 3,
fontSize: 12,
padding: 4,
color: '#fff'// '#666'
}
},
tooltip: {
formatter: '单击预览<br/>双击查看详情',//'{b0}: {c0}<br />{b1}: {c1}',
backgroundColor: 'rgba(240,182,94,0.5)',
textStyle: {
// color: '#ff9000',
fontSize: 10,
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [0, 6],
edgeLabel: {
normal: {
textStyle: {
fontSize: 12
}
}
},
data: [],
links: [],
lineStyle: {
normal: {
opacity: 1, // 0.7,
width: 2,
curveness: 0.1,
color: '#0a92ff'// '#41b34d'
}
}
}
]
}
// Options End
}
},
watch: {
chartData: {
deep: true,
handler: function(arg) {
// console.log('arg==>', arg);
// console.log('data update');
if (arg[this.curService -1]) {// 处理异常 arg[this.curService -1] 为undefined
if (arg[this.curService -1].status != "2") {// 后台忽然返回的数据不是我原来保留的2了， 此时须要记录最新值
this.preStatus = arg[this.curService -1].status;
}
arg[this.curService -1].status = "2";
}
if (this.curService2 != 0) {//须要将原来的那个那根线的值放回去
arg[this.curService2 - 1].status = this.preStatus2;
this.curService2 = 0;//清空值
this.preStatus2 = 2;
}
this.initData();
this.initChart();
}
}
},
created() {
this.initData()
this.topoClickShow(1);
},
mounted() {
this.initChart()
// window.addEventListener('resize', this.chartResize, false)
if (this.autoResize) {
this.__resizeHanlder = debounce(() => {
if (this.chartMain) {
this.chartMain.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
}
// 监听侧边栏的变化
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
this.chartMain.on('click', (param) => {
if(this.clickFlag) {//取消上次延时未执行的方法
this.clickFlag = clearTimeout(this.clickFlag);
}
this.clickFlag = setTimeout(() => {
this.chartData.forEach((item, index) => {// index 是0开始,topoClickShow方法传人值1开始
if (item.businessName == param.name) {
this.topoClickShow(index+1);
}
})
if ((/\>/gim).test(param.name)) {
let itemIndex = parseInt((param.name).split('>')[1]);//这里的值是 1开始,不是0开始
this.topoClickShow(itemIndex);
/*
if (this.preStatus != "2") {//须要数据移位置 (若是为2说明这个变量还没使用是默认值)
this.preStatus2 = this.preStatus;
this.curService2 = this.curService;
}
this.curService = itemIndex;
this.preStatus = this.chartData[itemIndex-1].status;console.log("click---this.preStatus==>", this.preStatus);
this.chartData[itemIndex-1].status = "2";console.log('this.chartData==>',itemIndex-1,'==>',this.chartData,'==>',this.chartData[itemIndex-1]);
*/
}
// click 事件的处理
this.$emit('serviceChain', param)
}, 300);//延时300毫秒执行
})
this.chartMain.on('dblclick', (param) => {
if(this.clickFlag) {//取消上次延时未执行的方法
this.clickFlag = clearTimeout(this.clickFlag);
}
// dblclick 事件的处理
this.$emit('dbService', param)
})
},
destroyed() {
if (!this.chartMain) {
return
}
// window.removeEventListener('resize', this.chartResize, false);
if (this.autoResize) {
window.removeEventListener('resize', this.__resizeHanlder)
}
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
this.chartMain.dispose();
this.chartMain = null;
},
methods: {
getPosition(size) {
if (!size) {
return false
}
const result = [],
centerX = this.chartWidth / 2,
centerY = this.chartHeight / 2,
radius = centerX,
angle = Math.round(360 / size)
for (let i = 0; i < size; i++) {
result.push({
x: centerX + radius * Math.cos(angle * i * 3.14 / 180),
y: centerY + radius * Math.sin(angle * i * 3.14 / 180)
})
}
return result
},
topoClickShow(itemIndex) {
if (this.preStatus != "2") {//须要数据移位置 (若是为2说明这个变量还没使用是默认值)
this.preStatus2 = this.preStatus;
this.curService2 = this.curService;
}
this.curService = itemIndex;
this.preStatus = this.chartData[itemIndex-1].status;//console.log("click---this.preStatus==>", this.preStatus);
this.chartData[itemIndex-1].status = "2";//console.log('this.chartData==>',itemIndex-1,'==>',this.chartData,'==>',this.chartData[itemIndex-1]);
},
chartResize() {
this.chartMain && this.chartMain.resize()
},
initData() {
if (!this.chartData) return
const aPosition = this.getPosition(this.chartData.length),
totalData = [{
name: this.centerName,
x: this.chartWidth / 2,
y: this.chartHeight / 2,
symbolSize: 80,
// symbol: 'image://' + this.centerIcon //中心图标
symbol: 'image://data:image/png;base64,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'
}],
totalLinks = []
if (aPosition) {
for (let i = 0, l = this.chartData.length; i < l; i++) {
totalData.push(Object.assign(aPosition[i], {
name: `${this.chartData[i].businessName}`,
// symbol: this.chartData[i].status == "0" ? this.symbol : this.symbol0
symbol: this.chartData[i].status == "0" ? this.symbol : ( this.chartData[i].status == "1" ? this.symbol0 : this.symbol1 )
}))
totalLinks.push({
source: 0,
target: i + 1,
label: {
show: true,
color: '#0a92ff', // '#333',
formatter: this.chartData[i].tps+' tps, '+this.chartData[i].tp99+' tp99'//this.chartData[i].info
// formatter: (this.chartData[i].tps ? this.chartData[i].tps: '')+' tps, '+(this.chartData[i].tp99 ? this.chartData[i].tp99: '')+' tp99'//this.chartData[i].info
/*formatter: () => {
let tps = '';
let tp99 = '';
if (this.chartData[i].tps != null) tps = this.chartData[i].tps;
if (this.chartData[i].tp99 != null) tp99 = this.chartData[i].tp99;
return tps+' tps, '+tp99+' tp99'
}*/
},
lineStyle: {
// color: this.chartData[i].status == "0" ? '#373c4f' : '#e68700' //#1bec1e
color: this.chartData[i].status == "0" ? '#373c4f' : (this.chartData[i].status == "1" ? '#d60037' : '#e68700')
}
})
}
// console.log("init--totalData==>", totalData);
this.chartOption.series[0].data = totalData
this.chartOption.series[0].links = totalLinks
// this.chartOption.title.text = this.title
}
},
initChart() {
if (!this.chartMain) {
// this.chartMain = this.$echarts.init(this.$refs.main);
this.chartMain = echarts.init(this.$refs.main)
} else if (this.chartOption.animation) {
this.chartOption.animation = false
}
this.chartMain.clear()
this.chartMain.setOption(this.chartOption)
}
}
}
</script>
<style scoped>
.wrap{ position:relative; width:100%; height:100%; background:#242730; overflow: hidden; }
.charts{ position:absolute; top:3%; left:3%; width:94%; height:94%; }
</style>