Skip to content

M
my-echarts-example

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

Commit b780b4df by gj
Options

Initial commit

parents
Showing with 361 additions and 0 deletions
README.md 0 → 100644
#Eharts组件示例
##利用baidu的Echarts组件编写的部分数据可视化的示例
###所需组件：
- baidu下的echarts组件：http://echarts.baidu.com/download.html
### 包含内容：
- 折线图
- 柱状图
- 饼状图
- 雷达图
- （添加中....）
\ No newline at end of file
js/echarts.common.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
js/echarts.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
topo.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/echarts.min.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 =
'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 = []; // 存储从数据库接收到的服务列表，并映射为数据点
const serviceList = new Map(); // 存储从接口接收到的速度，并映射为连线
const links = [];
const ycenter = 42;
const ycomputer = 23;
const yapp = 16;
const ydata = 9;
const effects = {
show: true,
smooth: true,
trailLength: 0,
symbol: 'arrow',
color: '#1890ff',
symbolSize: 8,
period: 6,
loop: true,
};
const lineColor = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(24,144,255,0.5)',
}, {
offset: 1,
color: 'rgba(24,144,255,1)',
}],
global: false, // 缺省为 false
}
const labelData = {
normal: {
position: 'bottom',
distance: 2, // 离图标多远
rotate: 45,
show: true,
fontSize: 13,
color: '#222222',
fontWeight: '300',
fontFamily: 'microsoftYaHei',
formatter: params => {
// console.log(params)
var strs = params.name.split(''); //字符串数组
var str = '';
for (var i = 0, s; (s = strs[i++]); ) {
//遍历字符串数组
str += s;
if (!(i % 1)) str += '\n'; //按需要求余
}
return str;
},
},
};
const labelComputer = {
normal: {
position: 'top',
show: true,
distance: 10,
textStyle: {
fontSize: 13,
color: '#222222',
fontWeight: '300',
fontFamily: 'microsoftYaHei',
},
},
};
const labelServer = {
// 文字3
normal: {
position: 'bottom',
show: true,
distance: 2,
textStyle: {
fontSize: 13,
color: '#222222',
fontWeight: '300',
fontFamily: 'microsoftYaHei',
},
},
};
const datalist = [
{serviceid: 2, name: "北京地铁出行链数据计算模型", nodeurl: "http://192.168.3.19:9000", dataid: 2, appid: 1, ownnode: 6},
{serviceid: 8, name: "北京高速通行数据计算模型", nodeurl: "http://192.168.3.19:9002", dataid: 2, appid: 1, ownnode: 6},
{serviceid: 4, name: "测试北京出行链统计分析", nodeurl: "http://192.168.3.19:9001", dataid: 5, appid: 3, ownnode: 6},
{serviceid: 19, name: "北京市出租车GPS统计", nodeurl: "http://192.168.3.19:9007", dataid: 2, appid: 14, ownnode: 6},
{serviceid: 24, name: "北京市地铁出行链统计", nodeurl: "http://172.17.19.2:9011", dataid: 18, appid: 14, ownnode: 10},
{serviceid: 36, name: "Storm-LngLat", nodeurl: "http://172.17.19.2:9014", dataid: 25, appid: 26, ownnode: 10},
{serviceid: 52, name: "64x64Bicycle", nodeurl: "http://172.17.19.2:9020", dataid: 28, appid: 29, ownnode: 10},
{serviceid: 11, name: "出租车网格计算应用", nodeurl: "http://114.67.37.247:9006", dataid: 16, appid: 1,ownnode: 11},
{serviceid: 29, name: "重庆市公交信息统计", nodeurl: "http://114.67.37.247:9013", dataid: 20, appid: 14,ownnode: 11},
{serviceid: 25, name: "北京市路况数据统计", nodeurl: "http://192.168.23.76:9012", dataid: 11, appid: 17, ownnode: 12},
{serviceid: 32, name: "ADS-B", nodeurl: "http://192.168.23.76:9015", dataid: 24, appid: 23, ownnode: 12},
{serviceid: 35, name: "航班实时监控", nodeurl: "http://192.168.23.76:9017", dataid: 26, appid: 25, ownnode: 12},
{serviceid: 9, name: "天津物流信息统计", nodeurl: "http://192.168.23.77:9003", dataid: 14, appid: 4, ownnode: 13},
{serviceid: 10, name: "全国高速ETC数据统计", nodeurl: "http://192.168.23.77:9004", dataid: 13, appid: 5, ownnode: 13},
{serviceid: 27, name: "北京市交通事件数据统计", nodeurl: "http://192.168.23.77:9008", dataid: 13, appid: 16, ownnode: 13},
{serviceid: 28, name: "北京市路况信息统计", nodeurl: "http://192.168.23.77:9009", dataid: 14, appid: 17,ownnode: 13},
{serviceid: 23, name: "山东高速公路ETC统计", nodeurl: "http://192.168.3.18:9010", dataid: 17, appid: 14, ownnode: 17}]
var addData = function (datalist) {
// 将服务按所在节点升序排列
// datalist.sort((a, b) => {
// return a.ownnode === b.ownnode ? a.appid - b.appid : a.ownnode - b.ownnode;
// });
// console.log(datalist);
if (!map.has('中心节点')) {
dataList.push({
name: '中心节点',
value: [100, ycenter],
draggable: false,
symbol: serverSymbol,
symbolSize: 40,
label: labelServer,
});
map.set('中心节点', [100, ycenter]);
}
let xnode = 0;
datalist.forEach(service => {
const { dataid, ownnode, name, appid } = service;
const dataname = `${name}`;
const nodename = `边缘节点：${ownnode}`;
const appname = `${ownnode}应用${appid}`;
// const gapnode = parseInt(600 / (len / 2));
// const gapdata = parseInt(600 / len);
const gapnode = 40;
const gapdata = 10;
if (!map.has(nodename)) {
dataList.push({
name: nodename,
value: [xnode, ycomputer],
symbol: computerSymbol,
symbolSize: 40,
label: labelComputer,
tooltip: {
formatter: params => {
return `${params.data.value}`;
},
},
category: ownnode,
});
geoCoordMap.set(nodename, [xnode, ycomputer]);
map.set(nodename, [xnode, ycomputer]);
xnode += gapnode;
}
if (!map.has(dataname)) {
const x = geoCoordMap.get(nodename)[0];
const y = ydata;
dataList.push({
name: dataname,
symbol: dataSymbol,
symbolSize: 40,
value: [x, y],
tooltip: {
formatter: params => {
return `${params.data.value}`;
},
},
label: labelData,
category: dataid,
});
if (!map.has(appname)) {
dataList.push({
name: appname,
symbol: appSymbol,
symbolSize: 40,
value: [x, yapp],
tooltip: {
formatter: params => {
return `${params.data.value}`;
},
},
label: labelServer,
category: appid,
});
map.set(appname, [x, yapp]);
}
geoCoordMap.set(nodename, [x + gapdata, y]);
map.set(dataname, [x, y]);
serviceList.set(`${name}`, {
data: dataname,
edge: nodename,
app: appname,
center: '中心节点',
datanum: 0,
resultnum: 0,
});
links.push({
source: appname,
target: nodename,
});
}
});
return dataList;
};
var series = [];
series.push({
type: 'graph',
coordinateSystem: 'cartesian2d',
id: 'topology',
layout: 'none',
cursor: 'pointer',
// focusNodeAdjacency: 'true',
lineStyle: {
color: '#1890ff',
width: 2,
},
data: addData(datalist),
links,
});
let curv = 0.56;
serviceList.forEach(service => {
const { data, edge, app } = service;
let datanum = Math.ceil(Math.random() * 1000);
let resultnum = Math.ceil(Math.random() * 500);
series.push(
{
id: `${data}${edge}`,
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 1,
effect: effects,
symbol: ['none', 'arrow'],
label: {
show: true,
position: 'middle',
formatter: `${datanum}千条/秒`,
},
data: [
{
coords: [map.get(data), map.get(app)],
lineStyle: {
normal: {
curveness: 0,
color: lineColor,
width: 2,
},
},
},
],
},
{
id: `${data}`,
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 1,
effect: effects,
symbol: ['none', 'arrow'],
label: {
show: true,
position: 'middle',
formatter: `${resultnum}千条/秒`,
},
data: [
{
coords: [map.get(edge), map.get('中心节点')],
lineStyle: {
normal: {
curveness: curv,
color: lineColor,
width: 2,
},
},
},
],
}
);
curv -= 0.08;
});
console.log(series)
var option= {
grid: {
left: '6%',
right: '6%',
top: '1%',
bottom: '1%',
},
textStyle: {
color: '#f00',
fontSize: 13,
fontWeight: 600,
},
backgroundColor: '#fbfbfb',
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
xAxis: {
show: false,
type: 'value',
},
yAxis: {
show: false,
type: 'value',
},
tooltip: {
trigger: 'item',
},
series: series
};
myChart.setOption(option);
</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