Echarts在线免费图表

 
            let componentsTime = []
let oldValue = []
let newValue = []
for (let i = 0; i < 24; i++) {
   if(i < 10) {
   componentsTime.push(`0${i}:00`)
   }else {
   componentsTime.push(`${i}:00`)
   }
   oldValue.push(Math.floor(Math.random() * (50 - 10 + 1)) + 10)
   newValue.push(Math.floor(Math.random() * (50 - 10 + 1)) + 10)
}

option = {
   legend: {
      show: true,
      x: 'right',
      y: '25px',
      itemGap: 16,
      itemWidth: 10,
      itemHeight: 2,
      textStyle: { // 图例文字的样式
         fontSize: 12
      },
      data: [{
         name: '历史均值',
         icon: 'roundRect',
         textStyle: {
            color: '#687786',
            padding: [3, 0, 0, 3]
         }
      },
      {
         name: '优化后',
         icon: 'roundRect',
         textStyle: {
            color: '#34A466',
            padding: [3, 0, 0, 3]
         }
      }]
   },
   grid: {
      left: 35,
      top: 60,
      right: 20,
      bottom: 20
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'cross'
      },
      formatter(params) {
         let str = ''
         if (params.length > 1) {
            str = '时间：' + params[0].name + '<br>' +
               '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
               params[0].color + ';margin-right: 5px;border-radius: 50%;}"></i>' + params[0].seriesName + '：' + params[0].data + 'km/h' +
               '<br><i style="display: inline-block;width: 10px;height: 10px;background: ' +
               params[1].color + ';margin-right: 5px;border-radius: 50%;}"></i>' + params[1].seriesName + '：' + params[1].data + 'km/h'
         } else {
            str = '时间：' + params[0].name + '<br>' +
               '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
               params[0].color + ';margin-right: 5px;border-radius: 50%;}"></i>' + params[0].seriesName + '：' + params[0].data + 'km/h'
         }
         return str
      }
   },
   dataZoom: {
      type: 'inside',
      xAxisIndex: [0, 0],
      start: 0,
      end: 100
   },
   xAxis: {
      type: 'category',
      data: componentsTime,
      axisLine: {
         lineStyle: {
            color: '#57617B',
         }
      },
      axisTick: {
         alignWithLabel: true
      },
      boundaryGap: false
   },
   yAxis: {
      type: 'value',
      splitLine: {
         show: false
      },
      nameTextStyle: {
         fontFamily: 'Microsoft YaHei'
      },
      axisLabel: {
         fontSize: 10
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: '#57617B',
         }
      }
   },
   series: [
      {
         name: '历史均值',
         type: 'line',
         data: oldValue,
         smooth: false,
         symbolSize: 4,
         showSymbol: false,
         symbol: 'circle',
         lineStyle: {
            normal: {
               color: '#687786'
            }
         },
         itemStyle: {
            color: '#687786',
            borderColor: 'rgba(255,255,255,0.3)',
            borderWidth: 2
         },
         label: {
            show: false
         },
         areaStyle: {
            normal: {
               barBorderRadius: 4,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                     {
                        offset: 0,
                        color: 'rgba(104,119,134,1)'
                     },
                     {
                        offset: 1,
                        color: 'rgba(104,119,134,0)'
                     }
                  ]
               )
            }
         }
      },
      {
         name: '优化后',
         type: 'line',
         data: newValue,
         smooth: false,
         symbolSize: 4,
         showSymbol: false,
         symbol: 'circle',
         lineStyle: {
            normal: {
               color: '#34A466'
            }
         },
         itemStyle: {
            color: '#34A466',
            borderColor: 'rgba(255,255,255,0.3)',
            borderWidth: 1
         },
         label: {
            show: false
         },
         areaStyle: {
            normal: {
               barBorderRadius: 4,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                     {
                        offset: 0,
                        color: '#34A466'
                     },
                     {
                        offset: 1,
                        color: 'rgba(52, 164, 102, 0)'
                     }
                  ]
               )
            }
         }
      }
   ]
};