# 大数据图表组件

## 安装使用

### 第一步

```
npm install @alex_doone/echarts -D or
yarn add @alex_doone/echarts
```

### 第二步

在main.js文件里注册组件(注册所有图表组件)
```
import Doone from '@alex_doone/echarts'
Vue.use(Doone)
```

按需注册
```
import { DoLine } from '@alex_doone/echarts'
Vue.use(DoLine)
```

### 第三步

from app.vue
```
<template>
    <div id="app">
        <DoLine width="500px" :color="['pink']"/>
    </div>
</template>
<script>
export default {
    name: "app"
};
</script>
```

## 效果图：
![line Pic](http://a1.qpic.cn/psb?/V10unsPD0QOZQy/Dz*etQHfQwq0hW*BgJPWPKV7KwCqbdyuePOXqc9prPc!/b/dFQBAAAAAAAA&ek=1&kp=1&pt=0&bo=6AMMAwAAAAADF9Y!&tl=1&vuin=498513334&tm=1571821200&sce=60-4-3&rf=viewer_4)


## 通用配置

#### 地图型图表除外，下列图表配置不在做额外说明

|属性|说明|类型|默认值|
|---|---|---|---|
|width|图表宽度|String|```"600px"```|
|height|图表高度|String|```"400px"```|
|type|图表默认色系（```dark|white```）|Enum|```"white"```|
|charsData|图表数据|Array|```[{name: "Forest",data: [320, 332, 301, 334]}]...```|
|xAxisData|图表横轴类目|Array|```["2014年", "2015年", "2016年", "2017年"]```|
|color|调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色|```Array|String```|```["#358fff", "#32eaaa", "#e8a24c"]```|
|tooltipFormatter|提示框浮层内容格式器，支持字符串模板和回调函数两种形式|```String|Function```|```Function```，详情参看[Click formatter][formatter]|
|animation|图表提示框浮层动画|```Boolean```|```false```|
|animationTime|图表提示框浮层动画时间|```Number```|```1000```|

## 柱状图

```
<DoBar />
```

## 效果图：
![bar Pic](http://m.qpic.cn/psb?/V10unsPD0QOZQy/NoehjMhtMqkfMkAChJIinQmSe75izXrAqFtzua2I5ck!/b/dL8AAAAAAAAA&bo=oAQYAwAAAAADF40!&rf=viewer_4)

## API
通过设置属性来产生不同的样式

|属性|说明|类型|默认值|
|---|---|---|---|
|barOpt|设置柱状图样式|```Object```|详情参看[Click barOpt][barOpt]|
|changeOpt|通用图表配置修改，优先级低于barOpt|```Object```|详情参看[Click changeOpt][changeOpt]|



### 折线图

```
<DoLine :charsData="line.charsData"/>
<script>
export default {
    name: "app",
    data() {
        return {
            line: {
                charsData: [
                    {
                        name: "人均年收入",
                        data: [11, 11, 15, 13, 12],
                        xAxisData: [
                            "2014年",
                            "2015年",
                            "2016年",
                            "2017年",
                            "2018年"
                        ]
                    },
                    {
                        name: "人均年收入2",
                        data: [12, 13, 14, 15, 13],
                    }
                ]
            }
        };
    }
};
</script>
```

## 效果图：
![bar Pic](http://m.qpic.cn/psb?/V10unsPD0QOZQy/25qLA99I*JXHCed9uyPtXAPfhGD5AaFtD8qWtomfyBs!/b/dL8AAAAAAAAA&bo=fAQuAwAAAAADF2c!&rf=viewer_4)

## API
通过设置属性来产生不同的样式

|属性|说明|类型|默认值|
|---|---|---|---|
|lineOpt|设置柱状图样式|```Object```|详情参看[Click lineOpt][lineOpt]|
|changeOpt|通用图表配置修改，优先级低于lineOpt|```Object```|详情参看[Click changeOpt][changeOpt]|

### 折线柱状图

```
<DoLineAndBar />
```

## 效果图：
![bar Pic](http://m.qpic.cn/psb?/V10unsPD0QOZQy/*ckA9ctrPGBRsiJo549.UoYxCoa3PXGrQTF.7.scwW4!/b/dAcBAAAAAAAA&bo=ZgQWAwAAAAADF0U!&rf=viewer_4)

## API
通过设置属性来产生不同的样式

|属性|说明|类型|默认值|
|---|---|---|---|
|barData|柱状图表数据|```Object```|```{name: "最低气温",data: [11, 11, 15, 13, 12, 13, 10]}```|
|lineData|折线图表数据|```Object```|```{name: "最高气温",data: [11, 11, 15, 13, 12, 13, 10]}```|
|barOpt|设置柱状图样式|```Object```|详情参看[Click barOpt][barOpt]|
|lineOpt|设置折线图表样式|```Object```|详情参看[Click barOpt][lineOpt]|
|changeOpt|通用图表配置修改，优先级低于barOpt与lineOpt|```Object```|详情参看[Click changeOpt][changeOpt]|

### 饼状图

```
<DoPie 
    insertText="hah" 
    insertColor="pink" 
    insertTextColor="#000" 
    :changeOpt="{legend:{icon:'rect'}}" 
    :pieOpt="{radius: ['40%', '70%']}"/>
```

## 效果图：
![bar Pic](http://m.qpic.cn/psb?/V10unsPD0QOZQy/j*QkaPovllgazdvB3O60FS5JXJBV1GCI7nTzfyzWwAI!/b/dMMAAAAAAAAA&bo=KgQ2AwAAAAADFyk!&rf=viewer_4)

## API
通过设置属性来产生不同的样式

|属性|说明|类型|默认值|
|---|---|---|---|
|charsData|图表数据|```Array```|```[{ value: 335, name: "直接访问" },{ value: 310, name: "邮件营销" },{ value: 234, name: "联盟广告" },{ value: 135, name: "视频广告" },{ value: 1548, name: "搜索引擎" }]```|
|center|饼图的中心（圆心）坐标，支持设置成百分比|```Array```|```['50%', '60%']```|
|pieFormatter|饼图提示框浮层内容格式器|```Function```|```params => `${params.name}\n${params.percent}%` ```,详情参看[Click][pieOptt]|
|pieOpt|设置饼图样式|```Object```|详情参看[Click pieOpt][pieOpt]|
|insertPieOpt|设置内饼图样式|```Object```|详情参看[Click pieOpt][pieOpt]|
|insertText|设置内饼图文字|```String```|`'测试\n文案'`|
|insertColor|设置内饼图颜色|```String```|`'#02072C'`|
|insertTextColor|设置内饼图文字颜色|```String```|`'#02cdff'`|
|changeOpt|通用图表配置修改，优先级低于pieOpt|```Object```|详情参看[Click changeOpt][changeOpt]|

### 地图（中国、武汉、黄陂）
目前地图只有三种类型的，暂不支持导入geojson

```
<DoMap />
<DoMap type="wuhan"/>
<DoMap type="hp"/>
```

## 效果图：
![bar Pic](http://m.qpic.cn/psb?/V10unsPD0QOZQy/2f9vVmWg.iSlA5CT.Oy1E3J33p2ogvgftkZtvjP2bWs!/b/dFMBAAAAAAAA&bo=yA*8AwAAAAADNyo!&rf=viewer_4)

## API
通过设置属性来产生不同的样式

|属性|说明|类型|默认值|
|---|---|---|---|
|type|地图类型(```"china"|"hp"|"wuhan"```)|```Enum ```|```"china"```|
|formatter|地图提示框浮层内容格式器|```Function```|```params => `<span class="mapTooltipStyle"></span>${params.name}` ```|
|labelText|地图点位文字显示 |```Boolean```|```false```|
|mapData|地图点位数据|```Array```|```[{ name: "大庆", value: [125.03, 46.58] },{ name: "武汉", value: [114.31, 30.52] },{ name: "合肥", value: [117.27, 31.86] },{ name: "菏泽", value: [115.480656, 35.23375] },{ name: "廊坊", value: [116.7, 39.53] },{ name: "衢州", value: [118.88, 28.97] }]```|
|mapOpt|设置地图样式|```Object```|详情参看[Click mapOpt][mapOpt]|
|changeOpt|通用图表配置修改，优先级低于mapOpt|```Object```|详情参看[Click changeOpt][changeOpt]|
|animation|图表提示框浮层动画|```Boolean```|```false```|
|animationTime|图表提示框浮层动画时间|```Number```|```1000```|


### 联系我
添加好友请备注</br>

QQ: 498513334 </br>
Wechat: qiushi884745

### 赞助

<img src="http://m.qpic.cn/psb?/V10unsPD0QOZQy/HWhF98qE1qrdEXQG1KJzTjBH0BZ7LffERhMdjNDs0B0!/b/dFEBAAAAAAAA&bo=OAS6BQAAAAARF6M!&rf=viewer_4" width="500">



[formatter]: https://www.echartsjs.com/zh/option.html#tooltip.formatter
[barOpt]: https://www.echartsjs.com/zh/option.html#series-bar
[lineOpt]: https://www.echartsjs.com/zh/option.html#series-line
[pieOpt]: https://www.echartsjs.com/zh/option.html#series-pie
[pieOptt]: https://www.echartsjs.com/zh/option.html#series-pie.label.formatter
[mapOpt]: https://www.echartsjs.com/zh/option.html#series-map
[changeOpt]: https://www.echartsjs.com/zh/option.html#title
