Version

5.0.2

Link to Minimal Reproduction

let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 1000; let date = []; let data = [Math.random() * 300]; for (let i = 1; i < 20; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); } option = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: 'Large Area Chart' }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: date, axisLabel:{ interval:0 }, splitArea: { show: true, areaStyle: { color: ['red', 'red','red', 'red','','','','','','','','','','','','','','','',''] } } }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, dataZoom: [ { type: 'inside', start: 0, end: 100 }, { start: 0, end: 100 } ], series: [ { name: 'Fake Data', type: 'line', symbol: 'none', sampling: 'lttb', itemStyle: { color: 'rgb(255, 70, 131)' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(255, 158, 68)' }, { offset: 1, color: 'rgb(255, 70, 131)' } ]) }, data: data } ] };

Steps to Reproduce

Current Behavior

Expected Behavior

Work out bug

Environment

- Browser: Chrome 96.0.4664.55
Framework Vue@2

Any additional comments?

No response