Vue-echarts-generator NPM

vue-echarts-generator

介绍

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

安装

本模块依赖了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>

设计器的使用细节，参考设计器操作栏的“选择预设页面”选项。