echarts柱状图点击事件
2023-12-27 17:03:10
常规事件
但是此方法在没有数据时点击事件不生效。
myChart.on('click',params => {
console.log(params.value);
});
```
## 百度出的事件
```javascript
async function initEchart() {
var chartDom = document.getElementById('mychart');
var myChart = echarts.init(chartDom);
let data = [];
let valueData=[];
let nameData = [];
await proxy.api.apiInfogetDustRelatedProcess().then((res) => {
if (res.success) {
for (let i of res.data) {
valueData.push(i.dustRelatedProcessType);
nameData.push(proxy.funEcho(i.dustRelatedProcessType, state.dust_technology));
i.industryType = proxy.funEcho(i.dustRelatedProcessType, state.dust_technology);
data.push(i.dustRelatedProcessNum);
}
}
})
const option = {
tooltip: {
trigger: 'axis',
},
xAxis: {
//valueData 我自己存数据需要用的单独加的
valueData:valueData,
type: 'category',
data: nameData,
axisLabel: {
show: true,
color: "#6BABF2",
formatter: function (value) {
var str = "";
var num = 2; //每行显示字数
var valLength = value.length; //该项x轴字数
var rowNum = Math.ceil(valLength / num); // 行数
if (rowNum > 1) {
for (var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
},
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
color: "#6BABF2",
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
}
},
grid: {
top: '15',
left: '0',
right: '0',
bottom: '15',
containLabel: true
},
series: [
{
data: data,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
barWidth: '15',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "RGBA(16, 42, 93, 0.5)" },
{ offset: 0, color: "RGBA(2, 173, 245, 1)" },
]),
},
}]
};
option && myChart.setOption(option);
//主要代码
myChart.getZr().on('click',params=>{
let pointInPixel= [params.offsetX,params.offsetY];
if(myChart.containPixel('grid',pointInPixel)){
let pointInGrid=myChart.convertFromPixel({seriesIndex: 0},pointInPixel);
let xIndex=pointInGrid[0];
//valueData 是我自己单独用来存取数据的 可以打印option查看所有
console.log(xIndex,"xindex",option.xAxis.valueData[xIndex]);
let value=option.xAxis.valueData[xIndex];
openEnterprisesList('dustTechnology',value)
}
})
}
文章来源:https://blog.csdn.net/weixin_46352558/article/details/135246781
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!