1. 程式人生 > >echarts x軸 增加滾動條

echarts x軸 增加滾動條

          最近blog裡面大家都問 x軸類目顯示不全問題 如何增加滾動條  下面把我專案中用到的跟大家分享出來  其中
dataZoom 
的程式碼就是增加滾動條用到的
                                function (ec) {
			            	  var myChart = ec.init(document.getElementById('line')); 
			                  
			                  var option = {
			                      title : {
			               		        text: '商品排名分析',
			               		       subtext:'橫向:商品名稱, 縱向:金額'
			               		},
			                      tooltip: {
			                          show: true,
			                          trigger: 'axis'
			                      },
			                      legend: {
			                          data:['銷售重量','訂單金額']
			                      },
			                      toolbox: {
			          		        show : true,
			          		        feature : {
			          		            mark : {show: true},
			          		            dataView : {show: true, readOnly: false},
			          		            magicType : {show: true, type: ['bar','line']},
			          		            restore : {show: true},
			          		            saveAsImage : {show: true}
			          		        }
			          		    },
			          		  grid:{
			          	        
			          	              y2:150
			          	            },
			                      xAxis : [
			                          {
			                              type : 'category',
			                              boundaryGap : true,
			                              data : proNameArr,
			                              axisLabel:{  
	                                          interval:0 ,
	                                          formatter:function(val){  
	                                            return val.split("").join("\n");  
	                                          }  
	                                      }  
			                          }
			                      ],
			                      yAxis : [
			                          {
			                              type : 'value'
			                          }
			                      ],
<span style="color:#ff0000;">			   <span style="color:#FF0000;">                   dataZoom : {
			                          show : true,
			                          realtime : true,
			                          start : 0,
			                          end : 100
			                      }</span>,</span>
			                      series : [
			                          {
			                              "name":"銷售重量",
			                              "type":"line",
			                              "data":normWeightArr 
			                          },
			                          {
			                              "name":"訂單金額",
			                              "type":"line",
			                              "data":orderMoneyArr 
			                          } 
			                      ] 
			                       
			                  };

			                  // 為echarts物件載入資料 
			                  myChart.setOption(option); 
			             }

這是效果