echarts 柱状图点击事件

最新推荐文章于 2025-07-08 17:05:58 发布

杨葱儿

最新推荐文章于 2025-07-08 17:05:58 发布

阅读量2.6w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： ECharts

本文链接：https://blog.youkuaiyun.com/weixin_44285250/article/details/90700943

ECharts 专栏收录该内容

1 篇文章

订阅专栏

博客围绕Echarts柱状图点击事件展开，虽未给出具体内容，但可知聚焦于该技术点，在前端开发中，处理图表点击事件可实现交互功能，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
	<div style="margin: 0;padding: 5px;">
		<div id="main" style="width: 100%;height:228px;"></div>
	</div>
</body>

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
	grid: {    
		left: '5%',
		   //距离左边的距离
		    right: '5%', //距离右边的距离
		    bottom: '10%', //距离下边的距离
		    top: '12%', //距离上边的距离
		    
	},
	title: {
		text: data.n + '年',
		x: 'right',
		textStyle: {
			fontSize: 12,
			color: '#777'
		}
	},
	tooltip: {
		show: true, //隐藏鼠标点击后的提示
	},
	legend: {
		data: ['总额:' + data.count + '元'],
		itemWidth: 10,
		x: 'left',
		textStyle: { //图例文字的样式
			color: '#FF6353',
		},
	},
	xAxis: {
		data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
		axisLabel: {
			interval: 0, //x轴文字显示完整（不保证）
			rotate: 0, //倾斜角度搭配上面行显示完全
			textStyle: {
				fontSize: 12,
				color: '#aaa'
			}
		},
		axisLine: {
			//设置地名及x轴线条颜色
			show: true,
			lineStyle: {
				color: '#aaa',
			}
		}
	},
	yAxis: {
		show: false,
	},
	series: [{
		name: '总额:' + data.count + '元',
		type: 'bar',
		data: data.data,
		barWidth: '18', //柱形宽度
		// 普通样式。
		itemStyle: {
        // 高亮样式。
		emphasis: {
			itemStyle: {
				// 高亮时点的颜色。
				color: '#62A7D1',
			}
		},
			normal: {
				//柱形图圆角，初始化效果
				barBorderRadius: [3, 3, 0, 0],
				// 点的颜色。
				color: '#A1CAE3',
			}
		},
		// 高亮样式。
		emphasis: {
			itemStyle: {
				// 高亮时点的颜色。
				color: '#62A7D1',
			}
		},
		label: {
			normal: {
				show: true, //显示数字
				position: 'top', //这里可以自己选择位置
				textStyle: {
					color: '#aaa', //文字颜色
					fontSize: 12,
				}
			}
		}
	}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

//点击事件
myChart.on('click', function(params) {
    console.log(params); 
	var name = parseInt(params.name);
});