当前位置：首页 > news >正文

echarts中，X轴名称过长隐藏，鼠标hove显示全称

news 2025/9/14 5:14:51

echarts中，X轴名称过长隐藏，鼠标hove显示全称：

 <div id="main" :style="{ width: '100%', height: '100%' }"></div>

     option: {title: {text: '重点物料库存预警',left: 'center'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {x: 'center',y: 'bottom'},grid: {left: '4%',right: '4%',bottom: '10%',containLabel: true},xAxis: [{type: 'category',data: [],triggerEvent: true,axisLabel: {formatter: function (value, index) {// 如果标签长度超过一定长度，则进行省略if (value.length > 10) {return value.slice(0, 10) + '...'}return value}}}],yAxis: [{type: 'value'}],series: []},

  getEcharts(id, option) {var chartDom = document.getElementById(id)var myChart = this.$echarts.init(chartDom)myChart.setOption(option)const chartObserver = new ResizeObserver(() => {myChart.resize()})if (id == 'main') { // 判断哪个图需要tipthis.extension(myChart)}chartObserver.observe(chartDom)},

 extension(chart) {var elementDiv = document.getElementById('extension')if (!elementDiv) {var div = document.createElement('div')div.setAttribute('id', 'extension')div.style.display = 'block'document.querySelector('html').appendChild(div)}chart.on('mouseover', function (params) {if (params.componentType == 'xAxis') { // xAxis yAxisvar elementDiv = document.querySelector('#extension')//设置悬浮文本的位置以及样式var elementStyle ='position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'elementDiv.style.cssText = elementStyleelementDiv.innerHTML = params.valuedocument.querySelector('html').onmousemove = function (event) {var elementDiv = document.querySelector('#extension')var xx = event.pageX - 10var yy = event.pageY + 15elementDiv.style.top = yy + 'px'elementDiv.style.left = xx + 'px'}}})chart.on('mouseout', function (params) {if (params.componentType == 'xAxis') { // xAxis yAxisvar elementDiv = document.querySelector('#extension')elementDiv.style.cssText = 'display:none'}})},