Echarts实现多条折线，每条折线设置标线，超出变色显示

记录一下开发过程中实现的echart图表，要求有2条不同颜色折线，每个折线一个Y轴，每个折线一个标线，超出标线的值红色显示，每条折线显示最大最小值，效果如图：

直接上代码：

        var myChart = echarts.init(document.getElementById('test'));
        var option = {
          grid:{
            left:'10%',
            right:'20%'
          },
          tooltip: {//标线
            trigger: 'axis',
          },
          legend: {
            show:false,
          },
          xAxis: {
            type: 'category',
            splitLine: {show: false},
            data: ['4月1日','4月2日','4月13日','4月4日','4月5日','4月6日','4月7日','4月8日','4月9日','4月10日','4月11日','4月12日','4月13日','4月14日','4月15日','4月16日','4月17日',]
          },
          yAxis: [
            {
              type: 'value',
              name: 'kw/h',
              position: 'left',
            },
            {
              type: 'value',
              name: 'm³',
              position: 'right',
              offset:40,
            }
          ],
          visualMap: [
            {
              seriesIndex: 0, //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
              top: 10,
              right: 10,
              textGap:5,
              itemWidth:15,
              show:false,//是否显示颜色块提示
              orient:'horizontal',
              left:'center',
              pieces: [
                {
                  gt: 2000,//小于，less than
                  lte: 100000,//大于，greater than
                  color: '#cc0033'
                }, 
              ],
              outOfRange: { // 在选中范围外的视觉元素。
                color: '#91cc75',//绿色
                // borderColor: '#6B8E23'
              }
            },
            {
              seriesIndex: 1, //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
              top: 10,
              right: 10,
              textGap:5,
              itemWidth:15,
              show:false,//是否显示颜色块提示
              orient:'horizontal',
              left:'center',
              pieces: [
                {
                  gt: 30000,//小于，less than
                  lte: 100000,//大于，greater than
                  color: '#cc0033'
                }, 
              ],
              outOfRange: { // 在选中范围外的视觉元素。
                color: '#73c0de',//蓝色
              }
            }
          ],
          series: [
            {
              name: '电耗',
              type: 'line',
              smooth:true,
              lineStyle:{
                normal:{type:'solid'}
              },
              markPoint:{
                data:[
                  {name:'最大值',type:'max'},
                  {name:"最小值",'type':'min'}
                ]
              },
              markLine: {
                silent: true,
                data: [
                  // { yAxis: 20000 },
                  { yAxis: 2000 },
                ]
              },
              itemStyle: {//标点颜色
                normal: {
                  color: '#91cc75'
                }
              },
              yAxisIndex: 0,//使用第二个y轴
              data: [1495, 1922, 2294, 2323, 2723, 2457, 1947, 1868, 3148, 2084, 1979, 2590, 2960, 3180, 2922, 2851, 2794,]
            },
            {
              name: '取水总量',
              type: 'line',
              smooth:true,
              lineStyle:{
                normal:{type:'solid'}
              },
              itemStyle: {//标点颜色
                normal: {
                  color: '#73c0de'
                }
              },
              markPoint:{
                data:[
                  {name:'最大值',type:'max'},
                  {name:"最小值",'type':'min'}
                ]
              },
              markLine: {
                silent: true,
                data: [
                  // { yAxis: 20000 },
                  { yAxis: 30000 },
                ]
              },
              yAxisIndex: 1,//使用第二个y轴
              data: [25950, 29630, 31280, 29422, 31668, 31458, 29084, 28679, 28751, 28794, 31273, 30369, 28822,22457, 23347, 25950, 29630,]
            },
          ]
        };
        option && myChart.setOption(option);