option = {
"title": [{
"text": "本日",
"x": "left",
"textStyle": {
"color": "rgba(219, 230, 255, 1)",
"fontSize": 16,
"fontWeight": "normal"
},
"top": "2%",
"left": 10
}, {
"text": "昨日",
"x": "left",
"textStyle": {
"color": "rgba(219, 230, 255, 1)",
"fontSize": 16,
"fontWeight": "normal"
},
"top": "47%",
"left": 10
}],
"backgroundColor": "#1B232E",
"tooltip": {
"trigger": "axis",
"axisPointer": {
"animation": false
},
formatter: function (parmas) {
var showHtml = "" + parmas[0].name + "<br/>本日<br/>";
for (var i = 0; i < parmas.length; i++) {
if (parmas[i].axisIndex === 0) {
showHtml += parmas[i].marker + parmas[i].seriesName + " : " + parmas[i].value[1] + "<br/>";
}
}
showHtml += "昨日<br/>";
for (var i = 0; i < parmas.length; i++) {
if (parmas[i].axisIndex === 1) {
showHtml += parmas[i].marker + parmas[i].seriesName + " : " + parmas[i].value[1] + "<br/>";
}
}
return showHtml;
},
textStyle: {
color: "rgba(255, 255, 255, 1)"
},
backgroundColor: "rgba(0,0,0,0.8)",
borderColor: "rgba(219, 230, 255, 0.8)",
},
"axisPointer": {
"link": {
"xAxisIndex": "all"
}
},
"color": [
"rgba(251, 210, 65, 1)",
"rgba(250, 109, 62, 1)",
"rgba(240, 244, 255, 1)",
],
"legend": [
{
"data": [
"Ia",
"Ib",
"Ic"
],
//"x": "center",
"textStyle": {
"color": "white",
"fontSize": 14,
},
"top": '2.5%',
right: 30,
"itemWidth": 20,
"itemHeight": 10,
"itemGap": 20
}, {
"data": [
"Ia ",
"Ib ",
"Ic "
],
//"x": "center",
"textStyle": {
"color": "white",
"fontSize": 14
},
"top": "47%",
right: 30,
"itemWidth": 20,
"itemHeight": 10,
"itemGap": 20
}],
"grid": [
{
"left": "10px",
"right": "10px",
"top": "10%",
"height": "36%",
"containLabel": true
},
{
"left": "10px",
"right": "10px",
"top": "55%",
"height": "36%",
"containLabel": true
}
],
"dataZoom": [
{
"type": "inside",
"show": true,
"realtime": true,
"start": 0,
"end": 100,
"zoomLock": true,
"xAxisIndex": [0, 1]
},
{
"type": "slider",
"realtime": true,
"start": 0,
"end": 100,
"textStyle": {
"color": "white"
},
"bottom": "3%",
"borderColor": "#43485E",
"dataBackground": {
"areaStyle": {
"color": "white"
}
}
}
],
"xAxis": [
{
"type": "category",
"axisLabel": {
"color": "#A9AEB2",
"fontSize": 12
},
"show": false,
"axisTick": {
"show": false
},
"axisLine": {
"onZero": true,
"lineStyle": {
"color": "#515773"
}
},
"data": [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00"
]
},
{
"gridIndex": 1,
"type": "category",
"axisLabel": {
"color": "#A9AEB2",
"fontSize": 12
},
"show": true,
"axisTick": {
"show": false
},
"axisLine": {
"onZero": true,
"lineStyle": {
"color": "#515773"
}
},
"data": [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00"
]
}
],
"yAxis": [
{
"name": "A",
"type": "value",
"axisLabel": {
"color": "#A9AEB2",
"fontSize": 12
},
"axisTick": {
"show": false
},
"axisLine": {
"show": false,
"lineStyle": {
"color": "#515773"
}
},
"nameTextStyle": {
"color": "#A9AEB2",
"fontSize": "12"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#43485E"
],
"width": 1,
"type": "solid"
}
}
},
{
gridIndex: 1,
"name": "A",
"type": "value",
"axisLabel": {
"color": "#A9AEB2",
"fontSize": 12
},
"axisTick": {
"show": false
},
"axisLine": {
"show": false,
"lineStyle": {
"color": "#515773"
}
},
"nameTextStyle": {
"color": "#A9AEB2",
"fontSize": "12"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#43485E"
],
"width": 1,
"type": "solid"
}
}
}
],
"series": [
{
"name": "Ia",
"type": "line",
"data": [
13, 18, 23, 30, 40, 50, 56, 62, 69, 75
],
"label": {
"show": false,
"color": "white"
},
"lineStyle": {
"width": 2.5
},
"symbol": "circle"
},
{
"name": "Ib",
"type": "line",
"data": [
25, 30, 40, 48, 52, 55, 60, 53, 62, 70,
],
"label": {
"show": false,
"color": "white"
},
"lineStyle": {
"width": 2.5
},
"symbol": "circle"
},
{
"name": "Ic",
"type": "line",
"data": [
80, 72, 65, 59, 54, 50, 42, 38, 32, 28
],
"label": {
"show": false,
"color": "white"
},
"lineStyle": {
"width": 2.5
},
"symbol": "circle"
},
{
"name": "Ia ",
"type": "line",
xAxisIndex: 1,
yAxisIndex: 1,
"data": [
13, 18, 23, 30, 40, 50, 56, 62, 69, 75
],
"label": {
"show": false,
"color": "white"
},
"lineStyle": {
"width": 2.5
},
"symbol": "circle"
},
{
"name": "Ib ",
"type": "line",
xAxisIndex: 1,
yAxisIndex: 1,
"data": [
25, 30, 40, 48, 52, 55, 60, 53, 62, 70,
],
"label": {
"show": false,
"color": "white"
},
"lineStyle": {
"width": 2.5
},
"symbol": "circle"
},
{
"name": "Ic ",
"type": "line",
xAxisIndex: 1,
yAxisIndex: 1,
"data": [
80, 72, 65, 59, 54, 50, 42, 38, 32, 28
],
"label": {
"show": false,
"color": "white"
},
"lineStyle": {
"width": 2.5
},
"symbol": "circle"
}
]
};