您的位置：首页 > 其它

Echarts之柱状图获取点击柱子事件&自定义柱子颜色&类目轴纵向排列

2017-05-18 11:58 851 查看

<!DOCTYPE html>
<html style="height: 100%">

<head>
<meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
<p id="p">1001</p>
<script type="text/javascript" src="js/echarts3.js"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var see;
var option = {
color: ['#3398DB'],
title:{
text:'1001',//${HunitID}
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: deal(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']),
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [25, 10,30, 334, 390, 330, 220],
itemStyle:{
normal: {
color: function(params) {
var key = params.name.replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, "");
if(key  == 'Sun'){
see =params.dataIndex;
return "#FE8463";
}else{
return "#9BCA63";
}
}
}
}
}]
};
myChart.on('click', function(param) {
if(param.dataIndex == see){
console.log(param.dataIndex);
}
});
myChart.setOption(option);
function deal(x_catalog){
var list = [];
for (var i = 0; i < x_catalog.length; i++) {
var s = "";
for(var j = 0; j < x_catalog[i].length; j++){
s += x_catalog[i][j]+"\r\n";
}
list.push(s);
}
return list;
}
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航