# @hd-fe/echarts

> 前端图表库

Latest version **0.2.11** (published 2021-05-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hd-fe/echarts
pnpm add @hd-fe/echarts
yarn add @hd-fe/echarts
bun add @hd-fe/echarts
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.11 |
| Published | 2021-05-27 |
| First published | 2020-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 183.7 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | chenguoqin |
| Maintainers | chenguoqin, fida, chenzebin, carey4756, luozyhd, philly_pan |
| Keywords | ECharts, Vue.js |

## Links

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

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [core-js](https://npm.io/package/core-js.md) ^2.6.10
- [vue-router](https://npm.io/package/vue-router.md) ^3.1.3
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.16.2
- [resize-detector](https://npm.io/package/resize-detector.md) ^0.2.0

## 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.2.11 (latest) — 2021-05-27
- 0.2.10 — 2021-03-19
- 0.2.9 — 2020-12-02
- 0.2.8 — 2020-07-27
- 0.2.7 — 2020-07-27
- 0.2.6 — 2020-07-27
- 0.2.5 — 2020-07-13
- 0.2.4 — 2020-07-08
- 0.2.3 — 2020-07-07
- 0.2.2 — 2020-07-03
- 0.2.1 — 2020-07-01
- 0.1.49 — 2020-06-22
- 0.1.48 — 2020-06-04
- 0.1.47 — 2020-05-20
- 0.1.46 — 2020-05-20
- … 9 more at https://npm.io/package/@hd-fe/echarts/versions

## README

# 汇电图表库说明

> 本图表库以简单易用为基本原则，仅对 `echarts` 常用图表和配置进行了简单封装。所有配置格式与 `echarts` 官网一致。

## 主要功能

- 主题定制，统一全局图表样式

- 封装常用图表类型和配置属性

## 使用

### 完整引入

```
  // main.js
  import Vue from 'vue'
  import HdECharts from '@hd-fe/echarts'
  import App from './App.vue'

  Vue.use(HdECharts)

  new Vue({
    el: '#app',
    render: h => h(App)
  })
```

### 按需引入

```
  import Vue from 'vue'
  import { HdLine } from '@hd-fe/echarts'
  import App from './App.vue'

  Vue.use(HdLine)

  new Vue({
    el: '#app',
    render: h => h(App)
  })
```

## 主题定制

### 完整引入时

```
  ...
  import HdECharts from '@hd-fe/echarts'
  import theme from './theme.json'

  Vue.use(HdECharts, { theme })
```

`themm.json` 文件可参考 [主题编辑器](https://echarts.baidu.com/theme-builder/) 导出，与 [官网配置项](https://echarts.baidu.com/option.html)  配置基本一致


### 按需引入时

```
  ...
  import { HdLine, HdBar } from '@hd-fe/echarts'
  import theme from './theme.json'

  Vue.use(HdLine, { theme })  // theme是全局设置，只需要设置一次
  Vue.use(HdBar)  // HdLine已设置theme，HdBar可不再配置
```

## 封装的图表类型

### 折线

### 柱状

### 饼状

### 雷达图

### 拆线-柱状

### 其他

## 可配置的属性

- `title: Object` 配置格式与 `echarts` 官网配置 `options` 下的 `title` 相同
- `legend: Object` 配置格式与 `echarts` 官网配置 `options` 下的 `legend` 相同
- `tooltip: Object` 配置格式与 `echarts` 官网配置 `options` 下的 `tooltip` 相同
- `xAxis: Object` 配置格式与 `echarts` 官网配置 `options` 下的 `xAxis` 相同
- `yAxis: Object` 配置格式与 `echarts` 官网配置 `options` 下的 `yAxis` 相同
- `series: Array` 配置格式与 `echarts` 官网配置 `options` 下的 `series` 相同
- `options: Object` 配置格式与 `echarts` 官网配置 `options` 相同
- `watchShallow: Boolean` 对 `options` 值进行浅监听并触发图表更新，默认值 `true` ，如果需要进行 `options` 值的深监听，可设置 `false`
- `autoresize: Boolean` 浏览器窗口大小改变时自适应，默认值 `true` 可设置 `false`

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