echarts 柱状图点击事件

<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);
});

echarts 柱状图点击事件

猜你喜欢