hd-echarts/README.md

huidian ECharts component for Vue.js.

# 汇电图表库说明

> 本图表库以简单易用为基本原则，仅对 `echarts` 常用图表和配置进行了简单封装。所有配置格式与 `echarts` 官网一致。

## 主要功能

- 主题定制，统一全局图表样式

- 封装常用图表类型和配置属性

## 使用

### 完整引入

```
  // main.js
  import Vue from 'vue'
  import HdECharts from 'hd-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-echarts'
  import App from './App.vue'

  Vue.use(HdLine)

  new Vue({
    el: '#app',
    render: h => h(App)
  })
```

## 主题定制

### 完整引入时

```
  ...
  import HdECharts from 'hd-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-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`