基于echarts实现实时数据传输效果
基于echarts实现实时数据传输效果
代码片段：
const targetcoord = [1000, 140]
const curveness = 0.2
const linesdata = []
const categories = [{
name: '流入中',
itemstyle: {
normal: {
color: new echarts.graphic.lineargradient(0, 0, 1, 0, [{
offset: 0,
color: '#01acca'
}, {
offset: 1,
color: '#5adbe7'
}]),
}
},
label: {
normal: {
fontsize: '14'
}
},
}, {
name: '暂无流入',
itemstyle: {
normal: {
color: new echarts.graphic.lineargradient(0, 0, 1, 0, [{
offset: 0,
color: '#ffb402'
}, {
offset: 1,
color: '#ffdc84'
}]),
}
},
label: {
normal: {
fontsize: '14'
}
},
}]
const item = {
name: "数据中心",
value: targetcoord,
symbolsize: 100,
itemstyle: {
normal: {
color: new echarts.graphic.lineargradient(0, 0, 1, 0, [{
offset: 0,
color: '#157eff'
}, {
offset: 1,
color: '#35c2ff'
}]),
}
},
label: {
normal: {
fontsize: '14'
}
},
}
const items = [{
name: "子平台1",
category: 0,
active: true,
speed: '50kb/s',
value: [0, 0]
}, {
name: "子平台2",
category: 0,
active: true,
speed: '50kb/s',
value: [0, 100]
}, {
name: "子平台3",
category: 1,
value: [0, 200]
}, {
name: "子平台4",
category: 1,
value: [0, 300]
}]
const data = items.concat([item])
items.foreach(function(el) {
if (el.active) {
linesdata.push([{
coord: el.value
}, {
coord: targetcoord
}])
}
})
const links = items.map((el) => {
return {
source: el.name,
target: item.name,
speed: el.speed,
linestyle: {
normal: {
color: el.speed '#12b5d0' : '#ff0000',
curveness: curveness,
}
},
}
})
option = {
legend: [{
formatter: function(name) {
return echarts.format.truncatetext(name, 100, '14px microsoft yahei', '…');
},
tooltip: {
show: true
},
textstyle: {
color: '#999'
},
selectedmode: false,
right: 0,
data: categories.map(function(el) {
return el.name
})
}],
xaxis: {
show: false,
type: 'value'
},
yaxis: {
show: false,
type: 'value'
},
series: [{
type: 'graph',
layout: 'none',
coordinatesystem: 'cartesian2d',
symbolsize: 60,
z: 3,
edgelabel: {
normal: {
show: true,
textstyle: {
fontsize: 14
},
formatter: function(params) {
let txt = ''
if (params.data.speed !== undefined) {
txt = params.data.speed
}
return txt
},
}
},
label: {
normal: {
show: true,
position: 'bottom',
color: '#5e5e5e'
}
},
itemstyle: {
normal: {
shadowcolor: 'none'
},
emphasis: {
}
},
linestyle: {
normal: {
width: 2,
shadowcolor: 'none'
},
},
edgesymbol: ['none', 'arrow'],
edgesymbolsize: 8,
data: data,
links: links,
categories: categories
}, {
name: 'a',
type: 'lines',
coordinatesystem: 'cartesian2d',
z: 1,
effect: {
show: true,
smooth: false,
traillength: 0,
symbol: "arrow",
color: 'rgba(55,155,255,0.5)',
symbolsize: 12
},
linestyle: {
normal: {
curveness: curveness
}
},
data: linesdata
}]
}
上一篇： 多附件上传组件演示
下一篇： 写了段批量抓取某个列表页的东东