# ngEcharts
一個基于Echarts3的AngularJs插件模塊，提供了三級地圖聯動（單視圖顯示，雙視圖顯示，地圖散點），折線圖/柱狀圖，扇形圖/環形圖
**Usage（使用方法）**
1.在HTML中引入
```
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="ngEcharts.min.js"></script>
```
2.將ngEcharts模塊注入到主模塊中
```
angular.module("app", [
'ui.router',
'ng-echart'
]);
```
3.使用ngEcharts模塊中的組件
1）地圖組件的使用
```
（1）級聯地圖省市分離雙視圖顯示
<div qs-map
theme="dark"
title="'級聯地圖省市分離'"
map-data="mapData2"
map-type="mapType2"
map-link="true"
map-separa="true"
click-event="click2"
class="col-xs-12"
style="min-height: 500px;position:relative;">
</div>
```
```
（2）級聯地圖單視圖顯示
<div qs-map
title="'級聯地圖'"
title-style="'#fff'"
map-data="mapData1"
map-type="mapType1"
map-link="true"
layout-position0="['50%','50%']"
click-event="click1"
style="min-height: 500px;position:relative;">
</div>
```
```
（3）地圖散點
<div qs-map
title="'地圖散點'"
title-style="'#fff'"
map-data="mapData"
s-data="data"
click-event="click"
style="min-height: 500px;position:relative;">
</div>
```
（4）地圖組件屬性說明
```
* theme //圖表主題
* bg-color //圖表背景顏色，支持十六進制，八進制，參數類型：string
* colors //柱或者線顏色，參數類型：字符串數組，例如:['red','green','#eeeeee']
* loading //顯示加載狀態，參數類型:boolean
* title //圖表標題，參數類型:string
* title-position //標題位置，參數類型：string array，例:['top','left']，默認居中
* title-color //標題顏色設置，支持十六進制，八進制，參數類型：string
* title-size //標題字體大小設置，參數類型:number
* legend-icon //圖例樣式圖標，參數類型:string,可選:circle
* legend-position //圖例組件位置設置，參數類型：string array，例:['bottom','center']，默認居中
* legend-vertical //圖例組件是否為縱向排布，參數類型:boolean，缺省時默認false,橫向布局
* close-legend //關閉圖例組件，參數類型:boolean，缺省時默認false，即開啟圖例組件
* close-tooltip //關閉提示框，參數類型:boolean，缺省時默認false，即不關閉
* s-data //系列散點數據
* s-type //系列數據類型，默認散點圖
* s-name //系列數據名稱
* map-data //地圖信息數據
* map-type //對應地圖名稱
* map-link //是否設置為地圖三級聯動，參數類型:boolean，缺省默認為false，即散點地圖
* map-separa //地圖視圖分割，參數類型:boolean,缺省為false，即單視圖地圖，設置為true即多視圖
* layout-position0 //設置地圖第一視圖（單視圖）位置
* layout-position1 //設置地圖第二視圖（多視圖）位置
* layout-size0 ,//設置地圖第一視圖（單視圖）大小
* layout-size1 //設置地圖第二視圖（多視圖）大小
* events //事件數組，參數類型:array
* click-event //點擊事件，參數類型:function
* mouseover-event //鼠標滑動事件，參數類型:function
```
（5）效果圖
2）折線圖/柱狀圖組件的使用
（1）折線圖
```
<div qs-line-bar
title="'折線圖'"
data="lineData"
xdata="xdata"
open-toolbox="true"
loading="false"
chart-type="'line'"
style="min-height:500px;max-width: 600px;position: relative;">
</div>
```
（2）柱狀圖
```
<div qs-line-bar
title="'柱狀圖'"
data="barData"
xdata="xdata"
open-toolbox="true"
chart-type="'bar'"
style="min-height:500px;max-width: 600px;position: relative;">
</div>
```
（2）折線圖/柱狀圖混合
```
<div qs-line-bar
title="'折線圖/柱狀圖混合圖表'"
data="barData"
xdata="xdata"
open-toolbox="true"
chart-type="'line-bar'"
style="min-height:500px;max-width: 600px;position: relative;">
</div>
```
（4）折線圖/柱狀圖組件屬性使用說明
```
* theme //圖表主題
* bg-color //圖表背景顏色，支持十六進制，八進制，參數類型：string
* colors //柱或者線顏色，參數類型：字符串數組，例如:['red','green','#eeeeee']
* loading //顯示加載狀態，參數類型:boolean，缺省時默認false
* title //圖表標題，參數類型:string
* title-position //標題位置，參數類型：string array，例:['top','left']，默認居中
* title-color //標題顏色設置，支持十六進制，八進制，參數類型：string
* title-size //標題字體大小設置，參數類型:number
* legend-icon //圖例樣式圖標，參數類型:string,可選:circle
* legend-position //圖例組件位置設置，參數類型：string array，例:['bottom','center']，默認居中
* legend-vertical //圖例組件是否為縱向排布，參數類型:boolean，缺省時默認false,橫向布局
* close-legend //關閉圖例組件，參數類型:boolean，缺省時默認false，即開啟圖例組件
* close-tooltip //關閉提示框，參數類型:boolean，缺省時默認false，即不關閉
* openToolbox:'=?',//開啟工具箱，參數類型:boolean,缺省時默認false，即不開啟工具箱
* data //折線圖或者柱狀圖數據，參數類型array，
* chart-type //圖表類型，參數類型：string，缺省值為“line”，即默認折線圖
* xdata //x軸數據，參數類型:array
* x-type //x軸類型，參數類型:string
* close-xsplit //關閉x軸分割線，參數類型:boolean,缺省時默認false，即開啟分割線
* ydata //y軸數據，參數類型:array
* y-type //y軸類型，參數類型:string
* close-ysplit //關閉y軸分割線，參數類型:boolean,缺省時默認false，即開啟分割線
* events //事件數組，參數類型:array
* click-event //點擊事件，參數類型:function
* mouseover-event //鼠標滑動事件，參數類型:function
```
（5）效果圖
3）餅圖/環形圖組件的使用
（1）扇形圖
```
<div qs-pie
title="'扇形圖'"
data="dataPie"
legend-icon="'circle'"
radius="'70%'"
close-tooltip="true"
style="min-height:500px;width: 400px;position:relative;">
</div>
```
（2）環形圖
```
<div qs-pie
title="'環形圖'"
data="dataRing"
is-ring="true"
label-in-center="true"
hover-animation="true"
style="min-height:500px;width: 400px;position:relative;">
</div>
```
（3）餅圖/環形圖組件屬性說明
```
* theme //圖表主題
* bg-color //圖表背景顏色，支持十六進制，八進制，參數類型：string
* colors //柱或者線顏色，參數類型：字符串數組，例如:['red','green','#eeeeee']
* loading //顯示加載狀態，參數類型:boolean，缺省時默認false
* title //圖表標題，參數類型:string
* title-position //標題位置，參數類型：string array，例:['top','left']，默認居中
* title-color //標題顏色設置，支持十六進制，八進制，參數類型：string
* title-size //標題字體大小設置，參數類型:number
* legend-icon //圖例樣式圖標，參數類型:string,可選:circle
* legend-position //圖例組件位置設置，參數類型：string array，例:['bottom','center']，默認居中
* legend-vertical //圖例組件是否為縱向排布，參數類型:boolean，缺省時默認false,橫向布局
* close-legend //關閉圖例組件，參數類型:boolean，缺省時默認false，即開啟圖例組件
* close-tooltip //關閉提示框，參數類型:boolean，缺省時默認false，即不關閉
* data //折線圖或者柱狀圖數據，參數類型array，
* radius //設置餅圖半徑，參數類型:number或者string，支持20或者'50%'
* isRing //是否設置為圓環，參數類型:boolean，缺省為false，即餅圖
* labelInCenter //設置數據標簽顯示位置是否在圓環中，參數類型:boolean，缺省值為false，即不居中
* hoverAnimation //設置鼠標滑過數據塊是否啟用放大動畫效果，參數類型:boolean，缺省值為false,即關閉效果
* events //事件數組，參數類型:array
* click-event //點擊事件，參數類型:function
* mouseover-event //鼠標滑動事件，參數類型:function
```
（4）效果圖
