var timeData = ['2019-9-12 00:00','2019-9-12 01:00','2019-9-12 02:00','2019-9-12 03:00','2019-9-12 04:00',
'2019-9-12 05:00','2019-9-12 06:00','2019-9-12 07:00','2019-9-12 08:00','2019-9-12 09:00',
'2019-9-12 10:00','2019-9-12 11:00','2019-9-12 12:00','2019-9-12 13:00','2019-9-12 14:00',
'2019-9-12 15:00','2019-9-12 16:00','2019-9-12 17:00','2019-9-12 18:00','2019-9-12 19:00',
'2019-9-12 20:00','2019-9-12 21:00','2019-9-12 22:00','2019-9-12 23:00'];
timeData = timeData.map(function (str) {
return str.replace('2019-', '');
});
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left:'15%'
},
legend: {
itemWidth: 20,
itemHeight: 15
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 40
}
],
xAxis : [
{
type : 'category',
axisTick: {
alignWithLabel: true
},
data: timeData
}
],
yAxis : [
{
name : '流量(m³/h)',
type : 'value',
inverse: false,
interval : 25,//强制设置坐标轴分割间隔。
axisTick:{ //x轴刻度线
show:false
},
splitLine: {
show: true
},
position: 'left',
nameGap: 15,//name距离顶部位置
nameTextStyle:{
padding: [0, 0, 0, 30]//name的位置
},
min: 0,
max: 400
},
{
name : '液位(m)',
type : 'value',
interval : 20,//强制设置坐标轴分割间隔。
axisTick:{ //x轴刻度线
show:false
},
splitLine: {
show: false
},
position: 'left',
offset: 55,
nameGap: 15,
min: 0,
max: 100
},
{
name : '降雨量(mm/h)',
type : 'value',
inverse: true,
interval : 1,//强制设置坐标轴分割间隔。
axisTick:{ //x轴刻度线
show:false
},
splitLine: {
show: false
},
position: 'left',
offset:120,
nameGap: 15,
min: 0,
max: 10,
//nameTextStyle:{
// padding: [-738, 0, 0, 0]//name的位置
//}
}
],
series : [
{
name:'流量(m³/h)',
type:'line',
symbolSize: 8,
data:[ 102,100,96,95,75,40,30,0,0,41,10,50,260,240,120,94,94,90,100,120,320,100.5,120,110]
},
{
name:'液位(m)',
type:'line',
yAxisIndex: 1,
symbolSize: 8,
data:[0.97,0.52,0.36,0.1,0,0,0,0,0,0,0.2,0.4,1.5,1.6,3,5,1.2,4.5,1.5,0,0,0,2.6,1.9,1.8]
},
{
name:'降雨量(mm/h)',
type:'line',
yAxisIndex: 2,
symbolSize: 8,
data: [0,0,0,0.005,0.017,0.017,0.017,0.017,0.011,0,0,0,3,0,0,0,0,0,0,0,0,1.5,2.4,2.6 ]
}
]
};
//获取dom容器
var myChart = echarts.init(document.getElementById("monitor_id"));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);