let mockData = [{ time: '4-1', num: 0 },{ time: '4-2', num: 5 },{ time: '4-3', num: 8 },{ time: '4-5', num: 4 },{ time: '4-6', num: 6 }]
let xData = mockData.map(item => item.time)
let yData = mockData.map(item => item.num)

option = {
  backgroundColor: '#0A1934',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
        fontSize: 12
      },
    },
    textStyle: { fontSize: '100%' },
    formatter: v => {
      return `
        <div class='u-p-2'>
        <div class='fz-10'>日期：${v[0].axisValue}</div>
        <div class='fz-10 u-mt-2'>人数：${v[0].value}</div>
        </div>
      `
    }
  },
   xAxis: {
    type: 'category', boundaryGap: false, // 两边留白
    data: xData,
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#a8abbb',
        fontSize: 12
      }
    },
    axisLine: {
      lineStyle: {
        color: '#6c7087'
      }
    }
  },
  yAxis:{ 
    name:'', 
    type: 'value', 
    scale: true, 
    nameTextStyle: { color:'rgba(255,255,255,.5)', align:'right', padding:[0,10,0,0], fontSize: '100%'},
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#a8abbb',
        fontSize: 12
      }
    },
    axisLine: {
      lineStyle: {
        color: '#6c7087'
      }
    }
  },
  series: {
    name: '', type: 'line', stack: '',
    areaStyle: {
	  color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'rgba(236, 99, 123, .5)'
      }, {
        offset: 1,
        color: 'rgba(102, 212, 250,.0)'
      }])
	},
    lineStyle: { 
	  color: { 
        type: 'linear',x: 0, y: 1, x2: 0, y2: 0,
        colorStops: [
		  { offset: 0, color: '#3a76f6' },
		  { offset: .25, color: '#66d4fa' }, 
		  { offset: .75, color: '#f8d470'}, 
		  { offset: 1, color: '#ec637b'}
		],
        global: false
      },
	  width:2
	},
    symbol:'none',  
    data: yData,
    markLine: {
      symbol: 'none',
      data: [{
        name: "人数最高峰",
        xAxis: '4-3',
        lineStyle: {
          color: '#eb6272',
          type: "dashed",
          width: 0
        },
        label: { 
          show: true, formatter: '4-3日\n人数最高峰\n',
          align:'center',
          distance: [0,-10],
          fontSize: 14,
        }
      },{
        name: "人数归零",
        xAxis: '4-6',
        symbol: 'circle',
        symbolSize: 10,
        lineStyle: {
          color: '#66cfef',
          type: "dashed",
          width: 1
        },
        label: { 
          show: true, formatter: '4-6日\n人数归零',
          fontSize: 14,
          align:'center',
        }
      }]
    }
  }
};

点击运行 》