vue-hooks-charts
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>
Dependencies
ant-design-vue: ^1.6.5axios: ^0.21.0babel-helper-vue-jsx-merge-props: ^2.0.3babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-vue-jsx: ^3.7.0babel-preset-env: ^1.7.0core-js: ^3.6.5echarts: ^4.9.0eslint-loader: ^4.0.2jspdf: ^2.3.0less: ^3.12.2less-loader: ^7.0.2md5: ^2.3.0moment: ^2.29.1vue: ^2.6.11vue-loader: ^15.9.5vue-ls: ^3.2.1vue-router: ^3.4.9vuex: ^3.5.1