柱状图空白处点击echarts shadow' } }, grid: [{ left: '3%配置项内容和展示
#基于小银银叔的板子， #出发点： 如图的最左边柱子太短了，点击起来不方便，实际应用也有这种情况，所以想试试看能不能在空白处点击就实现点击柱子的效果。 #实现了点击柱子上方空白处时，就点击柱子的效果，同时tooltip不显示多余的列的效果。 之前我研究过另外的解决方法（貌似就是调用了API中的一个方法）可惜现在回头想不起来了。。。。一万点悲伤。。。。 本人前端小白。。。如果有更好的方法，各位大声，一起分享咯
配置项如下
var seriesData = [10, 52, 200, 334, 390, 330, 220];
var seriesShadow= [400, 400, 400, 400, 400, 400, 400];
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
grid: [{
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},{
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
tooltip : {
show:false
},
}],
xAxis : [
{
gridIndex:0,
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
},{
show:false,
gridIndex:1,
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}
],
yAxis : [
{
gridIndex:0,
type : 'value'
},{
show:false,
gridIndex:1,
type : 'value'
}
],
series : [
{
xAxisIndex:0,
yAxisIndex:0,
name:'直接访问',
type:'bar',
data:seriesData,
},{
xAxisIndex:1,
yAxisIndex:1,
type:'bar',
data:seriesShadow,
itemStyle: {
normal: {
barBorderColor: 'transparent',
color: 'transparent'
}
}
}
]
};
myChart.on('click',function(params){
console.log(params);
var index = params.dataIndex;
for(var i = 0 ; i < seriesData.length ; i++){
if(seriesData[i].value){
seriesData[i] = seriesData[i].value;
}
if(index == i){
seriesData[i] = {
value : seriesData[i],
itemStyle:{
normal:{
color : 'red'
}
}
}
}
}
console.log(seriesData);
option.series[0].data=seriesData
myChart.setOption(option,true);
})
myChart.setOption(option);
截图如下
