# alament-charts

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```




#用法

```
npm install alamein-echarts -S
import alameinEcharts from 'alamein-echarts';
improt 'alamein-echarts/lib/alamein-echarts.css'
```


#基本图 base-chart
```
<base-chart :option="{}"/>
```

## 配置
| 名称                  | 类型            | 必填  | 默认值 | 示例               |
| --------------------- | --------------- | :---: | ------ | ------------------ |
| option                | Object          | true  |        | 和echartoption一样 |
| clickFunc             | Funciotn        | false |        | function(params){} |
| mouseoverFunc         | Funciotn        | false |        | function(params){} |
| hightLightFunc        | Funciotn        | false |        | function(params){} |
| legendselectchangedFn | Funciotn        | false |        | function(params){} |
| chartWidthChange      | Funciotn        | false |        | function(params){} |
| chartType             | 'china',unefind | false |        | 已有中国地图会用到 |


##

# 饼图 pie-chart  
## 示例
```
<pie-chart :data-source="[]"/>

```


## 配置

| 名称                 | 类型           | 必填  | 默认值    | 示例                        |
| -------------------- | -------------- | ----- | --------- | --------------------------- |
| dataSource           | 类型           | true  | 默认值    | [ { name: "海尔冰箱BCD-460WGHFD14NZU1星云紫", value: 57990 },] |
| customChartStyle     | String         | false |           | 'height:300px;'             |
| colors               | Array[]        | false | 默认值    | 示例                        |
| decimals             | Number, String | false | 2         | 示例                        |
| pieChartName         | String         | false | 默认值    | function(params){return ''} |
| titleText            | String         | false | 默认值    | 示例                        |
| title                | Function       | false | 默认值    | 示例                        |
| showLegend           | Function       | false | 默认值    | 示例                        |
| legend               | Function       | false | 默认值    | 示例                        |
| radius               | Array          | false | [60, 100] | 示例                        |
| showSeriesLabel      | Boolean        | false | 默认值    | 示例                        |
| grid                 | Object         | false | 默认值    | 示例                        |
| tooltipFormatter     | function       | false |           | 示例                        |
| colors               | Object         | false |           | 示例                        |
| seriesLabelFormatter | function       | false |           | 示例                        |
| showSeriesLabelPer   | Boolean        | false | 默认值    | 示例                        |

# 折线、柱状图  line-bar-chart
### 示例
```
<line-bar-chart :data-Source="[]"/>
  dataSource: [
        {
          yAxisIndex: 0,
          type: "line",
          name: "商品数1量",
          data: [
            { orderNum: 0, x: "0", y: 1230 },
          ],
        },
        {
          yAxisIndex: 1,
          type: "bar",
          name: "商品数量",
          data: [
            { orderNum: 0, x: "0", y: 1230 },
          ],
        },
      ]
```
## 配置
| 名称                     | 类型           | 必填  | 默认值 | 示例                        |
| ------------------------ | -------------- | ----- | ------ | --------------------------- |
| dataSource               | Array           | true  | 默认值 | <a id="dataSource">1122</a> |
| customChartStyle         | String         | false |        | 'height:300px;'             |
| colors                   | Array[]        | false | 默认值 | 示例                        |
| decimals                 | Number, String | false | 2      | 示例                        |
| tooltipFormatter         | Function       | false | 默认值 | function(params){return ''} |
| tooltipValueUnit         | String         | false | 默认值 | 示例                        |
| tooltipTitleFn           | Function       | false | 默认值 | 示例                        |
| tooltip                  | Object         | false | 默认值 | 示例                        |
| xAxisAxisLabelFormattter | Function       | false | 默认值 | 示例                        |
| yAxis                    | Function       | false | 默认值 | 示例                        |
| yAxisAxisLabelFormattter | Function       | false | 默认值 | 示例                        |
| yAxisName                | Function       | false | 默认值 | 示例                        |
| legend                   | Object         | false | 默认值 | 示例                        |
| showDataZoom             | Boolean        | false | 默认值 | 示例                        |
| dataZoom                 | Object         | false | 默认值 | 示例                        |
| grid                     | Object         | false | 默认值 | 示例                        |
| showChart                | Boolean        | false | true   | 示例                        |
| otherConfig              | Object         | false | true   | 示例                        |



# 漏斗图 funnel-chart
```
<funnel-chart :data-source="[]"/>
```



## 配置
| 名称       | 类型           | 必填  | 默认值 | 示例                                                           |
| ---------- | -------------- | ----- | ------ | -------------------------------------------------------------- |
| dataSource | 类型           | true  | 默认值 | [ { name: "海尔冰箱BCD-460WGHFD14NZU1星云紫", value: 57990 },] |
| utilt      | String         | false |        | '个'                                                           |
| decimals   | Number, String | false | 2      | 示例                                                           |


# 地图 china-map-chart
## 示例 
####
```
<china-map-chart :data-source="[ {name:'北京',value:1}]" />
```

## 配置
| 名称          | 类型             | 必填  | 默认值 | 示例                                           |
| ------------- | ---------------- | :---: | ------ | ---------------------------------------------- |
| dataSource    | Array            | true  | []     | {name:string,value:number}                     |
| showList      | Array            | false |        | [{ label: '正常商品数', value:'normalTotal',}] |
| customTooltip | Funciotn         | false |        | function(params){}                             |
| visualMap     | Object           | false |        |                                                |
| geo           | Object           | false |        |                                                |
| decimals      | String or Number | false | 2      | default                                        |



# top10 top-chart  
```
<top-chart :data-source="[]"/>
```



## 配置
| 名称                  | 类型           | 必填  | 默认值 | 示例                        |
| --------------------- | -------------- | ----- | ------ | --------------------------- |
| dataSource            | 类型           | true  | 默认值 | [ { name: "海尔冰箱BCD-460WGHFD14NZU1星云紫", value: 57990 },]|
| customChartStyle      | String         | false |        | 'height:300px;'             |
| decimals              | Number, String | false | 2      | 示例                        |
| tooltipFormatter      | function       | false | 默认值 | function(params){return ''} |
| tooltipFormatterLabel | String         | false | 默认值 | 示例                        |
| grid                  | Object         | false | 默认值 | 示例                        |
| showChart             | Boolean        | false | true   | 示例                        |
| seriesLabelFormatter  | function       | false | true   | 示例                        |
