echarts使用技巧

1.解决x轴内容过多显示不全问题

xAxis: {
      type: 'category',
      data: xData,
  rotate:40 ,//设置文字旋转度数
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {  
        fontSize: 12,
        color: 'rgba(255, 255, 255, .8)',
        formatter:function(value)  
        {  
            var ret = "";//拼接加\n返回的类目项  
            var maxLength = 3;//每项显示文字个数  
            var valLength = value.length;//X轴类目项的文字个数  
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
            if (rowN > 1)//如果类目项的文字大于3,  
            {  
                for (var i = 0; i < rowN; i++) {  
                    var temp = "";//每次截取的字符串  
                    var start = i * maxLength;//开始截取的位置  
                    var end = start + maxLength;//结束截取的位置  
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                    temp = value.substring(start, end) + "\n";  
                    ret += temp; //凭借最终的字符串  
                }  
                return ret;  
            }  
            else {  
                return value;  
            }  
        }  
    },

2.x轴增加滚动

 dataZoom: [
            {
                type: "slider",
                show: true,
                xAxisIndex: [0],
                bottom: 0,
                // startValue: 0, //根据下标进行展示数据
                // endValue: 30,
                start: 0, //根据0~100进度进行展示
                end: 100,
                filterMode: 'none',
                height: 17,
            }, {
                type: "inside",
                xAxisIndex: [0],
                filterMode: 'none'
            }
        ],