echarts实现多个y轴叠加

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);

你可能感兴趣的:(echarts,echarts多Y轴叠加,echarts,多Y轴)