離線使用echarts及一些細節

最近要做圖表，用js起來太麻煩，所以就找些開源的庫來用，發現echarts挺不錯，

echarts的文檔把所有東西都說的很明白了，直接下載zip包，要是想離線使用的話只需要引用下載包里面的dist文件夾即可

首先把下載的包放到項目文件夾，這里使用  ./ 來引用

直接在配置中引用：

<script type="text/JavaScript" src="./echarts-2.2.0/dist/echarts-all.js"> </script> 
<script type="text/javascript" src="./echarts-2.2.0/dist/echarts.js"> </script>

    require.config({  
               paths: {  
                   //echarts: 'http://echarts.baidu.com/build/dist'  
                   echarts:'./echarts-2.2.0/dist/'   
               }  
           });  
           // 使用  
           require(  
               [  
                   'echarts',  
                   'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載  
               ],  

 其中注釋掉的是在線引用百度的echarts，下面則是引用離線的，我把 D:\Download\echarts-2.1.10\build\source路徑里的文件都放到我項目的echarts文件夾下就可以正常使用了

可以按照圖表的要求設置各項屬性

var option = {
						backgroundColor:'#888888',   //設置圖表的背景顏色
						title : {
					        text: '版本最高覆蓋率',
					        textStyle:
					        {
					        	color: '#888888',
					        },
					    },
			            tooltip: {
			                show: true
			            },
			            /*
			            legend: {
			                data:['覆蓋率']
			            },
			            */
			            xAxis : [
			                {
			                    type : 'category',
			                    name : '版本名稱',
			                    data : versionnames,
			                    axisLine : 
								{    // 軸線
									show: true,
									lineStyle: {
										color: 'white',
										//type: 'solid',
										width: 2}
								}
			                }
			            ],
			            yAxis : [
			                {
			                    type : 'value',
			                    name : '覆蓋率(%)',
			                    min : 0,
			                    max : 100,
			                    axisLine : 
								{    // 軸線
									show: true,
									lineStyle: {
										color: 'white',
										//type: 'solid',
										width: 2}
								}	                                   
			                }
			            ],
			            series : [
			                {
			                    name : '覆蓋率',
			                    type: 'bar',
			                    data : coverages,
			                    itemStyle: {
			                        normal: {
			                        	color: function(params) {
			                                // build a color map as your need.
			                                /*
			                                var colorList = [
			                                  '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
			                                   '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
			                                   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
			                                ];
			                                return colorList[params.dataIndex]
			                                */
			                                return colo[params.dataIndex];
			                            },
			                            label : {show: true,position:'top',formatter:'{c} %'}
			                        }},
			                }
			            ]
			        };

 設置背景顏色，設置數據，設置數據顏色等等，還是很方便的