1 问题
echarts 柱状图tooltip显示框超出外层div,导致部分被挡住如下所示:
option = {
title : {
text: '世界人口总量',
subtext: '数据来自网络'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['2011年', '2012年','2013年','2014年','2015年','2016年','2017年','2018年']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['巴西','印尼','美国','印度','中国','世界人口(万)']
}
],
series : [
{
name:'2011年',
type:'bar',
data:[18203, 23489, 29034, 104970, 131744, 630230]
},
{
name:'2012年',
type:'bar',
data:[19325, 23438, 31000, 121594, 134141, 681807]
},
{
name:'2013年',
type:'bar',
data:[19325, 23438, 31000, 121594, 134141, 681807]
},
{
name:'2014年',
type:'bar',
data:[19325, 23438, 31000, 121594, 134141, 681807]
},
{
name:'2015年',
type:'bar',
data:[19325, 23438, 31000, 121594, 134141, 681807]
},
{
name:'2016年',
type:'bar',
data:[19325, 23438, 31000, 121594, 134141, 681807]
},
{
name:'2017年',
type:'bar',
data:[19325, 23438, 31000, 121594, 134141, 681807]
},
{
name:'2018年',
type:'bar',
data:[19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
2 方法
修改tooltip :
tooltip: {
trigger: 'axis',
position: function(point, params, dom, rect, size){ // point: 鼠标位置
var tipHeight = point[1] + size.contentSize[1]; // contentSize: 提示dom 窗口大小
if(tipHeight > size.viewSize[1] ){ // viewSize: echarts 容器大小
return [point[0]+40, point[1]-size.contentSize[1]];
} else if(point[1] < size.contentSize[1]){
return [point[0]+40, point[1]+20];
} else {
return point;
}
},
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
}