# vue-hooks-charts

> 基于 ECharts 自定义图表

## 安装

``` bash
$ npm install vue-hooks-charts -S
```
``` bash
$ yarn add vue-hooks-charts
```

### 使用
在 `main.js` 文件中引入插件并注册
``` js
import HooksCharts from 'vue-hooks-charts'

let options = {
  base: 'http://localhost:8880'
}
Vue.use(HooksCharts, options)
```


------


#### options 全局配置
| 配置项 |  类型  |  默认值  |    说明    |            备注            |
| :----: | :----: | :------: | :--------: | :------------------------: |
|  base  | String | undefined | 服务器地址 | 如: http://localhost:8880 |


------


#### 在项目中使用
``` html
<template>
  <div>
    <a-card
      :bordered="false"
      :bodyStyle="{background: '#f0f2f5'}"
    >
      <a-tabs default-active-key="2">
        <a-tab-pane
          key="1"
          tab="HooksCharts"
        >
          <HooksCharts
            :options="options"
            @create="create"
            @edit="edit"
            @remove="remove"
          />
        </a-tab-pane>
        <a-tab-pane
          key="2"
          tab="HooksChartsEdit"
          force-render
        >
          <HooksChartsEdit />
        </a-tab-pane>
        <a-tab-pane
          key="3"
          tab="HooksChartsDetail"
        >
          <HooksChartsDetail />
        </a-tab-pane>
        <a-tab-pane
          key="4"
          tab="HooksReportList"
        >
          <HooksReportList />
        </a-tab-pane>
        <a-tab-pane
          key="5"
          tab="HooksReportEdit"
        >
          <HooksReportEdit />
        </a-tab-pane>
        <a-tab-pane
          key="6"
          tab="HooksReportDetail"
        >
          <HooksReportDetail />
        </a-tab-pane>
      </a-tabs>
    </a-card>

  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      // 查询条件
      options: {
        title: "HooksCharts",
        createBtnText: "创建自定义图表"
      }
    };
  },
  mounted() {
    // 自定义图表-详情页
  },
  methods: {
    create() {},
    edit(item) {
      console.log("edit");
      console.log(JSON.stringify(item));
    },
    remove(item) {
      console.log("remove");
      console.log(JSON.stringify(item));
    }
  }
};
</script>

<style>
</style>

```