啊啊啊
配置项如下
option = {
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"label": {
"backgroundColor": "#283b56"
}
}
},
"grid": {
"top": "5%",
"left": "5%",
"right": "5%",
"bottom": "25%"
},
"xAxis": [{
"type": "category",
"data": ["04-17", "04-18", "04-19", "04-20", "04-21", "04-22"],
"axisLine": {
"lineStyle": {
"color": "#fff"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#333"
}
}
}, {
"show": false,
"type": "category",
"data": ["2019-04-17 09", "2019-04-17 10", "2019-04-17 11", "2019-04-17 12", "2019-04-17 13", "2019-04-17 14", "2019-04-17 15", "2019-04-17 16", "2019-04-17 17", "2019-04-17 18", "2019-04-17 19", "2019-04-17 20", "2019-04-17 21", "2019-04-17 22", "2019-04-17 23", "2019-04-18 00", "2019-04-18 01", "2019-04-18 02", "2019-04-18 03", "2019-04-18 04", "2019-04-18 05", "2019-04-18 06", "2019-04-18 07", "2019-04-18 08", "2019-04-18 09", "2019-04-18 10", "2019-04-18 11", "2019-04-18 12", "2019-04-18 13", "2019-04-18 14", "2019-04-18 15", "2019-04-18 16", "2019-04-18 17", "2019-04-18 18", "2019-04-18 19", "2019-04-18 20", "2019-04-18 21", "2019-04-18 22", "2019-04-18 23", "2019-04-19 00", "2019-04-19 01", "2019-04-19 02", "2019-04-19 03", "2019-04-19 04", "2019-04-19 05", "2019-04-19 06", "2019-04-19 07", "2019-04-19 08", "2019-04-19 09", "2019-04-19 10", "2019-04-19 11", "2019-04-19 12", "2019-04-19 13", "2019-04-19 14", "2019-04-19 15", "2019-04-19 16", "2019-04-19 17", "2019-04-19 18", "2019-04-19 19", "2019-04-19 20", "2019-04-19 21", "2019-04-19 22", "2019-04-19 23", "2019-04-20 00", "2019-04-20 01", "2019-04-20 02", "2019-04-20 03", "2019-04-20 04", "2019-04-20 05", "2019-04-20 06", "2019-04-20 07", "2019-04-20 08", "2019-04-20 09", "2019-04-20 10", "2019-04-20 11", "2019-04-20 12", "2019-04-20 13", "2019-04-20 14", "2019-04-20 15", "2019-04-20 16", "2019-04-20 17", "2019-04-20 18", "2019-04-20 19", "2019-04-20 20", "2019-04-20 21", "2019-04-20 22", "2019-04-20 23", "2019-04-21 00", "2019-04-21 01", "2019-04-21 02", "2019-04-21 03", "2019-04-21 04", "2019-04-21 05", "2019-04-21 06", "2019-04-21 07", "2019-04-21 08", "2019-04-21 09", "2019-04-21 10", "2019-04-21 11", "2019-04-21 12", "2019-04-21 13", "2019-04-21 14", "2019-04-21 15", "2019-04-21 16", "2019-04-21 17", "2019-04-21 18", "2019-04-21 19", "2019-04-21 20", "2019-04-21 21", "2019-04-21 22", "2019-04-21 23", "2019-04-22 00", "2019-04-22 01", "2019-04-22 02", "2019-04-22 03", "2019-04-22 04", "2019-04-22 05", "2019-04-22 06", "2019-04-22 07", "2019-04-22 08", "2019-04-22 09"]
}],
"yAxis": {
"type": "value",
"name": "(万KW)",
"axisLabel": {
"show": true,
"textStyle": {
"color": "#333"
},
"formatter": function (value, index) {
if (value <= 100) {
return value;
}
}
},
"axisTick": {
"show": false
},
"splitLine": {
"show": true,
"lineStyle": {
"color": "#fff",
"width": 2
}
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "#9DAAD5",
"width": 2
}
},
"data": [10,20,30,40,50]
},
"visualMap": [{
"show": false,
"dimension": 0,
"seriesIndex": 0,
"pieces": [{
"lte": 2,
"color": "rgba(255, 153, 153, 1)"
}, {
"gt": 2,
"lte": 8,
"color": "rgba(1, 149, 211, 1)"
}]
}, {
"show": false,
"dimension": 0,
"seriesIndex": 1,
"pieces": [{
"lte": 72,
"color": "rgba(255, 153, 153, 1)"
}, {
"gt": 72,
"lte": 192,
"color": "rgba(1, 149, 211, 1)"
}]
}],
"series": [{
"name": "AQI",
"type": "bar"
}, {
"xAxisIndex": 1,
"data": ["66", "61", "60", "59", "61", "59", "72", "74", "73", "63", "61", "74", "85", "87", "90", "93", "93", "95", "95", "92", "88", "89", "93", "102", "89", "77", "66", "61", "60", "56", "58", "74", "87", "70", "77", "82", "77", "65", "62", "60", "62", "68", "68", "73", "72", "65", "60", "55", "33", "55", "66", "-", "-", "-", "-", "88", "50", "60", "60", "70", "55", "100", "111", "122", "33", "213", "122", "56", "78", "88", "67", "77", "22", "33", "56", "55", "78", "87", "56", "33", "79", "93", "66", "88", "99", "200", "33", "66", "35", "67", "89", "93", "77", "", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
"type": "line",
"smooth": true,
"markArea": {
"data": [
[{
"itemStyle": {
"color": "rgba(255, 0, 0, 0.05)"
}
}, {
"xAxis": "2019-04-19 09"
}],
[{
"xAxis": "2019-04-19 09",
"itemStyle": {
"color": "rgba(51, 153, 255, 0.05)"
}
}, {}]
]
}
}]
}