26 changed files with 716 additions and 209 deletions
@ -0,0 +1,210 @@ |
|||
import { param } from "jquery"; |
|||
|
|||
/* 数据 */ |
|||
let nameList = [ |
|||
"殷家林-大学城", |
|||
"大学城-孝里", |
|||
"孝里-安城", |
|||
"安城-平阴北", |
|||
"平阴北-平阴南", |
|||
"平阴南-东平", |
|||
"东平-梁山东", |
|||
"梁山东-嘉祥西" |
|||
]; // 类别
|
|||
let valueList1 = [[50,30, 52,20, 65,30, 45,10], [42,30,60,23, 45,34,55,16], [3, 5,1,0,5,2,5,4], [5,2,5,4,3, 5,1,0]]; |
|||
let valueList2 = [100, 40, 60, 90, 40, 60, 45, 72]; |
|||
let valueList3 = [40, 60, 45, 72, 50, 40, 60, 90]; |
|||
var options = { |
|||
color:['#21ffff','#1FA5F2','#F5F430','#F67826','#29A5D9','#1CB50B'], |
|||
grid: { |
|||
left: "1%", |
|||
right: "0", |
|||
top: "60px", |
|||
bottom: "0px", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
top: "0%", |
|||
right: "0", |
|||
icon:'rect', |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
itemHeight: 5, |
|||
itemWidth: 10, |
|||
data: [ |
|||
{ |
|||
name: "上报" |
|||
}, |
|||
{ |
|||
name: "已完成" |
|||
}, |
|||
{ |
|||
name: "已终止" |
|||
}, |
|||
{ |
|||
name: "自动结束" |
|||
}, |
|||
{ |
|||
name: "去年同期" |
|||
}, |
|||
{ |
|||
name: "平均", |
|||
icon:'diamond' |
|||
}, |
|||
], |
|||
}, |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: function (params) { |
|||
let result = '<span style="font-size:14px;font-weight: 600;color: #20253B">'+params[0].axisValue +'</span><br>'; |
|||
params.forEach(p => { |
|||
if(p.data > 0){ |
|||
result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + p.color + '"></span><span style="color: #20253B">'+ p.seriesName +'</span>'+'：'+(p.value)+ (p.seriesName==='平均'?'分钟':'起')+'<br>' |
|||
} |
|||
}); |
|||
return result; |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "起", |
|||
nameTextStyle: { |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
align: "right", |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 10, |
|||
color: "#fff" |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
type: "value", |
|||
name: "分钟", |
|||
nameTextStyle: { |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
align: "left", |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 10, |
|||
color: "#fff" |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "上报", |
|||
type: "pictorialBar", |
|||
stack:"总量", |
|||
symbol: "rect", |
|||
symbolMargin: 2, |
|||
symbolRepeat: "fixed", |
|||
symbolClip: true, |
|||
symbolSize: [18, 6], |
|||
barWidth: 10, |
|||
barGap: "40%", |
|||
data: valueList1[0], |
|||
}, { |
|||
name: "已完成", |
|||
type: "pictorialBar", |
|||
symbolRepeat: "fixed", |
|||
symbolMargin: 2, |
|||
symbol: "rect", |
|||
stack:"总量", |
|||
symbolClip: true, |
|||
symbolSize: [18, 6], |
|||
barWidth: 10, |
|||
barGap: "40%", |
|||
data: valueList1[1], |
|||
},{ |
|||
name: "已终止", |
|||
type: "pictorialBar", |
|||
symbolRepeat: "fixed", |
|||
symbolMargin: 2, |
|||
symbol: "rect", |
|||
symbolClip: true, |
|||
symbolSize: [18, 6], |
|||
barWidth: 10, |
|||
barGap: "40%", |
|||
data: valueList1[2], |
|||
},{ |
|||
name: "自动结束", |
|||
type: "pictorialBar", |
|||
symbolRepeat: "fixed", |
|||
symbolMargin: 2, |
|||
symbol: "rect", |
|||
symbolClip: true, |
|||
symbolSize: [18, 6], |
|||
barWidth: 10, |
|||
barGap: "40%", |
|||
data: valueList1[3], |
|||
}, |
|||
{ |
|||
name: "去年同期", |
|||
type: "pictorialBar", |
|||
symbolRepeat: "fixed", |
|||
symbolMargin: 2, |
|||
symbol: "rect", |
|||
symbolClip: true, |
|||
symbolSize: [18, 6], |
|||
barWidth: 10, |
|||
barGap: "40%", |
|||
data: valueList2, |
|||
}, |
|||
{ |
|||
name: "平均", |
|||
type: "line", |
|||
symbol: 'none', |
|||
smooth: true, |
|||
yAxisIndex: 1, |
|||
lineStyle: { |
|||
type:'dashed', |
|||
width: 1 |
|||
}, |
|||
data: valueList3, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,172 @@ |
|||
import { param } from "jquery"; |
|||
|
|||
/* 数据 */ |
|||
let nameList = [ |
|||
"殷家林-大学城", |
|||
"大学城-孝里", |
|||
"孝里-安城", |
|||
"安城-平阴北", |
|||
"平阴北-平阴南", |
|||
"平阴南-东平", |
|||
"东平-梁山东", |
|||
"梁山东-嘉祥西" |
|||
]; // 类别
|
|||
let valueList1 = [[50,30, 52,20, 65,30, 45,10], [42,30,60,23, 45,34,55,16], [3, 5,1,0,5,2,5,4], [5,2,5,4,3, 5,1,0]]; |
|||
let valueList2 = [100, 40, 60, 90, 40, 60, 45, 72]; |
|||
let valueList3 = [40, 60, 45, 72, 50, 40, 60, 90]; |
|||
var options = { |
|||
color:['#21ffff','#1FA5F2','#F67826','#1CB50B'], |
|||
grid: { |
|||
left: "1%", |
|||
right: "0", |
|||
top: "60px", |
|||
bottom: "0px", |
|||
containLabel: true, |
|||
}, |
|||
|
|||
legend: { |
|||
top: "0%", |
|||
right: "0", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
itemHeight: 5, |
|||
itemWidth: 10, |
|||
data: [ |
|||
{ |
|||
name: "客车", |
|||
}, |
|||
{ |
|||
name: "货车" |
|||
}, |
|||
{ |
|||
name: "专项车" |
|||
}, |
|||
{ |
|||
name: "去年同期" |
|||
}, |
|||
], |
|||
}, |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: function (params) { |
|||
let result = '<span style="font-size:14px;font-weight: 600;color: #20253B">'+params[0].axisValue +'</span><br>'; |
|||
params.forEach(p => { |
|||
result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + p.color + '"></span><span style="color: #20253B">'+ p.seriesName +'</span>'+'：'+(p.value)+ '辆<br>' |
|||
}); |
|||
return result; |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
formatter:function(value) |
|||
{ |
|||
var ret = "";//拼接加\n返回的类目项
|
|||
var maxLength = 4;//每项显示文字个数
|
|||
var valLength = value.length;//X轴类目项的文字个数
|
|||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
|||
if (rowN > 1)//如果类目项的文字大于3,
|
|||
{ |
|||
for (var i = 0; i < rowN; i++) { |
|||
var temp = "";//每次截取的字符串
|
|||
var start = i * maxLength;//开始截取的位置
|
|||
var end = start + maxLength;//结束截取的位置
|
|||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
|||
temp = value.substring(start, end) + "\n"; |
|||
ret += temp; //凭借最终的字符串
|
|||
} |
|||
return ret; |
|||
} |
|||
else { |
|||
return value; |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "辆", |
|||
nameTextStyle: { |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
align: "right", |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 10, |
|||
color: "#fff" |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "客车", |
|||
type: "pictorialBar", |
|||
symbolRepeat: "fixed", |
|||
symbolMargin: 2, |
|||
symbol: "rect", |
|||
symbolClip: true, |
|||
symbolSize: [18, 6], |
|||
barWidth: 10, |
|||
data: valueList1[0], |
|||
}, { |
|||
name: "货车", |
|||
type: "pictorialBar", |
|||
symbolRepeat: "fixed", |
|||
symbolMargin: 2, |
|||
symbol: "rect", |
|||
symbolClip: true, |
|||
symbolSize: [18, 6], |
|||
barWidth: 10, |
|||
data: valueList1[1], |
|||
},{ |
|||
name: "专项车", |
|||
type: "pictorialBar", |
|||
symbolRepeat: "fixed", |
|||
symbolMargin: 2, |
|||
symbol: "rect", |
|||
symbolClip: true, |
|||
symbolSize: [18, 6], |
|||
barWidth: 10, |
|||
data: valueList1[2], |
|||
}, |
|||
{ |
|||
name: "去年同期", |
|||
type: "line", |
|||
symbol: 'none', |
|||
smooth: true, |
|||
lineStyle: { |
|||
type:'dashed', |
|||
width: 1 |
|||
}, |
|||
data: valueList3, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
Loading…
Reference in new issue