1. 原生js版本
源码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!--引入js文件--><script src="/ajax/libs/jquery/3.5.1/jquery.js"></script><script src="/ajax/libs/echarts/4.8.0/echarts-mon.js"></script><div id="charts2" style="width: 99%; height: 390px; margin: 3px auto;"></div><script>window.onload = function () {var option = {title: {text: 'xxxx统计',x: 'left',y: 'top',textStyle: {fontSize: 14,fontStyle: 'normal',fontWeight: 'bold',}},tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend: {x: '15%',textStyle: { //图例文字的样式fontSize: 12},data: ['xxxx']},grid: {left: '3%',right: '2%',top: '15%',containLabel: true},xAxis: {type: 'category',scale: true,triggerEvent: true,//设置文本过长超出隐藏...表示axisLabel: {margin: 8,formatter: function (params) {var val = "";if (params.length > 4) {val = params.substr(0, 4) + '...';return val;} else {return params;}}},//也可以从后台获取数据data: ['这是名称 非常长的商品1','这是名称比商品1还长很多的商品2', '这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3', '短的商品4']},yAxis: {type: 'value',},series: [{name: 'xxxx',type: 'bar',stack: '总量',barWidth: 3,label: {normal: {show: false,position: 'insideRight',formatter: function (params) {if (params.value > 0) {return params.value;} else {return '';}}}},data: [123]}]};// 基于准备好的dom，初始化echarts实例var chart2 = echarts.init(document.getElementById('charts2'));chart2.clear();chart2.setOption(option);// 页面监控宽度的变化window.addEventListener("resize", function () {chart2.resize();});extension(chart2);//这个方法是用来处理鼠标悬浮显示全部内容的function extension(chart2) {//判断是否创建过div框,如果创建过就不再创建了//该div用来盛放文本显示内容的，方便对其悬浮位置进行处理var id = document.getElementById("extension");if (!id) {var div = "<div id = 'extension' sytle=\"display:block\"></div>";$("html").append(div);}chart2.on('mouseover', function (params) {console.log(params)//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxisif (ponentType == "xAxis") {//设置悬浮文本的位置以及样式$('#extension').css({"position": "absolute","color": "#333","font-size": "12px","padding": "5px","display": "inline",'border-radius': '4px','background-color': 'rgba(255, 255, 255, 0.5)','box-shadow': 'rgba(0, 0, 0, 0.3) 2px 2px 8px'}).text(params.value);$("html").mousemove(function (event) {var xx = event.pageX - 10;var yy = event.pageY + 15;$('#extension').css('top', yy).css('left', xx);});}});chart2.on('mouseout', function (params) {//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxisif (ponentType == "xAxis") {$('#extension').css('display', 'none');}});}}</script></body></html>
2. vue版本
可以全局封装一下这个悬浮的方法：extension.js'
import $ from 'jquery'// echart X轴文字太长悬浮export function extension(chart2) {//判断是否创建过div框,如果创建过就不再创建了//该div用来盛放文本显示内容的，方便对其悬浮位置进行处理var id = document.getElementById("extension");if (!id) {var div = "<div id = 'extension' sytle=\"display:block\"></div>";$("html").append(div);}chart2.on('mouseover', function (params) {// console.log(params)//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxisif (ponentType == "xAxis") {//设置悬浮文本的位置以及样式$('#extension').css({"position": "absolute","color": "#333","font-size": "12px","padding": "5px","display": "inline",'border-radius': '4px','background-color': 'rgba(255, 255, 255, 0.5)','box-shadow': 'rgba(0, 0, 0, 0.3) 2px 2px 8px'}).text(params.value);$("html").mousemove(function (event) {var xx = event.pageX - 10;var yy = event.pageY + 15;$('#extension').css('top', yy).css('left', xx);});}});chart2.on('mouseout', function (params) {//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxisif (ponentType == "xAxis") {$('#extension').css('display', 'none');}});}
vue 页面：
引入：import { extension } from '@/components/Echarts/extension.js'
xAxis: {type: 'category',data: titleLineName,triggerEvent: true, //这个很重要一定要写axisTick: {alignWithLabel: true},axisLabel: {textStyle: {color: '#fff', //坐标值得具体的颜色}, formatter: function(value) {var strs = value;if(strs.length > 4) {strs = strs.substring(0, 3) + "...";}return strs;}}},
效果图如下：
