首先来看看实现出来的效果

图例1

代码示例：（可直接粘贴到echarts 查看效果）

 const option ={
    title: {},
    tooltip: {
      trigger: 'item',
      show: false,
    },
    color: ['#0938F7', '#69B9FE', '#AE87FD'],
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        show: true,
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#E6EBF1'], // 网格线颜色
            width: 1, // 网格线宽度
            type: 'solid' // 网格线类型
          }
        },

        axisTick: {}
      }
    ],
    yAxis: [
      {
        type: 'value',
        show: true,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        }
      }
    ],
    grid: {
      left: 0,
      right: 10,
      bottom: 2,
      top: 20,
      containLabel: true,
      show: true, // 显示网格
      backgroundColor: 'rgba(0,0,0,0)', // 网格背景色，默认透明
      borderWidth: 1, // 网格边框宽度
      borderColor: '#ccc' // 网格边框颜色
    },
    series: [
      {
        data: [820, 932, 901, 934, 932, 901, 12, 820, 932, 901, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },

      },
      {
        // 底部区域分割线
        type: 'scatter',
        symbolSize: 5,
        data: [],
        markLine: {
          symbolSize: 10,
          label: {
            show: true,
            distance: 5,
            position: 'middle',
            fontWeight: 'bold'
          },
          lineStyle: {
            color: '#FF9900'
          },
          data: [
            [
              {
                symbol: 'triangle',
                coord: ['Fri', 901]
              },
              {
                symbol: 'triangle',
                name: '区间1',
                coord: ['Sun', 901]
              }
            ],
          ]
        },
      },
      {
        name: '标记线',
        type: 'scatter',
        symbolSize: 0,
        markLine: {
          lineStyle: {
            color: '#FF9900',
          },
          data: [
            [
              {
                symbol: 'none',
                coord: [4, 1050]
              },
              {
                symbol: 'none',
                name: '区间1',
                coord: [4, 0]
              }
            ],
            [
              {
                symbol: 'none',
                coord: [6, 1050]
              },
              {
                symbol: 'none',
                name: '区间1',
                coord: [6, 0]
              }
            ],
          ]
        }
      }
    ]
  }