var xData = ['2018', '2019', '2020', '2021', '2022', '2023'];
yData1 = [12249, 87985, 120280, 145407, 207608, 223175];
yData2 = [243, 418, 782, 941, 1073, 1179];
yData3 = [9, 14, 16, 17, 17, 18];
yData4 = [21.18, 21.75, 20.68, 18.77, 18.08, 16.23],
borderData = [],
legend = ["流程数量", "流程模板数量", "流程模板分类数量", "流程平均办理时长"],
colorArr = [{
start: "rgba(0, 154, 79,",
end: "rgba(0, 154, 79, 0.6)"
},
{
start: "rgba(66, 165, 245,",
end: "rgba(66, 165, 245, 0.6)"
},
{
start: "rgba(205, 178, 73,",
end: "rgba(160, 121, 60, 0.6)"
},
{
color: "#EC6941"
}
];
var normalColor = "#000000";
// var fontSize = 20;
let seriesData = [];
var borderHeight = 4;
xData.forEach(element => {
borderData.push(borderHeight);
});
[yData1, yData2, yData3, yData4].forEach((item, index) => {
var obj1 = {};
if (index < 3) {
obj1 = {
name: legend[index],
type: "bar",
stack: legend[index],
data: item,
barWidth: "14",
barMinHeight: index == 0 ? 30 : index == 1 ? 15 : 10,
label: {
show: true,
position: "insideTop",
distance: -12,
fontSize: 10,
color: colorArr[index].start + "1)"
},
itemStyle: {
normal: {
barBorderRadius: [20, 20, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorArr[index].start + "1)"
},
{
offset: 1,
color: colorArr[index].end
}
],
globalCoord: false
}
}
}
};
seriesData.push(obj1);
} else {
var obj3 = {
name: legend[index],
type: "line",
yAxisIndex: 1,
smooth: false,
symbol: "circle",
symbolSize: 8,
lineStyle: {
normal: {
width: 2
}
},
label: {
show: true,
position: "insideTop",
distance: -12,
fontSize: 10,
color: colorArr[index].start + "1)"
},
itemStyle: {
normal: {
color: colorArr[index].color,
borderColor: "#fff",
borderWidth: 1
}
},
data: item,
};
seriesData.push(obj3);
}
});
option = {
backgroundColor: "#ffffff",
grid: {
left: "3%",
top: "12%",
right: "3%",
bottom: '2%',
containLabel: true
},
legend: {
show: true,
// icon: "rect",
itemWidth: 16,
itemHeight: 9,
left: "center",
top: "14",
textStyle: {
color: "#000"
},
data: legend
},
tooltip: {
trigger: "axis",
backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
textStyle: {
color: '#787878'
},
borderColor: "rgba(18, 57, 60, .8)",
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0, 11, 34, .4)',
}
},
formatter: function (params) {
var str = "";
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName !== "") {
str +=
params[i].name +
':' +
params[i].seriesName +
'-' +
params[i].value +
"<br/>";
}
}
return str;
}
},
xAxis: [{
name: "(年份)",
nameTextStyle: {
color: normalColor,
fontSize: 12
},
type: "category",
data: xData,
axisPointer: {
type: "shadow"
},
axisLabel: {
interval: 0,
align: 'center',
textStyle: {
color: normalColor,
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, .4)'
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}],
yAxis: [{
type: "value",
name: "(个)",
nameTextStyle: {
color: normalColor,
fontSize: 12
},
// "min": 0,
// "max": 50,
axisLabel: {
formatter: "{value}",
textStyle: {
color: normalColor,
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, .4)'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: 'rgba(0, 0, 0, .3)'
}
}
},
{
type: "value",
name: "(小时)",
nameTextStyle: {
color: normalColor,
fontSize: 12
},
// min: -100,
// max: 100,
axisLabel: {
formatter: "{value}",
textStyle: {
color: normalColor,
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, .4)'
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,0.2)"
}
}
}
],
series: seriesData
};