# echarts-package

> 基于 echarts 的封装的通用型组件，内置多种模板，坚持以简单的配置实现项目中的各种图表

Latest version **1.1.8** (published 2022-03-29) · 0 weekly downloads

## Install

```sh
npm install echarts-package
pnpm add echarts-package
yarn add echarts-package
bun add echarts-package
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2022-03-29 |
| First published | 2022-03-16 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 314.1 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | shishezhang |
| Maintainers | shishezhang |

## Links

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

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [echarts](https://npm.io/package/echarts.md) ^5.3.0

## Recent versions

- 1.1.8 (latest) — 2022-03-29
- 1.1.7 — 2022-03-29
- 1.1.6 — 2022-03-29
- 1.1.5 — 2022-03-29
- 1.1.4 — 2022-03-29
- 1.1.3 — 2022-03-29
- 1.1.2 — 2022-03-29
- 1.1.1 — 2022-03-29
- 1.1.0 — 2022-03-29
- 1.0.16 — 2022-03-28
- 1.0.15 — 2022-03-28
- 1.0.14 — 2022-03-28
- 1.0.13 — 2022-03-28
- 1.0.12 — 2022-03-28
- 1.0.11 — 2022-03-28
- … 11 more at https://npm.io/package/echarts-package/versions

## README

# 文档传送门

最新详细文档，请移步文档中阅读

### [官网文档](https://ceshi-5gsqzqb347f614e2-1303949867.tcloudbaseapp.com/getStarted.html)

## 依赖环境

因为该库是基于 echarts 来封装的，所以必须要依赖 echarts

> echarts

## 安装使用

步骤一：
下载 npm 包

```npm
npm install echarts
npm install echarts-package
```

步骤二：
引入安装插件

```js
import * as echarts from "echarts"
Vue.prototype.$echarts = echarts

import echartsView from "echarts-package"
Vue.use(echartsView)
```

步骤三：
在页面上使用组件，在 echarts-package 中默认接收以 `name` 和 `value` 命名的属性，以此来渲染页面，后端返回的数据源以参数的形式传入 `this.$eChartFn.handleData` 方法中处理，将并选择对应的 `template` 作为渲染模板，最后将方法返回的配置传入 `echartsView` 组件中，即可渲染数据。

```vue
<template>
  <div>
    <!-- 为 ECharts 传入数据源和定义 -->
    <echartsView :chart-option="chartOpt"></echartsView>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      chartOpt: {},
    }
  },
  mounted() {
    // 准备好模拟后端返回的数据列表
    let data = [
      {
        name: "小兰",
        value: 76,
      },
      {
        name: "小绿",
        value: 43,
      },
      {
        name: "小红",
        value: 27,
      },
    ]
    // 使用内置的 handleData 方法处理数据
    this.chartOpt = this.$eChartFn.handleData({ template: "baseBar", data })
  },
}
</script>
```

是的就是这么简单，只需要传入数据源和配置模板即可，效果如下所示

![效果图](./images/getStarted-img1.png)

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