实现一个向下钻取的效果:柱形图点击柱子则钻取,点击柱图空白返回。
line_chart1 = echarts.init(document.getElementById('lineChart1'));
line_option1={
backgroundColor:'#0B2F64',
title : {
show:true,
text: '这是一个标题',
left: 'center',
top:10,
textStyle : {
color: '#09F',
fontSize:16
},
subtextStyle:{
color: '#B7E1FF',
fontSize:12
}
},
xAxis: {
axisLabel: {
interval:0,
textStyle: {
color: '#B7E1FF',
fontSize:12
}
},
axisLine:{
lineStyle:{
color:'#09F'
}
},
axisTick:{
lineStyle:{
color:'#09F'
}
},
},
yAxis: {
show:false,
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#FFF',
fontSize:12
}
},
legend:{
show:false
},
grid:{
left:80,
top:60,
bottom:25
},
series: [
{
name: '序列1',
type: 'bar',
label:{
show:true,
position:'top',
color:'#FFF'
},
itemStyle:
{
normal: {
color:function(para){
return (para['name']==currentYear)?'#CA2E3F':color[1];
}
},
emphasis: {color: color[2]}
},
}]
};
line_chart1.on('click', function (params) {
params.event.event.stopPropagation();
if(currentYear!="")
{
currentYear="";
yearChanged=true;
refreshData();
}
else
{
currentYear=params.name;
yearChanged=true;
refreshData();
}
});
$('#lineChart1').on("click",function(){
if(currentYear!="")
{
currentYear="";
yearChanged=true;
refreshData();
}
});
主要是params.event.event.stopPropagation();这一句,点击柱子,需要阻止事件冒泡,这样点击柱子才不会激起背景的响应。