vue-echarts-generator

介绍

通过用户图形界面操作，生成基于echarts的动态图表页面，并快捷的引入到您的项目中使用。更多介绍参考在线文档。

安装

本模块依赖了[email protected], [email protected], [email protected], vue-echarts@5，使用前请确认这些依赖的版本号。
根据不同的场景需要，并行发布为两个大版本，其中：

• （推荐）[email protected]为核心库（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)

• [email protected]为捆绑库（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 模式，图表的渲染与数据完全分离。

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

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

🆗支持图表内交互：如移动坐标轴、缩放指针区域动态更新数据等，参考 ECharts 交互组件。

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