let xData = ['2020', '2021', '2022', '2023', '2024', '2025']
let eventWarning = [3, 20, 122, 134, 55, 65]
let eventHandling = [11, 38, 23, 139, 66, 66]
let legend = ['事件预警', '事件处置']
option = {
backgroundColor: '#000',
color: ['#2CF1FF', '#3456FF'],
timeline: {
show: false,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
backgroundColor: "rgba(255,255,255,0.75)",
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
textStyle: {
fontSize: 14,
color: "#000",
},
formatter: "{a}<br/>{b} :\n\n{c} 个",
},
legend: {
top: 0,
right: "center",
itemWidth: 16,
itemHeight: 6,
itemGap: 20,
icon: "horizontal",
textStyle: {
color: "#ffffff",
fontSize: 16,
},
data: legend,
},
grid: [
// 左边
{
show: false,
left: "5%",
top: "15%",
bottom: "2%",
containLabel: true,
width: "40%",
},
// 中间
{
show: false,
left: "51%",
top: "15%",
bottom: "4%",
width: "0%",
},
// 右边
{
show: false,
right: "5%",
top: "15%",
bottom: "2%",
containLabel: true,
width: "40%",
},
],
xAxis: [
{
type: "value",
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
axisLabel: {
show: true,
verticalAlign: 'middle',
textStyle: {
color: 'rgba(255, 255, 255, 0.7)',
fontSize: 12,
},
},
splitLine: {
show: false,
},
},
{
gridIndex: 1,
show: false,
},
{
gridIndex: 2,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
verticalAlign: 'middle',
textStyle: {
color: 'rgba(255, 255, 255, 0.7)',
fontSize: 12,
},
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
type: "category",
inverse: true,
position: "right",
axisLine: {
show: false
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: xData,
},
{
gridIndex: 1,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: "rgba(255, 255, 255, 0.7)",
fontSize: 16,
align: "center",
},
data: xData.map(function (value) {
return {
value: value,
textStyle: {
align: "center",
},
};
}),
},
{
gridIndex: 2,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: xData,
},
],
series: [
{
name: legend[0],
type: "bar",
barWidth: 10,
stack: "1",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#2CF1FF",
},
{
offset: 1,
color: "#3456FF",
},
]),
},
label: {
show: false,
position: "left",
color: "rgba(255, 255, 255, 0.7)",
},
data: eventWarning,
animationEasing: "elasticOut",
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: legend[1],
type: "bar",
stack: "2",
barWidth: 10,
xAxisIndex: 2,
yAxisIndex: 2,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#FF2E62",
},
{
offset: 1,
color: "#FF5FAC",
},
]),
},
label: {
show: false,
position: "right",
color: "rgba(255, 255, 255, 0.7)",
},
data: eventHandling,
animationEasing: "elasticOut",
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
],
};