<script src="https://gallerybox.echartsjs.com/dep/echarts/latest/echarts.min.js"></script>
<div id="main" ref="main" style="height:600px;"></div>
var myChart = echarts.init(document.getElementById("main")); var option = { color: ['#007AFF', '#5756D6'], grid: { x: '0', y: '0', '100%', height: '100%' }, xAxis: [{ type: 'category', show: false, splitLine: { show: false }, boundaryGap: false, axisLine: { show: true, lineStyle: { color: '#DCDCDC' } }, axisTick: { show: false }, data: [ '20190723', '20190724', '20190725', '20190726', '20190729', '20190730', '20190731', '20190801', '20190802', '20190805', '20190806', '20190807', '20190808', '20190809', '20190812', '20190813', '20190814', '20190815', '20190816', '20190819' ], axisLabel: { color: '#B3B3B3', fontSize: 33.12 } }], yAxis: [{ type: 'value', z: 3, max: 3.69, min: 3.4, scale: true, show: false }], series: [{ type: 'line', lineStyle: { 1.6560000000000001 }, showSymbol: false, animation: false, smooth: true, data: [ '3.6000', '3.6300', '3.6300', '3.6500', '3.6200', '3.6300', '3.6100', '3.6100', '3.6000', '3.6100', '3.5700', '3.5600', '3.5300', '3.5000', '3.5100', '3.4500', '3.4700', '3.4400', '3.4700', '3.5500' ], areaStyle: { origin: 'start', color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#f50909' }, { offset: 0.11999999999999922, color: '#fff' }, { offset: 0.11999999999999922, color: 'transparent' } ] } } }, { type: 'line', lineStyle: { 0 }, showSymbol: false, animation: false, smooth: true, data: [ '3.6000', '3.6300', '3.6300', '3.6500', '3.6200', '3.6300', '3.6100', '3.6100', '3.6000', '3.6100', '3.5700', '3.5600', '3.5300', '3.5000', '3.5100', '3.4500', '3.4700', '3.4400', '3.4700', '3.5500' ], areaStyle: { origin: 'end', color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0.8, color: 'transparent' }, { offset: 0.8, color: '#fff' }, { offset: 1, color: '#4657f5' } ] } } } ] }; myChart.setOption(option);