vue echarts 柱状图因高度太低难以点击
·
initChart() {
var myChart = echarts.init(document.getElementById('lineChart'));
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
formatter: (comp, value) => {
const [serie] = comp;
return `${serie.name}: ${serie.value}`;
},
axisPointer: {
show: true,
status: 'shadow',
z: -1,
shadowStyle: {
color: '#e6f7ff',
},
type: 'shadow',
},
},
xAxis: {
type: 'category',
// data: ['超期', '1天', '1-3天', '3-5天', '5天以上']
data: this.typeList
},
yAxis: {
type: 'value'
},
series: [{
// data: [120, 200, 150, 80, 70],
data: this.numList,
type: 'bar',
//设置柱状图大小
barWidth : 40,
itemStyle: {
normal: {
color: "#5087EC",
}
},
}]
})
//点击事件
let that= this;
// 防止重复点击事件,反复调用接口
myChart.getZr().off('click');
// 柱状图因高度太低难以点击,设置点击阴影就触发点击事件
myChart.getZr().on('click', function (p) {
const pointInPixel = [p.offsetX, p.offsetY];
if (myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = myChart.convertFromPixel({seriesIndex: 0}, pointInPixel);
let xIndex = Number(pointInGrid[0]); //索引
let seriesObj = myChart.getOption(); //图表object对象
// console.log(xIndex, seriesObj);
let xLabels = seriesObj.xAxis[0].data; // 横坐标各标志名称数组
that.title = xLabels[xIndex] + '到货';
let type = xLabels[xIndex];
// console.log('type',type)
switch(type) {
case that.typeList[0]: that.thisType = '1'; break;
case that.typeList[1]: that.thisType = '2'; break;
case that.typeList[2]: that.thisType = '3'; break;
case that.typeList[3]: that.thisType = '4'; break;
case that.typeList[4]: that.thisType = '5'; break;
}
that.getDhsjListInfo(that.thisType);
that.visible = true;
};
});
//鼠标移入图形区域,变成可点击的小手事件
myChart.getZr().on('mousemove',function (params) {
var pointInPixel= [params.offsetX, params.offsetY];
if (myChart.containPixel('grid',pointInPixel)) {
myChart.getZr().setCursorStyle('pointer');
};
});
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)