Awesome Chartecharts graph配置项内容和展示
graph图表拖拽
配置项如下
option = {
tooltip: {
show: false,
},
series: [{
type: 'graph',
layout: 'none',
focusNodeAdjacency: false,
nodeScaleRatio: 0.1,
roam: true,
zoom: 1,
zoomLimit: {
max: 1.5,
min: 0.5
},
draggable: false,
animation: false,
circular: {
rotateLabel: true
},
edgeSymbol: ['', 'arrow'], //
label: {
show: true,
fontSize: 8,
color: '#000',
fontWeight: 'normal',
position: 'right',
formatter: function(param) {
return param.name;
},
},
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
data: [{
name: '鹰眼',
value: [10, 35, 50],
x: 240,
y: 192,
}, {
name: 'Mysql',
x: 179,
y: 254,
value: [6, 7, 8],
}, {
name: 'Redis',
value: [9, 31, 11],
x: 100,
y: 100,
}, {
name: 'ES',
value: [23, 65, 50],
x: 263.3165375759196,
y: 108.7891462763019,
}, ],
edges: [{
source: 0,
target: 1,
value: '数据库调用'
}, {
source: 0,
target: 2,
value: '数据库调用'
}, {
source: 0,
target: 3,
value: '远程调用'
}, {
source: 1,
target: 2,
value: '数据库调用'
}, {
source: 2,
target: 3,
value: '远程调用'
}],
},
{// 外围刻度
type: 'gauge',
center: ['95%', '10%'],radius: '10%',
splitNumber:10,min:0,max:10,
startAngle:225,endAngle:-45,
axisLine: {
show: true,
lineStyle: {width: 2,shadowBlur: 0,color: [[1, '#03b7c9']]}
},
axisTick: {
show: true,
lineStyle: { color:'#03b7c9', width: 1},
length: -5,
splitNumber: 2
},
splitLine: {
show: true,
length: -10,
lineStyle: {color: '#03b7c9'}
},
axisLabel: {
distance: -12,
textStyle: {color: '#03b7c9',fontSize: '10',fontWeight: 'bold'}
},
pointer: {show: 0},
detail: {show: 0}
},
{// 内侧指针、数值显示
name: '出巡区间',
type: 'gauge',
center: ['95%', '10%'],radius: '10%',
startAngle: 225,endAngle: -45,
min: 0,max: 10,
axisLine: {
show: true,
lineStyle: {
width: 16,
color: [[1, 'rgba(255,255,255,.1)']]
}
},
axisTick: {show: 0},
splitLine: {show: 0},
axisLabel: {show: 0},
pointer: {show: true,length: '90%'},
detail: {
show: true,
offsetCenter: [0, '100%'],
textStyle: {fontSize: 12,color: '#fff'},
formatter: ['{value}'+'个','{name|'+'出巡区间'+'}'].join('\n'),
rich: {
name: {fontSize: 10,lineHeight: 15,color: '#fff'}
}
},
itemStyle: {
normal: {color: '#03b7c9',}
},
data: [{
value: 0
}]
},
//限速区间
{// 外围刻度
type: 'gauge',
center: ['95%', '26%'],radius: '10%',
splitNumber:10,min:0,max:10,
startAngle:225,endAngle:-45,
axisLine: {
show: true,
lineStyle: {width: 2,shadowBlur: 0,color: [[1, '#03b7c9']]}
},
axisTick: {
show: true,
lineStyle: { color:'#03b7c9', width: 1},
length: -5,
splitNumber: 2
},
splitLine: {
show: true,
length: -10,
lineStyle: {color: '#03b7c9'}
},
axisLabel: {
distance: -12,
textStyle: {color: '#03b7c9',fontSize: '10',fontWeight: 'bold'}
},
pointer: {show: 0},
detail: {show: 0}
},
{// 内侧指针、数值显示
name: '限速区间',
type: 'gauge',
center: ['95%', '26%'],radius: '10%',
startAngle: 225,endAngle: -45,
min: 0,max: 10,
axisLine: {
show: true,
lineStyle: {
width: 16,
color: [[1, 'rgba(255,255,255,.1)']]
}
},
axisTick: {show: 0},
splitLine: {show: 0},
axisLabel: {show: 0},
pointer: {show: true,length: '90%'},
detail: {
show: true,
offsetCenter: [0, '100%'],
textStyle: {fontSize: 12,color: '#fff'},
formatter: ['{value}'+'个','{name|'+'限速区间'+'}'].join('\n'),
rich: {
name: {fontSize: 10,lineHeight: 15,color: '#fff'}
}
},
itemStyle: {
normal: {color: '#03b7c9',}
},
data: [{
value: 0
}]
},
//客车扣停区间
{// 外围刻度
type: 'gauge',
center: ['95%', '42%'],radius: '10%',
splitNumber:10,min:0,max:10,
startAngle:225,endAngle:-45,
axisLine: {
show: true,
lineStyle: {width: 2,shadowBlur: 0,color: [[1, '#03b7c9']]}
},
axisTick: {
show: true,
lineStyle: { color:'#03b7c9', width: 1},
length: -5,
splitNumber: 2
},
splitLine: {
show: true,
length: -10,
lineStyle: {color: '#03b7c9'}
},
axisLabel: {
distance: -12,
textStyle: {color: '#03b7c9',fontSize: '10',fontWeight: 'bold'}
},
pointer: {show: 0},
detail: {show: 0}
},
{// 内侧指针、数值显示
name: '扣停区间',
type: 'gauge',
center: ['95%', '42%'],radius: '10%',
startAngle: 225,endAngle: -45,
min: 0,max: 10,
axisLine: {
show: true,
lineStyle: {
width: 16,
color: [[1, 'rgba(255,255,255,.1)']]
}
},
axisTick: {show: 0},
splitLine: {show: 0},
axisLabel: {show: 0},
pointer: {show: true,length: '90%'},
detail: {
show: true,
offsetCenter: [0, '100%'],
textStyle: {fontSize: 12,color: '#fff'},
formatter: ['{value}'+'个','{name|'+'扣停区间'+'}'].join('\n'),
rich: {
name: {fontSize: 10,lineHeight: 15,color: '#fff'}
}
},
itemStyle: {
normal: {color: '#03b7c9',}
},
data: [{
value: 0
}]
},
//封锁区间
{// 外围刻度
type: 'gauge',
center: ['95%', '58%'],radius: '10%',
splitNumber:10,min:0,max:10,
startAngle:225,endAngle:-45,
axisLine: {
show: true,
lineStyle: {width: 2,shadowBlur: 0,color: [[1, '#03b7c9']]}
},
axisTick: {
show: true,
lineStyle: { color:'#03b7c9', width: 1},
length: -5,
splitNumber: 2
},
splitLine: {
show: true,
length: -10,
lineStyle: {color: '#03b7c9'}
},
axisLabel: {
distance: -12,
textStyle: {color: '#03b7c9',fontSize: '10',fontWeight: 'bold'}
},
pointer: {show: 0},
detail: {show: 0}
},
{// 内侧指针、数值显示
name: '封锁区间',
type: 'gauge',
center: ['95%', '58%'],radius: '10%',
startAngle: 225,endAngle: -45,
min: 0,max: 10,
axisLine: {
show: true,
lineStyle: {
width: 16,
color: [[1, 'rgba(255,255,255,.1)']]
}
},
axisTick: {show: 0},
splitLine: {show: 0},
axisLabel: {show: 0},
pointer: {show: true,length: '90%'},
detail: {
show: true,
offsetCenter: [0, '100%'],
textStyle: {fontSize: 12,color: '#fff'},
formatter: ['{value}'+'个','{name|'+'封锁区间'+'}'].join('\n'),
rich: {
name: {fontSize: 10,lineHeight: 15,color: '#fff'}
}
},
itemStyle: {
normal: {color: '#03b7c9',}
},
data: [{
value: 0
}]
}
]
};
if (!app.inNode) {
setTimeout(function() {
//readStorage();
initDraggableGraphic();
window.addEventListener('resize', updatePosition);
myChart.on('graphRoam', updatePosition);
myChart.on('dataZoom', updatePosition);
myChart.on('click', onLineClick);
myChart.dispatchAction({
type: 'dataZoom',
start: 20,
end: 30
});
}, 0);
}
function readStorage() {
let _topoStorage = localStorage.getItem('TOPO_POSITION');
if (_topoStorage) {
let _data = JSON.parse(_topoStorage);
_data.forEach(item => {
let _line = option.series[0].data.find(a => a.name == item.name);
if (_line) {
_line.x = item.x;
_line.y = item.y;
}
})
}
}
function initDraggableGraphic() {
myChart.setOption({
graphic: echarts.util.map(option.series[0].data, function(item, dataIndex) {
//使用图形元素组件在节点上划出一个隐形的图形覆盖住节点
var tmpPos = myChart.convertToPixel({
'seriesIndex': 0
}, [item.x, item.y]);
return {
type: 'circle',
id: dataIndex,
position: tmpPos,
shape: {
cx: 0,
cy: 0,
r: 30
},
style: {
text: '',
fill: 'rgba(0,0,0,0)',
font: '8px'
},
invisible: false,
draggable: true,
z: -100,
ondrag: echarts.util.curry(function(dataIndex) {
onPointDragging(dataIndex, this)
}, dataIndex),
onclick: echarts.util.curry(function() {
alert('该操作为下钻或弹出详细信息:' + option.series[0].data[dataIndex].name)
})
};
})
});
}
function updatePosition(p) {
let zoom = myChart.getOption().series[0].zoom;
console.log(zoom)
if (zoom > 1.5) {
zoom = 1.50
} else if (zoom < 0.5) {
zoom = 0.5
}
option.series[0].zoom = zoom;
myChart.setOption(option)
myChart.setOption({
graphic: echarts.util.map(option.series[0].data, function(item, dataIndex) {
var tmpPos = myChart.convertToPixel({
'seriesIndex': 0
}, [item.x, item.y]);
return {
position: tmpPos
};
})
});
}
//拖拽中
function onPointDragging(dataIndex, graphic) {
var tmpPos = myChart.convertFromPixel({
'seriesIndex': 0
}, graphic.position);
option.series[0].data[dataIndex].x = tmpPos[0];
option.series[0].data[dataIndex].y = tmpPos[1];
myChart.setOption(option);
updatePosition();
onSavePosition();
}
function onLineClick(param) {
if (param && param.data) {
let source = option.series[0].data[param.data.source];
let target = option.series[0].data[param.data.target];
alert(source.name + '>>>' + target.name);
}
}
function onSavePosition() {
clearTimeout(this.timerid);
this.timerid = setTimeout(function() {
localStorage.setItem('TOPO_POSITION', JSON.stringify(option.series[0].data));
}, 300)
}
kkk=1;
intervalId = setInterval(function () {
kkk+=1;
option.series[0].data[0].name=kkk;
myChart.setOption(option);
console.log(kkk);
},2000)
截图如下
