Toggle navigation
Awesome Chart
By
lenovolhl
2018-06-13 11:09:46
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
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)
