Skip to content

M
my-echarts-example
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 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/echarts.min.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="container" style="width :1200px;height: 800px;"></div>
<script type="text/javascript">
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 computerSymbol =
const dataSymbol =
'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';
const serverSymbol =
'image://https://cdn.nlark.com/yuque/0/2019/png/230502/1551755495650-assets/web-upload/c37344bf-191c-4464-ae56-af4e2699dbe1.png';
const appSymbol =
'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 map = new Map(); // 记录数据点坐标
const dataList = []; // 存储从数据库接收到的服务列表，并映射为数据点
......@@ -249,6 +251,8 @@ var series = [];
links,
});
var addLines = function() {
const series = [];
let curv = 0.56;
serviceList.forEach(service => {
......@@ -261,14 +265,9 @@ var series = [];
id: `${data}${edge}`,
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 1,
zlevel: 2,
effect: effects,
symbol: ['none', 'arrow'],
label: {
show: true,
position: 'middle',
formatter: `${datanum}千条/秒`,
},
symbol: ['none', 'arrow'],
data: [
{
coords: [map.get(data), map.get(app)],
......@@ -279,6 +278,11 @@ var series = [];
width: 2,
},
},
label: {
show: true,
position: 'middle',
formatter: `${datanum}千条/秒`,
},
},
],
},
......@@ -286,14 +290,9 @@ var series = [];
id: `${data}`,
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 1,
zlevel: 2,
effect: effects,
symbol: ['none', 'arrow'],
label: {
show: true,
position: 'middle',
formatter: `${resultnum}千条/秒`,
},
data: [
{
coords: [map.get(edge), map.get('中心节点')],
......@@ -304,6 +303,11 @@ var series = [];
width: 2,
},
},
label: {
show: true,
position: 'middle',
formatter: `${resultnum}千条/秒`,
},
},
],
}
......@@ -311,8 +315,15 @@ var series = [];
curv -= 0.08;
});
const option = {
series,
};
console.log(series)
return option;
}
console.log(series)
var option= {
grid: {
left: '6%',
......@@ -339,9 +350,12 @@ var series = [];
tooltip: {
trigger: 'item',
},
series: series
series,
};
myChart.setOption(option);
myChart.setOption(option);
setInterval(function () {
myChart.setOption(addLines());
}, 2000);
</script>
</body>
</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