王钦
9 months ago
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