echarts的图表双击事件@dblclick
<div class="barPieBox" @dblclick="leftondbClick()"
style="width: 98%;height:250px ;" >
<div :id=“leftBox1”
style="width:100%;height:100%;">
</div>
</div>
echarts的图表单机某个柱子、线或者饼图的一个区域
//可以获取到X轴Y轴
this[charts].on('click',function(params){
}
柱形图或者折线图【带滑动条的echarts】点击某个柱子显示附件柱子，鼠标滚轮放大缩小，并动态显示柱形图上面的文字，缩小不显示
dataZoom: [
{
height: 8,
realtime: true,
show: true,
start: (x.length > 17) ? 20 : 40, // 表示默认展示20%～80%这一段。
end: (x.length > 17) ? 50 : 70,
minValueSpan:0.6,//控制滚动到最大后还能一直滚动放大，导致缩小时体验感不好
},
{
height: 8,
realtime: true,
type: 'inside',
start: (x.length > 17) ? 20 : 40, // 表示默认展示20%～80%这一段。
end: (x.length > 17) ? 50 : 70,
minValueSpan:0.6,//控制滚动到最大后还能一直滚动放大，导致缩小时体验感不好
},
],
this[charts] = this.$echarts.init(document.getElementById(id));
this[charts].clear();
this[charts].setOption(option)
this[charts].resize()
//滚轮滚动，滚动到一定值，也就是柱子放大后，显示顶部文字，紧挨着 this[charts].resize()写
this[charts].on('datazoom', () => {
const datazoom = this[charts].getOption().dataZoom[0] // 用getOption获取改变的值
// console.log(datazoom, 'datazoom');
if (datazoom.end-datazoom.start<0.4) {
let allSeries=[]
y.forEach(item => {
item.label.show=true
allSeries.push(item)
})
y=allSeries
}else{
let allSeries=[]
y.forEach(item => {
item.label.show=false
allSeries.push(item)
})
y=allSeries
}
//重新渲染图表
this[charts].setOption({
series: y
})
})
//点击显示附近，也就是单个柱子或者线的点击事件，紧挨着 this[charts].resize()写
const zoomSize =2;
this[charts].on('click',function(params){
//监听点击的那个
_this[charts].dispatchAction({
type: 'dataZoom',
startValue:x[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: x[Math.min(params.dataIndex + zoomSize / 2, y.length - 1)],
});
})
