技術積累系列(三)------echarts折線柱狀圖座標軸文字限制個數添加省略號處理，控制浮動提示框的位置

折線圖

（1）引入官方的js資源

（2）界面上可以放一個空的div

  <div class="chart" id="barChart" >   </div>

加載圖表的js

  function barChart(){
        
			var myChart = echarts.init(document.getElementById('barChart'));//找到空的div
			option = {
				    tooltip : {
				        trigger: 'axis',
				        //控制浮動提示框的位置,自定義function各個參數
				        position: function (point, params, dom, rect, size) {
				        	  // 鼠標座標和提示框位置的參考座標系是：以外層div的左上角那一點爲原點，x軸向右，y軸向下
				        	  // 提示框位置
				        	  var x = 0; // x座標位置
				        	  var y = 0; // y座標位置
				        	 
				        	  // 當前鼠標位置
				        	  var pointX = point[0];
				        	  var pointY = point[1];
				        	 
				    				        	 
				        	  // 提示框大小
				        	  var boxWidth = size.contentSize[0];
				        	  var boxHeight = size.contentSize[1];
				        	 
				        	  // boxWidth > pointX 說明鼠標左邊放不下提示框
				        	  if (boxWidth > pointX) {
				        	    x = 60;
				        	  } else { // 左邊放的下
				        	    x = 60;
				        	  }
				        	 
				        	  // boxHeight > pointY 說明鼠標上邊放不下提示框
				        	  if (boxHeight > pointY) {
				        	    y = 5;
				        	  } else { // 上邊放得下
				        	    y = pointY;
				        	  }
				        	 
				        	  return [x, y];
				        	}
				        
				    },
				    legend: {
				        data:['基金實繳總規模（億元）', '本年已投放規模（億元）']
				    },
				    calculable : true,
				    grid:{
			            show:false,//是否顯示直角座標系網格。[ default: false ]
			            left:"25%",//grid 組件離容器左側的距離。	
			            right:"15%"
			        },
				    xAxis : [
				        {
				        	axisLine: {
			                    show: false
			                },
			                splitLine:{
					        	show:false
					        }, 
					        axisTick: {
					            show: false
					        },
				            type : 'value',
				           				 
				        }
				    ],
				    yAxis : [
				        {   					        	
				            axisLabel:{
				            	formatter : function (value)
					            {
					                let valueTxt = '';
					                if (value.length > 5) {
					                    valueTxt = value.substring(0, 5) + '...';
					                }//這裏做出判斷，處理字符串長度，大於5的時候，添加省略號處理
					                else {
					                    valueTxt = value;
					                }
					                return valueTxt ;
					            },
		                     },
				        	axisLine: {
		                        show: false,
		                    },
		                    splitLine:{
					        	show:false
					        },
					        axisTick: {
					            show: false
					        },
				            type : 'category',
				            data : []
				        }
				    ],
				    series : [
				        {
				            name:'基金實繳總規模（億元）',
				            type:'bar',
				            color:'#38d2f7',
				            data:[]
				        },
				        {
				            name:'本年已投放規模（億元）',
				            type:'bar',
				            color:'#0edbb2',
				            data:[]
				        }
				    ]
				};			        
				$.ajax({ //加載座標軸的數據
		            url:'/getTzfx.do',
		            type:'post',
		            async : false, //同步執行 
		            dataType:'json',
		            success: function(data) {
		            	if (data.status) {
     						var obj = data.data;   				
     						for (var i = 0; i < obj.length; i++) {	
     							option.yAxis[0].data.push(obj[i].jjmc);
     							option.series[0].data.push(obj[i].jjsjgm);
     							option.series[1].data.push(obj[i].bnytfgm);
      						 }
     						     						
     					}		            	
		            }
			}); 
			myChart.setOption(option);
        	
        }

關鍵是要在 axisLabel裏邊自定義formatter的function
效果如下，超過五個字符，添加省略號處理