# ngEcharts

**Repository Path**: VALR/ngEcharts

## Basic Information

- **Project Name**: ngEcharts
- **Description**: 一个基于Echarts3的AngularJs插件模块，提供了三级地图联动（单视图显示，双视图显示，地图散点），折线图/柱状图，扇形图/环形图
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-01-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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',
	'ngEcharts'
]);
```
3.使用ngEcharts模块中的组件

1）地图组件的使用

```
（1）级联地图省市分离双视图显示
<div map-chart
     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  map-chart
     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 map-chart
     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）效果图
![地图联动](https://images.gitee.com/uploads/images/2019/0223/155245_51e211cc_1384885.gif "echarts.gif")
 
2）折线图/柱状图组件的使用

（1）折线图
```
<div  linebar-chart
      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  linebar-chart
      title="'柱状图'"
      data="barData"
      xdata="xdata"
      open-toolbox="true"
      chart-type="'bar'"
      style="min-height:500px;max-width: 600px;position: relative;">
 </div>   
```
（2）折线图/柱状图混合
```
<div  linebar-chart
      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）效果图
 ![扇形图](https://images.gitee.com/uploads/images/2019/0223/155352_c6f85623_1384885.gif "linebar.gif")

3）饼图/环形图组件的使用

（1）扇形图
```
<div  pie-chart
     title="'扇形图'"
     data="dataPie"
     legend-icon="'circle'"
     radius="'70%'"
     close-tooltip="true"  
     style="min-height:500px;width: 400px;position:relative;">
</div>
```
（2）环形图
```
<div  pie-chart
      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）效果图
 ![饼图](https://images.gitee.com/uploads/images/2019/0223/155407_a58b6c18_1384885.gif "pie.gif")