问题描述

echarts：X轴、y轴文字太长；重叠显示。

解决方案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轴的话，需要改为yAxisif (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轴的话，需要改为yAxisif (params.componentType == "xAxis") {var tooltipDiv = document.querySelector("#tooltipId");tooltipDiv.style.cssText = "display:none";}});},},
};
</script>

代码仅供参考;如有不正望指出。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！