Echarts中X轴/Y轴坐标标签显示不下的问题解决
作者：辉常努腻
本文主要介绍了Echarts中X轴/Y轴坐标标签显示不下的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
解决Echarts X轴/Y轴 坐标标签显示不下的问题 【很长的情况】
xAxis:[
{
//目录轴
type:"category",
//数据
data: data.map(i=>i.location+" -- "+i.city_name),
//轴标签
axisLabel:{
//格式化
formatter: function (params) {
var val = "";
//判断长度
if (params.length > 4) {
//替换原字符
val = params.substr(0, 4) + '...';
//返回
return val;
} else {
//否则返回原string
return params;
}
}
}
}
],当然这样还不够
我们可以悬浮显示X坐标轴名字
tooltip: {
trigger: 'axis', //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},看效果图
解决Echarts X轴/Y轴 坐标标签显示不下的问题 【不是很长的情况】
xAxis: {
type: 'category',
name: "公司名",
data: myData.map(elem => elem.name),
axisLabel: {
interval: 0,
rotate: 30 //可以通过旋转解决标签显示不下的问题
}
}这里产生了另一个问题，你会发现自己图表太大了，需要将图表向上移动
首先通过width height 设置图表的宽高我们这里将所有的图表题添加一个class
.box{
width: 1000px;
height: 500px;
}然后将图表移动一下
grid: {
left: "15%",
bottom:'38%'
}看效果图
到此这篇关于Echarts中X轴/Y轴坐标标签显示不下的问题解决的文章就介绍到这了,更多相关Echarts 坐标标签显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！