离线使用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} %'}
			                        }},
			                }
			            ]
			        };

设置背景颜色，设置数据，设置数据颜色等等，还是很方便的