问题描述
echarts:X轴、y轴文字太长;重叠显示。
![![](https://img-blog.csdnimg.cn/015e287ebe3e4ff7a4ec170c3c529598.png](https://i-blog.csdnimg.cn/blog_migrate/722f4a89c42843c9b4afd4526c8036e4.png)
解决方案1:截取部分字符;超出显示…
xAxis: {
data: [ "羽绒服超过5个字了哈哈哈", "羊毛衫", "帽子也超过5个字了", "裤子", "高跟鞋", "袜子", ],
axisLabel: {
show: true,
interval:0,
//超过5个文字截取显示...
formatter: function (value) {
var val = "";
if (value.length > 5) {
val = value.substr(0, 5) + "...";
return val;
} else {
return value;
}
},
},
},
效果如下:
产生新的问题:文字显示不全
解决方案2:加上鼠标事件;滑过显示全部字符。
1.triggerEvent: true,// 加上坐标轴的标签是否响应和触发鼠标事件,默认不响应。
2.加入鼠标滑过方法配置
效果如下:
完整代码
<template>
<div style="height: 100%; width: 100%"></div>
</template>
<script>
export default {
data() {
return {
myChart: null,
};
},
mounted() {
this.myChart = this.$echarts.init(this.$el);
this.init();
},
methods: {
init() {
const option = {
xAxis: {
data: [
"羽绒服超过5个字了哈哈哈",
"羊毛衫",
"帽子也超过5个字了",
"裤子",
"高跟鞋",
"袜子",
],
triggerEvent: true,
axisLabel: {
show: true,
interval: 0,
//超过5个文字截取显示...
formatter: function (value) {
var val = "";
if (value.length > 5) {
val = value.substr(0, 5) + "...";
return val;
} else {
return value;
}
},
},
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
this.myChart.setOption(option);
this.tooltipHandler(this.myChart);
},
// 创建悬浮框
tooltipHandler(myChart) {
var tooltipDiv = document.getElementById("tooltipId");
if (!tooltipDiv) {
var div = document.createElement("div");
div.setAttribute("id", "tooltipId");
div.style.display = "block";
document.querySelector("html").appendChild(div);
}
myChart.on("mouseover", function (params) {
//params.componentType如果是y轴的话,需要改为yAxis
if (params.componentType == "xAxis") {
var tooltipDiv = document.querySelector("#tooltipId");
var elementStyle =
"position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: rgba(96, 98, 102,.9);box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px";
tooltipDiv.style.cssText = elementStyle;
tooltipDiv.innerHTML = params.value;
document.querySelector("html").onmousemove = function (event) {
var tooltipDiv = document.querySelector("#tooltipId");
var xx = event.pageX - 20; //悬浮框偏移位置
var yy = event.pageY + 15;
tooltipDiv.style.top = yy + "px";
tooltipDiv.style.left = xx + "px";
};
}
});
myChart.on("mouseout", function (params) {
//params.componentType如果是y轴的话,需要改为yAxis
if (params.componentType == "xAxis") {
var tooltipDiv = document.querySelector("#tooltipId");
tooltipDiv.style.cssText = "display:none";
}
});
},
},
};
</script>
代码仅供参考;如有不正望指出。