layui.use(['echarts'], function() { let echarts = layui.echarts; var line1 = echarts.init(document.getElementById('line1'),null, { width: 600, height: 400 }); const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'] option = { backgroundColor: '#fff', tooltip: { show: false }, grid: { top: '10%', bottom: '6%', left: '6%', right: '6%', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { margin: 10, fontSize: 14, color: 'rgba(#999)' }, splitLine: { show: true, lineStyle: { color: '#939ab6', opacity: .15 } }, data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50'] },], yAxis: [{ type: 'value', offset: 15, max: 100, min: 0, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { margin: 10, fontSize: 14, color: '#999' }, splitLine: { show: false } }], series: [{ name: '2', type: 'line', z: 3, showSymbol: false, smoothMonotone: 'x', lineStyle: { width: 3, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(59,102,246)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(118,237,252)' // 100% 处的颜色 }] }, shadowBlur: 4, shadowColor: 'rgba(69,126,247,.2)', shadowOffsetY: 4 }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(227,233,250,.9)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(248,251,252,.3)' // 100% 处的颜色 }] } }, smooth: true, data: [20, 56, 17, 40, 68, 42] },{ name: '1', type: 'line', showSymbol: false, smoothMonotone: 'x', lineStyle: { width: 3, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(255,84,108)' }, { offset: 1, color: 'rgba(252,140,118)' }], false), shadowBlur: 4, shadowColor: 'rgba(253,121,128,.2)', shadowOffsetY: 4 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(255,84,108,.15)' }, { offset: 1, color: 'rgba(252,140,118,0)' }], false), }, smooth: true, data: [20, 71, 8, 50, 57, 32] } ] }; line1.setOption(option); window.onresize = function() { line1.resize(); } })