我们在制作echarts表格时,有时候会遇到提示框内容较多,会让提示框超出,展示不全数据,如下:
这种情况下需要在tooltips下增加一些属性:
1.confine: true
:这个配置的作用是让提示框(tooltip)限制在图表的区域内。
也就是说,当提示框的位置计算出来可能超出图表范围时,会自动调整提示框的位置,确保提示框完全在图表的可视范围内。
2.extraCssText: 'max - width: none; overflow: visible;'
max - width: none
:它表示取消对提示框最大宽度的限制。默认情况下,提示框可能会有一个最大宽度的限制,设置为none
后可以允许提示框根据内容的需要自由扩展宽度。overflow: visible
:这个属性的设置使得当提示框的内容超出其本身的区域时,允许内容溢出显示,而不是被裁剪掉,这样就可以保证提示框内的所有内容都能够展示出来。
这两个配置结合起来,可以在一定程度上解决提示框内容显示不完整的问题,尤其是当提示框的内容较多或者提示框容易超出图表区域的情况。
代码如下:
confine: true,
extraCssText: 'max - width: none; overflow: visible;',
全部代码如下:
var chartDom = document.getElementById('lineChart1');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
borderWidth: 1,
borderColor: '#2ba4d4',
padding: 5,
textStyle: {
fontSize: 16
},
confine: true,
extraCssText: 'max - width: none; overflow: visible;',
formatter: function(params) {
var relVal = params[0].name +'(波长/nm)'
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + params[i].seriesName+':'+ + params[i].value
}
return relVal
},
},
legend: {
right: '3%',
lineStyle: {
type: 'solid'
},
textStyle: {
color: '#fff',
},
itemWidth: 15,
itemHeight: 2,
},
grid: {
left: '1%',
right: '1%',
top: '17%',
bottom: '2%',
containLabel: true
},
color: ['#FFC91A', '#52FFD6', '#FC364D', '#00D1FF', '#B2FFAB'],
xAxis: {
name:'波长/nm',
type: 'category',
axisLabel: {
color: '#eceeee',
margin: 3,
},
z: 10,
axisTick: {show: true, color: '#c6cccf'},//x轴刻度线
data: date,
},
yAxis: {
// name: '(元/kg)',
type: 'value',
nameTextStyle: {
color: '#eceeee'
},
axisLabel: {
textStyle: {
color: '#eceeee'
},
formatter: "{value}",
},
splitLine: {
lineStyle: {
color: '#677d7a',
type: 'dashed'
}
},
axisLine: {show: false},
},
series: [{
name: '第一次',
type: 'line',
data: numMy
},
{
name: '第二次',
type: 'line',
data: numKy
},
{
name: '第三次',
type: 'line',
data: numAd33
},
{
name: '第四次',
type: 'line',
data: numAd44
},
{
name: '第五次',
type: 'line',
data: numAd55
},
]
};
option && myChart.setOption(option);
运行效果:
完美解决,撒花~~~