vue echarts dataZoom 选中区域数据获取
echarts 中选中区域数据获取
<div id="detectLineBox" style="width: 98%;height: 300px;margin-top: 8px"></div>
// 这个数据太麻烦了,我就不写json了,基本写到dataZoon 肯定数据这边没问题了
this.chartLine = echarts.init(document.getElementById('detectLineBox'));
let _this = this;
let option = {
legend: { //设置区分(哪条线属于什么)
data: ['持续检数值', '合格数量']
},
color: ['#e21335', '#0078c4'], //设置区分(每条线是什么颜色,和 legend 一一对应)
tooltip: {
trigger: "axis"
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
dataZoom: [
{
type:'slider',//slider表示有滑动块的,inside表示内置的
show:true,
xAxisIndex:[0],
start: 0,
end: 100
},
],
xAxis: {
name: '时间',
nameTextStyle: {
fontSize: 16,
padding: [0, 0, 10, 0]
},
type: "category",
boundaryGap: false,
data: dateData
},
yAxis: {
minInterval: 1,
name: '数值',
nameTextStyle: {
// color: '#FA6F53',
fontSize: 16,
padding: [0, 0, 10, 0]
},
axisLine: {
lineStyle: {
color: '#000000',
}
},
type: "value"
},
series: [
{
name: '持续检数值',
type: "line",
stack: "总量",
data: numberData
},
]
};
this.chartLine.setOption(option);
let that = this;
// 当滑动条变化时触发
this.chartLine.on('datazoom',function(params){
that.$nextTick(() => {
let xAxis = that.chartLine.getModel().option.xAxis[0]; // 获取x轴数据 我这个是时间
let series = that.chartLine.getModel().option.series[0]; // 获取数据
console.log(series); // 这个是获取的数据
console.log(series.data);
console.log(xAxis.rangeStart);//滑动条左端对应在xAxis.data的索引
console.log(xAxis.rangeEnd);//滑动条右端对应在xAxis.data的索引
})
});
// 下面我就不写了 拿到了变化时的索引,再用索引去取数据,还是比较简单的,主要是这个方法太难找,我找了两天
才找到, 记录下。