echarts折线图断点显示

1. 基本折线图配置

   ​
   option = {
       title: {
          text: '',
          x: 'center'
       },
       grid: {
          top: '20%',  
          left: '3%', 
          right: '10%',
          bottom: '5%',
          containLabel: true
       },
       xAxis: {
              name: '日期',
              type: 'category',
              axisLabel: {
              rotate: 0, // X 轴标签文字旋转角度  
              interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
              show: true,
            },  
            boundaryGap: true, //数据从 Y 轴起始
            data: ['02:00', '03:00', '04:00', '05:00']
       },
       yAxis: {
            name: 'm³',
            type: 'value',
       },
       tooltip: {  // tooltip 用于控制鼠标滑过或点击时的提示框（下一章展开讲）
             trigger: 'axis',  
             axisPointer: { // 坐标轴指示器配置项。  
               type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。 
               axis: 'auto', // 指示器的坐标轴。   
               snap: true, // 坐标轴指示器是否自动吸附到点上  
             },
             showContent: true,  
       },  
       toolbox: {   // 右上角的工具框（下一章展开讲）
             feature: {  
               saveAsImage: {} //下载按钮
             } 
       },
      series: [
           {
                 name: '累积水量',
                 data: [['02:00', 100], ['03:00', 200]],
                 type: 'line',
                 markPoint: {
                   data: [
                       { 
                           name: "最大值",
                           type: "max",
                       },
                       {
                           name: "最小值",
                           type: "min",
                       }
                   ],
                 },
               },
           {
                 name: '累积水量',
                 data: [['04:00', 300], ['05:00', 400]],
                 type: 'line',
                 markPoint: {
                   data: [
                       { 
                           name: "最大值",
                           type: "max",
                       },
                       {
                           name: "最小值",
                           type: "min",
                       }
                   ],
                 },
               }
       ],
   
   }
   
   ​

2. 图像显示