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 + '
' + '' + params[0].seriesName + '：' + params[0].data + 'km/h' + '
' + params[1].seriesName + '：' + params[1].data + 'km/h' } else { str = '时间：' + params[0].name + '
' + '' + 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)' } ] ) } } } ] };

Echarts在线免费图表