loopEcharts(time,data,data2,data3){
let Ehcarts=echarts.init(document.getElementById("loopEchart"))
let option={
backgroundColor:'',
color:["#FF2160","#E8E637","#30B1FB"],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '14%',
top:'16%',
containLabel: true
},
legend: {
data: ['一道防线', '二道防线', '三道防线'],
right: 10,
top:12,
textStyle: {
color: "#fff"
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: {
type: 'category',
data: time,
axisLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
},
},
yAxis: {
type: 'value',
max:'1200',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {}
},
dataZoom: [
{
show: true,
realtime: true,
start: 50,
end: 100,
textStyle: {
color: '#fff'
}
},
{
type: 'inside',
realtime: true,
start: 50,
end: 100,
textStyle: {
color: '#fff'
}
}
],
series: [{
name: '一道防线',
type: 'bar',
barWidth: '10%',
itemStyle: {
barBorderRadius: 3,
},
data:data
},
{
name: '二道防线',
type: 'bar',
barWidth: '10%',
itemStyle: {
barBorderRadius: 3,
},
data: data2
},
{
name: '三道防线',
type: 'bar',
barWidth: '10%',
itemStyle: {
barBorderRadius: 3,
},
data:data3
}]
}
Ehcarts.setOption(option)
},
数据结构
router.get('/sdfx_count', (ctx, next) => {
ctx.body = Object.assign({}, message, {
time:["13:05","14:05","15:00","16:00","17:00","18:00","19:00","20:00"],
data:{
first:[400, 600, 700, 700, 1000, 400, 400, 600],
second:[400,300,200,400,800,300,900,600],
tricyclic:[100, 200, 300, 400, 500, 600,700, 500],
}
})
})
最后调用
$.get({
url:ajaxURL.sdfx_count,
dataType:"json"
}).then((res)=>{
t.loopEcharts(res.time,res.data.first,res.data.second,res.data.tricyclic)
})
结果