# vue-echarts-generator

> generate dynamic charts page by GUI

Latest version **2.2.6** (published 2020-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-echarts-generator
pnpm add vue-echarts-generator
yarn add vue-echarts-generator
bun add vue-echarts-generator
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.6 |
| Published | 2020-09-14 |
| First published | 2020-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 13.5 MB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | xiaozhaoqi |
| Maintainers | zhaoqi.xiao |
| Keywords | echarts, vue, generator, element-ui |

## Links

- npm: https://www.npmjs.com/package/vue-echarts-generator
- npm.io page: https://npm.io/package/vue-echarts-generator

## Dependencies (5)

- [showdown](https://npm.io/package/showdown.md) ^1.9.1
- [vue-tour](https://npm.io/package/vue-tour.md) ^1.5.0
- [clipboard](https://npm.io/package/clipboard.md) ^2.0.6
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.16.0
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.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

- 2.2.6 (latest) — 2020-09-14
- 1.2.6 — 2020-09-14
- 1.2.5 — 2020-09-02
- 2.2.5 — 2020-09-02
- 2.2.4 — 2020-09-01
- 1.2.4 — 2020-09-01
- 1.2.3 — 2020-08-31
- 1.2.2 — 2020-08-31
- 2.2.1 — 2020-08-28
- 1.2.1 — 2020-08-28
- 2.2.0 — 2020-08-24
- 1.2.0 — 2020-08-24
- 2.1.8 — 2020-08-21
- 1.1.8 — 2020-08-21
- 1.1.7 — 2020-08-21
- … 17 more at https://npm.io/package/vue-echarts-generator/versions

## README

# vue-echarts-generator
## 介绍
通过用户图形界面操作，生成基于echarts的动态图表页面，并快捷的引入到您的项目中使用。更多介绍参考[在线文档](https://xiaozhaoqi.github.io/vue-echarts-generator-docs)。
## 安装
本模块依赖了vue@2.6, element-ui@2.13, echarts@4.8, vue-echarts@5，**使用前请确认这些依赖的版本号**。  
根据不同的场景需要，并行发布为两个大版本，其中：  
+ （推荐）vue-echarts-generator@1.x.x为核心库（Gzipped: 109 KiB），只包含了库本身的内容，不含第三方依赖，因此使用@1.x.x版本需要您自行引入和注册第三方依赖，这样做的好处是您可以完全控制和管理依赖包的行为：
```
npm i element-ui echarts vue-echarts vue-echarts-generator@1 --save
```
```
import Vue from 'vue'
import ElementUI from 'element-ui' // 这里可以仅引入部分需要的组件
import ECharts from 'vue-echarts'
import vcg from 'vue-echarts-generator'
import 'vue-echarts-generator/dist/VueEchartsGenerator.css'
import 'echarts' // 这里可以仅引入部分需要的图形
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI, { size: 'small' })
Vue.component('v-chart', ECharts)
Vue.use(vcg)
```
+ vue-echarts-generator@2.x.x为捆绑库（Gzipped: echarts 212 KiB，element-ui 157 KiB），这是一个开箱即用的版本，它包含了所有的第三方依赖，因此您只需要引入vue并注册即可：
```
npm i vue-echarts-generator@2 --save
```
```
import Vue from 'vue'
import vcg from 'vue-echarts-generator'
import 'vue-echarts-generator/dist/VueEchartsGenerator.css'

Vue.use(vcg)
```
## 用法
在引入并注册后，本模块提供了两个Vue组件：
+ vcg-designer 设计器组件，在此组件中您可以通过界面操作，设计一个可以包含表单、布局、图表、数据、业务逻辑的页面，设计完成后的结果是一个JSON标准对象。**引入时请显式指定CSS高度。**
+ vcg-generator 生成器组件，将上述JSON标准对象传入此组件，就会解析并渲染为预期的页面。

实际使用例子：
```
<template>
  <div id="app">
    <!-- 设计器：用于设计页面 -->
    <vcg-designer @onSave="handleSave" class="designer" />
    <!-- 生成器：用于引入设计结果 -->
    <vcg-generator :data="pageJSON" @onFormChange="onFormChange" />
  </div>
</template>

<script>
  export default {
    name: 'App',
    data: function () {
      return {
        pageJSON: {"list": []},
        formData: {}
      }
    },
    methods:{
      handleSave(pageJSON) {
        this.pageJSON = pageJSON
      },
      onFormChange(formData) {
        this.formData = formData
      }
    }
  }
</script>

<style>
  .designer {
    height: 400px;
  }
</style>
```
设计器的使用细节，**参考设计器操作栏的“选择预设页面”选项**。
## 特点
🆗**所见即所得**：设计器支持动态渲染表单和echarts图表等组件，在配置面板调整属性，组件装配区实时渲染设计结果。

🆗**交互适配**：设计器布局优化，两侧面板可独立隐藏，兼容窄屏幕。

🆗**多种数据获取方式**：通过触发器，图表数据源支持远程方法调用、配置HTTP请求、SQL绑定等异步数据获取方式。数据源格式使用ECharts 4的 [dataset](https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE) 模式，图表的渲染与数据完全分离。

🆗**低代码**：页面运行时，支持用户通过表单提交，更新一张或多张图表数据源，允许Cookie或JWT鉴权。相关的业务逻辑保存在设计结果中，不需要额外的控制代码。

🆗**定时任务**：支持触发器执行定时任务，提供更灵活的图表展现形式，如数据随时间变化的监控图表。

🆗**支持图表内交互**：如移动坐标轴、缩放指针区域动态更新数据等，参考 [ECharts 交互组件](https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%9B%BE%E8%A1%A8%E4%B8%AD%E5%8A%A0%E5%85%A5%E4%BA%A4%E4%BA%92%E7%BB%84%E4%BB%B6)。

🆗**支持Markdown设计**：基于showdown的文本组件，您可以在页面中设计出文档风格的说明文本。

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