# @alex_doone/echarts

> ## 安装使用

Latest version **0.3.1** (published 2019-11-20) · 0 weekly downloads

## Install

```sh
npm install @alex_doone/echarts
pnpm add @alex_doone/echarts
yarn add @alex_doone/echarts
bun add @alex_doone/echarts
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2019-11-20 |
| First published | 2019-10-16 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 24.7 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | heianxiyi |
| Keywords | echarts, charts, vue, components |

## Links

- npm: https://www.npmjs.com/package/@alex_doone/echarts
- npm.io page: https://npm.io/package/@alex_doone/echarts

## Dependencies (8)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [stylus](https://npm.io/package/stylus.md) ^0.54.7
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [echarts](https://npm.io/package/echarts.md) ^4.4.0
- [vue-echarts](https://npm.io/package/vue-echarts.md) ^4.0.4
- [stylus-loader](https://npm.io/package/stylus-loader.md) ^3.0.2
- [resize-detector](https://npm.io/package/resize-detector.md) ^0.1.10

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2019-11-20
- 0.3.0 — 2019-11-18
- 0.2.19 — 2019-11-14
- 0.2.18 — 2019-11-09
- 0.2.17 — 2019-10-31
- 0.2.16 — 2019-10-31
- 0.2.15 — 2019-10-29
- 0.2.14 — 2019-10-29
- 0.2.13 — 2019-10-29
- 0.2.12 — 2019-10-29
- 0.2.11 — 2019-10-29
- 0.2.10 — 2019-10-29
- 0.2.9 — 2019-10-29
- 0.2.8 — 2019-10-29
- 0.2.7 — 2019-10-25
- … 21 more at https://npm.io/package/@alex_doone/echarts/versions

## README

# 大数据图表组件

## 安装使用

### 第一步

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

### 第二步

在main.js文件里注册组件(注册所有图表组件)
```
import Doone from '@alex_doone/echarts'
import '@alex_doone/echarts/dist/doone-charts.cssß'
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```|

#### ⚠️ 注意事项

##### 引入源码版本

默认在 webpack 环境下会引入未编译的源码版本，如果你正在使用官方的 Vue CLI 来创建项目，可能会遇到默认配置把 `node_modules` 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置：

当使用 **Vue CLI 3+** 时，需要在 `vue.config.js` 中的 `transpileDependencies` 增加 `vue-echarts` 及 `resize-detector`，如下：

```js
// vue.config.js
module.exports = {
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}
```

### Props *（均为响应式）*

* `initOptions`

  用来初始化 ECharts 实例。

* `theme`

  当前 ECharts 实例使用的主题。

* `options`

  ECharts 实例的数据。修改这个 prop 会触发 ECharts 实例的 `setOption` 方法。

  如果直接修改 `options` 绑定的数据而对象引用保持不变，`setOption` 方法调用时将带有参数 `notMerge: false`。否则，如果为 `options` 绑定一个新的对象，`setOption` 方法调用时则将带有参数 `notMerge: true`。

### 方法

* `mergeOptions`（底层调用了 ECharts 实例的 `setOption` 方法）

  *提供了一个更贴切的名称来描述 `setOption` 方法的实际行为。*

* `appendData`
* `resize`
* `dispatchAction`
* `showLoading`
* `hideLoading`
* `convertToPixel`
* `convertFromPixel`
* `containPixel`
* `getDataURL`
* `getConnectedDataURL`
* `clear`
* `dispose`

### 静态方法

* `connect`
* `disconnect`
* `registerMap`
* `registerTheme`
* `graphic.clipPointsByRect`
* `graphic.clipRectByRect`

### 事件

支持如下事件：

* `legendselectchanged`
* `legendselected`
* `legendunselected`
* `legendscroll`
* `datazoom`
* `datarangeselected`
* `timelinechanged`
* `timelineplaychanged`
* `restore`
* `dataviewchanged`
* `magictypechanged`
* `geoselectchanged`
* `geoselected`
* `geounselected`
* `pieselectchanged`
* `pieselected`
* `pieunselected`
* `mapselectchanged`
* `mapselected`
* `mapunselected`
* `axisareaselected`
* `focusnodeadjacency`
* `unfocusnodeadjacency`
* `brush`
* `brushselected`
* `rendered`
* `finished`
* 鼠标事件
  * `click`
  * `dblclick`
  * `mouseover`
  * `mouseout`
  * `mousemove`
  * `mousedown`
  * `mouseup`
  * `globalout`
  * `contextmenu`

更多详细信息请参考 [ECharts 的 API 文档](https://echarts.apache.org/zh/api.html)。

## 柱状图

```
<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" :xAxisData="line.xAxisData"/>
<script>
export default {
    name: "app",
    data() {
        return {
            line: {
                xAxisData: [
                    "2014年",
                    "2015年",
                    "2016年",
                    "2017年",
                    "2018年"
                ],
                charsData: [
                    {
                        name: "人均年收入",
                        data: [11, 11, 15, 13, 12],
                    },
                    {
                        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"|"caidian"|"dongxihu"|"hannan"|"jiangxia"|"xinzhou"```)|```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

---
_Source: https://npm.io/package/@alex_doone/echarts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._