如何曲线图如何左右滚动,以及设置被覆盖的区域有颜色
initCharts() {
const ec = echarts as any;
const myChart = echarts.init(document.getElementById('lineChart'));
const option = {
roam: false, // 禁止滚轮事件
color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
tooltip: {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['A商品']
},
grid: { // 控制图表上下左右距离
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['02/1', '02/2', '02/3', '02/4', '02/5', '02/6', '02/7', '02/8', '02/1', '02/2', '02/3',
'02/4', '02/5', '02/6', '02/7', '02/8']
},
yAxis: {
x: 'center',
type: 'value',
},
series: [
{
name: 'A商品',
type: 'line',
smooth: true,
data: [1, 4, 6, 8, 10, 17, 12, 1, 16, 26, 35, 45, 54, 35, 1, 16, 26, 7, 5, 18, 24, 1, 16, 13, 8, 6, 16, 23],
areaStyle: {},
itemStyle: {
normal: {
// 折线点的颜色
color: '#ff2d52',
lineStyle: {
// 折线的颜色
color: '#ff2d53'
}
}
}
}],
// 可左右滑动
dataZoom: [{
show: false,
realtime: true,
start: 0,
end: 50
}, {
type: 'inside',
realtime: false,
start: 0,
end: 50,
zoomOnMouseWheel: false, // 禁用滚轮
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}