Skip to content

M
my-echarts-example

文档服务地址：http://47.92.0.57:3000/ 周报索引地址：http://47.92.0.57:3000/s/NruNXRYmV

Commit 0b8b9e48 by gj
Options

html版拓补

parent b780b4df
Showing with 34 additions and 32 deletions
README.md deleted 100644 → 0
#Eharts组件示例
##利用baidu的Echarts组件编写的部分数据可视化的示例
###所需组件：
- baidu下的echarts组件：http://echarts.baidu.com/download.html
### 包含内容：
- 折线图
- 柱状图
- 饼状图
- 雷达图
- （添加中....）
\ No newline at end of file
js/echarts.js 0 → 100755
This source diff could not be displayed because it is too large. You can view the blob instead.
topo.html
...@@ -3,19 +3,21 @@ ...@@ -3,19 +3,21 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <title>Title</title>
<script src="js/echarts.min.js"></script> <script src="js/echarts.js"></script>
</head> </head>
<body> <body>
<div id="container" style="width :1200px;height: 800px;"></div> <div id="container" style="width :1200px;height: 800px;"></div>
<script type="text/javascript"> <script type="text/javascript">
var myChart = echarts.init(document.getElementById("container")); var myChart = echarts.init(document.getElementById("container"));
const dataSymbol ='image://https://cdn.nlark.com/yuque/0/2019/png/230502/1551755511729-assets/web-upload/d234cec3-55d4-42ff-979f-e1602ddd0139.png'; const dataSymbol =
const computerSymbol = 'image://https://cdn.nlark.com/yuque/0/2019/png/230502/1551755511729-assets/web-upload/d234cec3-55d4-42ff-979f-e1602ddd0139.png';
const computerSymbol =
'image://https://cdn.nlark.com/yuque/0/2019/png/230502/1553220015944-assets/web-upload/a595200c-6771-4364-88a6-3b8f530c0646.png'; 'image://https://cdn.nlark.com/yuque/0/2019/png/230502/1553220015944-assets/web-upload/a595200c-6771-4364-88a6-3b8f530c0646.png';
const serverSymbol = const serverSymbol =
'image://https://cdn.nlark.com/yuque/0/2019/png/230502/1551755495650-assets/web-upload/c37344bf-191c-4464-ae56-af4e2699dbe1.png'; 'image://https://cdn.nlark.com/yuque/0/2019/png/230502/1551755495650-assets/web-upload/c37344bf-191c-4464-ae56-af4e2699dbe1.png';
const appSymbol = const appSymbol =
'image://https://cdn.nlark.com/yuque/0/2019/png/230502/1553153582469-assets/web-upload/78a89bed-71e4-45ba-90fb-37c19b01b2f2.png'; 'image://https://cdn.nlark.com/yuque/0/2019/png/230502/1553153582469-assets/web-upload/78a89bed-71e4-45ba-90fb-37c19b01b2f2.png';
const geoCoordMap = new Map(); // 记录同边缘节点的上一个数据节点的位置，辅助布局 const geoCoordMap = new Map(); // 记录同边缘节点的上一个数据节点的位置，辅助布局
const map = new Map(); // 记录数据点坐标 const map = new Map(); // 记录数据点坐标
const dataList = []; // 存储从数据库接收到的服务列表，并映射为数据点 const dataList = []; // 存储从数据库接收到的服务列表，并映射为数据点
...@@ -249,6 +251,8 @@ var series = []; ...@@ -249,6 +251,8 @@ var series = [];
links, links,
}); });
var addLines = function() {
const series = [];
let curv = 0.56; let curv = 0.56;
serviceList.forEach(service => { serviceList.forEach(service => {
...@@ -261,14 +265,9 @@ var series = []; ...@@ -261,14 +265,9 @@ var series = [];
id: `${data}${edge}`, id: `${data}${edge}`,
type: 'lines', type: 'lines',
coordinateSystem: 'cartesian2d', coordinateSystem: 'cartesian2d',
zlevel: 1, zlevel: 2,
effect: effects, effect: effects,
symbol: ['none', 'arrow'], symbol: ['none', 'arrow'],
label: {
show: true,
position: 'middle',
formatter: `${datanum}千条/秒`,
},
data: [ data: [
{ {
coords: [map.get(data), map.get(app)], coords: [map.get(data), map.get(app)],
...@@ -279,6 +278,11 @@ var series = []; ...@@ -279,6 +278,11 @@ var series = [];
width: 2, width: 2,
}, },
}, },
label: {
show: true,
position: 'middle',
formatter: `${datanum}千条/秒`,
},
}, },
], ],
}, },
...@@ -286,14 +290,9 @@ var series = []; ...@@ -286,14 +290,9 @@ var series = [];
id: `${data}`, id: `${data}`,
type: 'lines', type: 'lines',
coordinateSystem: 'cartesian2d', coordinateSystem: 'cartesian2d',
zlevel: 1, zlevel: 2,
effect: effects, effect: effects,
symbol: ['none', 'arrow'], symbol: ['none', 'arrow'],
label: {
show: true,
position: 'middle',
formatter: `${resultnum}千条/秒`,
},
data: [ data: [
{ {
coords: [map.get(edge), map.get('中心节点')], coords: [map.get(edge), map.get('中心节点')],
...@@ -304,6 +303,11 @@ var series = []; ...@@ -304,6 +303,11 @@ var series = [];
width: 2, width: 2,
}, },
}, },
label: {
show: true,
position: 'middle',
formatter: `${resultnum}千条/秒`,
},
}, },
], ],
} }
...@@ -311,8 +315,15 @@ var series = []; ...@@ -311,8 +315,15 @@ var series = [];
curv -= 0.08; curv -= 0.08;
}); });
const option = {
series,
};
console.log(series)
return option;
}
console.log(series)
var option= { var option= {
grid: { grid: {
left: '6%', left: '6%',
...@@ -339,9 +350,12 @@ var series = []; ...@@ -339,9 +350,12 @@ var series = [];
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
series: series series,
}; };
myChart.setOption(option); myChart.setOption(option);
setInterval(function () {
myChart.setOption(addLines());
}, 2000);
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment