vue echarts X軸文字過長隱藏省略號展示和移入氣泡顯示

阿新 • • 發佈：2021-01-03

話不多說上圖上程式碼
需求一：由於寬度限制X軸內容過長省略號展示
在這裡插入圖片描述

	xAxis:{
		triggerEvent: true,//一定要設定為true
		axisLabel: {
		 formatter: function (value) {
		   var res = value;
		   if (res.length > 3) {//根據自身需求設定顯示字數
		     res = res.substring(0, 3) + "..";
		   }
		   return res;
		 },
		},
	}

需求二：由於這樣看不清楚X軸全部內容，那麼是否可以新增一個移入小氣泡展示完全內容的功能

echarts x軸移入事件

mounted() {
	var line = this.$echarts.init(this.$refs.Bar);
    line.setOption(this.option);
    line.on('mouseover', function(params) {
      if(params.componentType == "xAxis") {
      //判斷移入x軸
      }
    });
}

2.移入顯示

<div class 
="myEcharts" id="bar1myEcharts">//外層盒子
	<div class="Bar1" ref="Bar"></div>//echarts
	<div id="extension" class="extension"></div>//氣泡展示文字
</div>

//氣泡的樣式
.extension{
    display:none;
    padding: 2px 5px;
    border-radius: 
 5px;
    background: rgba(0,0,0,0.5);
}

獲取滑鼠位置座標的方法
methods: {
	mouseMove(ev){
	  ev = ev || window.event;
	  return this.mousePosition(ev);
	},
	mousePosition(ev){
	  if(ev.pageX || ev.pageY){
	    return {x:ev.pageX, y:ev.pageY};
	  }
	  return {
	    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
	    y:ev.clientY + document.body.scrollTop - document.body.clientTop
	  };
	},
},
mounted() {
	var that = this;
    var line = this.$echarts.init(this.$refs.Bar);
    line.setOption(this.option);
    line.on('mouseover', function(params) {
      let extension = document.getElementById("extension");
      if(params.componentType == "xAxis") {
        let mousePos = that.mouseMove();
        //滑鼠位置，按需求設定
        let x = mousePos.x;
        let y = mousePos.y-20;
        extension.innerHTML = params.value;
        //氣泡樣式
        extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;position: fixed;";
      }
    });
}

在這裡插入圖片描述
3.移出隱藏氣泡

mounted() {
    var that = this;
    var line = this.$echarts.init(this.$refs.Bar);
    line.setOption(this.option);
    line.on('mouseover', function(params) {
      let extension = document.getElementById("extension");
      if(params.componentType == "xAxis") {
        let mousePos = that.mouseMove();
        let x = mousePos.x;
        let y = mousePos.y-20;
        extension.innerHTML = params.value;
        extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;position: fixed;";
      }
    });
    //移出最外層盒子氣泡消失
    document.getElementById('bar1myEcharts').addEventListener('mouseleave', function(params) {
      let extension = document.getElementById("extension");
      extension.style.cssText = "display:none;";
    });
  },