Echarts在线免费图表

 
            let data1 = [175, 160, 153, 121, 156]
let data2 = [200, 140, 205, 162, 175]
let data3 = []
let data4 = ['13:00', '14:00', '15:00', '16:00', '17:00']
data1.forEach((item1,index)=>{
   if(item1>data2[index]){
    data3.push(
       {
        yAxis: item1,  //标注的Y轴位置
        xAxis: data4[index], //标注的X轴位置 
        value: item1  //标注的value值
      }
    )
   }else{
     data3.push(
        {
          yAxis: data2[index],  //标注的Y轴位置
          xAxis: data4[index], //标注的X轴位置 
          value: data2[index]  //标注的value值
        }
     )
   }
})
option = {
        backgroundColor: 'white',
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '8%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          borderWidth: 1,
          axisPointer: {
            type: 'shadow'
          },
          extraCssText: 'z-index:2'

        },
        legend: [{
          top: 'top',
          left: 'center',
          orient: 'horizontal',
          data: ['进水量', '出水量'],
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 15,
          borderRadius: 4,
          textStyle: {
            color: '#000',
            fontFamily: 'Alibaba PuHuiTi',
            fontSize: 14,
            fontWeight: 400
          }
        }],
        xAxis: {
          type: 'category',
          data: data4,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#393939' //X轴文字颜色
            }
          }
        },
        yAxis: [

          {
            type: 'value',
            name: '',
            nameTextStyle: {
              color: '#000',
              fontFamily: 'Alibaba PuHuiTi',
              fontSize: 14,
              fontWeight: 600
              // padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
            },
            nameGap: 30,  // 表现为上下位置
            axisLine: {
              show: true,
              lineStyle: {
                color: '#eeeeee'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#393939',
              fontSize: 14
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eeeeee'
              }
            }

          }

        ],
        series: [
          {
            name: '进水量',
            type: 'line',
            showAllSymbol: true, //显示所有图形。
            //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: 'white',
              borderWidth: '2',
              borderColor: '#5470c6',
              normal: {
                color: '#5470c6'//拐点颜色
              }
            },
            lineStyle: {
              color: '#5470c6'
            },
            markPoint:{
                data: data3
            },
            data: data1
          },
          {
            name: '出水量',
            type: 'line',
            showAllSymbol: true, //显示所有图形。
            symbolSize: 8, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: 'white',
              borderWidth: '2',
              borderColor: '#91cc75',
              normal: {
                color: '#91cc75'//拐点颜色
              }
            },
            lineStyle: {
              color: '#91cc75'
            },
            data: data2
          }
        ]
      }