vue-hooks-charts

基于 ECharts 自定义图表

安装

$ npm install vue-hooks-charts -S

$ yarn add vue-hooks-charts

使用

在 main.js 文件中引入插件并注册

import HooksCharts from 'vue-hooks-charts'

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

options 全局配置

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

在项目中使用

<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>