折线图echarts line' }, { name: '失败配置项内容和展示

横坐标滑动

配置项如下
       var base = +new Date(2000, 9, 3)
 var oneDay = 24 * 3600 * 1000
 var date = []
 var successData = [Math.random() * 200]
 var errorData = [Math.random() * 100]

 for (var i = 1; i < 1000; i++) {
     var now = new Date((base += oneDay))
     date.push(
         [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
     )
     const s = Math.abs(
         Math.round((Math.random() - 0.5) * 20 + successData[i - 1])
     )
     successData.push(s)
     const e = Math.abs(
         Math.round((Math.random() - 0.5) * 20 + errorData[i - 1])
     )
     errorData.push(e)
 }

 option = {
     dataZoom: {
         type: 'slider',
         xAxisIndex: [0],
         filterMode: 'filter',
         start: 50,
         end: 100
     },
     legend: {
         show: true,
         x: 'right',
         data: ['成功', '失败']
     },
     tooltip: {
         trigger: 'axis'
     },
     grid: {
         width: '85%',
         top: 40,
         left: '7%'
     },
     color: ['rgb(175, 227, 155)',
         'rgb(96, 172, 252)',
     ],
     xAxis: {
         name: '时间',
         type: 'category',
         data: date,
         boundaryGap: false
     },
     yAxis: {
         name: '测试',
         type: 'value',
         boundaryGap: [0, '100%'],
         splitLine: {
             show: false
         }
     },
     series: [{
             name: '成功',
             data: successData,
             type: 'line'
         },
         {
             name: '失败',
             data: errorData,
             type: 'line'
         }
     ]
 };
    
截图如下