技术积累系列(三)------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
效果如下，超过五个字符，添加省略号处理