# 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的文本组件，您可以在页面中设计出文档风格的说明文本。
