Echarts中y轴数据太长使用省略号且鼠标划上去显示全部

1.首先在option中写入以下代码:

yAxis: {
   data: [],
   inverse: true,
   interval: 0,
   axisLine: {
     lineStyle: {
       color: '#333'
     }
   },
   axisLabel: {
     formatter: function (params) {
       let index = params.indexOf('#');
       let num = params.slice(index + 1);
       let newParams = params.slice(0, index);
       var newParamsName = "";// 最终拼接成的字符串
       var paramsNameNumber = newParams.length;// 实际标签的个数
       if(paramsNameNumber<=9){
         newParamsName = newParams;
       }else{
         newParamsName = newParams.substring(0,7)  + "...";
       }
       return '{value|' + newParamsName + '}' +'\n'+'{param|(' + num + ')}';
     },
     color: '#333',
     rich: {
       value: {
         align: 'left',
         height: 16,
         lineHeight: 16,
         width: 50
       },
       param: {
         align: 'left',
         height: 16,
         lineHeight: 16,
         fontSize: '10px',
         width: 50,
         color: '#36cebc',
       }
     }
   },
   axisTick: {
     interval: 0
   },
   triggerEvent: true,// 设置为true后具有x轴文字过长,显示省略号,hover上去显示全部的功能
 },

2.在文件中引入Echarts:

<Echart options={echartsData}
       height={echartHeight}
/>
<div className={`x-axis-tip`}></div>

2.写入样式:

.x-axis-tip{
 display: none;
 position: absolute;
 padding: 5px 5px;
 font-size: 12px;
 line-height: 18px;
 color: #575757;
 background: #FFFFFF;
 box-shadow: 0 1px 4px 0 rgba(0,0,0,0.20);
 border-radius: 4px;
}

3.在echarts文件中插入事件:

const chart = echarts.init(chartDom);
chart.setOption(this.props.options);
chart.on('mouseover', function (params) {
     if( params.componentType == 'yAxis' ){
       let offsetX = params.event.event.offsetX
       let offsetY = params.event.event.offsetY
       let xAxisTip = document.querySelector('.x-axis-tip')
       xAxisTip.innerText = params.value.split("#")[0];
       xAxisTip.style.left = offsetX +  "px"
       xAxisTip.style.top = offsetY + 10 + "px"
       xAxisTip.style.display = 'block';
     }
});
chart.on('mousemove', function (params) {
     if( params.componentType == 'yAxis' ){
       let offsetX = params.event.event.offsetX
       let offsetY = params.event.event.offsetY
       let xAxisTip = document.querySelector('.x-axis-tip')
       xAxisTip.innerText = params.value.split("#")[0];
       xAxisTip.style.left = offsetX + 30 +  "px";
       xAxisTip.style.top = offsetY + 10 + "px";
       xAxisTip.style.display = 'block';
     }
});
chart.on('mouseout', function (params) {
     let xAxisTip = document.querySelector('.x-axis-tip')
     xAxisTip.style.display = 'none';
});
this.chart = chart
发布了35 篇原创文章 · 获赞 1 · 访问量 6718

猜你喜欢

转载自blog.csdn.net/qq_36162529/article/details/90809416