# 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）效果图
