发布于2021-12-04 01:04 阅读(2204) 评论(0) 点赞(11) 收藏(2)
var t = document.getElementById("cardChart");
t.style.width = window.offsetWidth + "px";
var cardChart = echarts.init(t),
options = {
color: ['#3398DB'],
title: {
left: "right",
//text: new Date().getFullYear() + "年数据",
textStyle: {
color: "#2c2c2c",
fontSize: 14,
fontWeight: 500
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: "category",
data: dataYearCountName,
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0, //强制文字产生间隔
rotate: 45, //文字逆时针旋转45°
textStyle: { //文字样式
color: "black",
fontSize: 14,
fontFamily: 'Microsoft YaHei'
}
}
}],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "例数",
type: "bar",
barWidth: "60%",
data: dataYearCountNum
}
]
};
//-----------------从这里开始 -----------------
//cardChart 柱状图名称
cardChart.setOption(options);
cardChart.off('click'); //防止触发两次点击事件
cardChart.getZr().on('click', (params) => {
let pointInPixel = [params.offsetX, params.offsetY];
if (cardChart.containPixel('grid', pointInPixel)) {
let pointInGrid = cardChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = cardChart.getOption(); //图表object对象
var op = cardChart.getOption();
//获得图表中点击的列
var month = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(month);
console.log(handleIndex, seriesObj);
};
});
作者:大师兄
链接:http://www.qianduanheidong.com/blog/article/247498/49342b7f0dbefaa88225/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!