Echarts数据过多显示问题（横轴可拖动显示查看数据、柱状图每个柱状显示不同颜色 、x轴文字内容过长）

• 以下是实现的效果图
  

1、横轴可拖动显示查看数据

• 在option里添加

dataZoom: [{
   type: 'slider',
     show: true, //flase直接隐藏图形
     xAxisIndex: [0],
     left: '5%', //滚动条靠左侧的百分比
	 right:50,
     bottom: -5,
     start: 35,//滚动条的起始位置
     end: 65 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
 }]

2、柱状图每个柱状显示不同颜色

一开始百度的时候发现基本都是这么写的，在series里加入这段

itemStyle: {
      //每根柱子颜色设置
      color: function (params) {
        let colorList = [ "#163EC0", "#2058BF","#2374CF","#2272AF",
          "#318DC1", "#38A1CD", "#38BEDA", "#CBA531","#CB8326","#CA5F25",
        ];
        return colorList[params.dataIndex];
     }

但是自己使用了之后发现，数据长度超出颜色数组长度后的柱状颜色都变成了黑色（当然了-_-，后边的颜色根本没定义啊），经过我的思考后，代码修改如下：

itemStyle: {
      //每根柱子颜色设置
      color: function (params) {
      var colorList;
      colorList = ['#39c','#00b38a','#747a7d','#ffc107','#ff0000','#ea00ff','#397b29','#22e6ff',
				'#68a54a','#759c6a','#f60','#673ab7','#9e9e9e','#a9cba2','#cddc39','#3f51b5];
                 if (params.dataIndex >= colorList.length) {
                 	 let index = Math.ceil((params.dataIndex / colorList.length)/2)
                     for (var i=0;i<index;i++){
                         colorList = colorList.concat(colorList);//数据长度超出时颜色循环
                 	}
              	}
                return colorList[params.dataIndex];
     }

3、x轴文字内容过长

• 在option里的xAxis添加如下代码，可选择换行显示也可选择超过一定字数显示省略号

				axisLabel: {
		                   formatter:function(value){  
		                       var str = ""; 
		                       var num = 7; //每行显示字数 
		                       var valLength = value.length; //该项x轴字数  
		                       var rowNum = Math.ceil(valLength / num); // 行数  
		                       
		                       if(rowNum > 1) {
		                    	   str = value.substring(0, 7) + ".."; //出省略号
		                           //for(var i = 0; i < rowNum; i++) {//换行
		                               //var temp = "";
		                              // var start = i * num;
		                               //var end = start + num;
		                               //temp = value.substring(start, end) + "\n";
		                               //str += temp; 
		                           //}
		                           return str;
		                       } else {
		                           return value;
		                       } 
		                   }
		               }