解决echarts中横坐标值显⽰不全（⾃动隐藏）问题
echarts中，横轴数据如果⾮常多，会⾃动隐藏⼀部分数据，我们可以通过属性interval来进⾏调整。
如下图，当横轴时间为13天时，echarts会⾃动隔天显⽰
如果我们想显⽰全，则需要在xAxis 属性加上axisLabel:{interval: 0}
"xAxis":[{"data":["2015-5-13","2015-5-14","2015-5-15","2015-5-16","2015-5-17","2015-5-18","2015-5-19","2015-5-20","2015-5-21","2015-5-22","2015-5-23","2015-5-24","2015-5-25"], "type":"category",
"axisLabel":{
interval: 0
}setoption
}],
效果如下：
查看echarts官⽹的⽂档，可以得知：
补充知识：Echarts X轴内容过长⾃动隐藏，⿏标移动上去显⽰全部
使⽤echarts图表做页⾯展⽰的时候，当X轴内容过长时，之前⼀直⽤的 '\n' 换⾏(将字符串根据需要分成两⾏来展⽰)，这样有很⼤的局限性（如内容过长的话分成两⾏也放不下，⽽且也会影响美观），后来发现可以通过设置⾃动隐藏,⿏标移动上去显⽰全部名称的⽅法来做，效果会更好。
1. ⾸先在 x轴上添加 triggerEvent: true。如下红⾊部分：
xAxis: {
data: result.nameList,
silent: false,
triggerEvent: true,axisLine: {
onZero: true,
show: true,
lineStyle: {
color: '#90979c' // x 轴线最下⾯的横坐标线的颜⾊
}
},
splitLine: {show: false},
splitArea: {show: false},
axisLabel: {
interval: 0,//设置横坐标为斜
rotate: 30,//⽂字倾斜⾓度
formatter: function (value) { if (value.length > 10) { value = value.substring(0, 9) + ".."; } return value; },textStyle: {
color: '#666',
fontSize: '12'
}
},
},
2. ⾃定义x轴上显⽰的内容长度。如上⾯代码段中的蓝⾊部分。
3. ⾃定义⼀个⿏标悬浮事件⽅法，并调⽤。
function extensionOne(myChart) {
var id = ElementById("extensionOne");
//判断是否创建过div框，如果没有创建过，则创建。（创建时，默认隐藏）
if (!id) {
var div = "<div id = 'extensionOne' sytle=\"display:none\"></div>";
$('html').append(div);
}
var arrow_left = '20px';
//⿏标悬浮事件
<('mouseover', function (params) {
if (paramsponentType != "xAxis") {
return;
}
//设置div框样式，并为其填充值。
$('#extensionOne').css({
"position": "absolute",
"color": "#90979c",
/
/ "border": "solid 0px white",
"font-family": "Arial",
"font-size": "14px",
"padding": "5px",
"display": "inline"
}).text(params.value);
var xx_text = params.event.offsetX - 35;
arrow_left = xx_text;
$("#talentDemandDistribution").mousemove(function (event) {
// console.log("X轴坐标：" + event.pageX + " Y轴坐标：" + event.pageY);
var xx = event.pageX - 30;
var yy = event.pageY + 10;
$('#extensionOne').css('top', yy).css('left', xx);
});
});
<('mouseout', function (params) {
$('#extensionOne').css('display', 'none');
});
}
{
...
...
var chart = echarts.ElementById('talentDemandDistribution'));
chart.setOption(option);
//在echarts 初始化完成后，调⽤⾃定义的⿏标悬浮事件⽅法
extensionOne(chart);
}
到此结束！
以上这篇解决echarts中横坐标值显⽰不全(⾃动隐藏)问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。