feat: 集成echart

Author: sahadev

package-lock.json

@@ -32,6 +32,7 @@
     "crypto-random-string": "^3.3.1",
     "css": "^3.0.0",
     "css-scoped": "^1.0.0",
+    "echarts": "^5.4.3",
     "ejs": "^3.1.6",
     "element-plus": "^2.4.3",
     "escodegen": "^2.0.0",
@@ -47,6 +48,7 @@
     "split.js": "^1.6.2",
     "vant": "^3.3.7",
     "vue": "^3.3.10",
+    "vue-echarts": "^6.6.2",
     "vue-github-button": "^1.3.0",
     "vue-template-compiler": "^2.6.14",
     "vuedraggable": "^4.1.0",
@@ -55,11 +57,6 @@
   "devDependencies": {
     "@babel/generator": "^7.11.6",
     "@rollup/plugin-dynamic-import-vars": "^1.4.1",
-    "vite": "^2.6.14",
-    "@vue/cli-plugin-babel": "^4.2.0",
-    "@vue/cli-plugin-eslint": "^4.2.0",
-    "@vue/cli-plugin-pwa": "^4.2.0",
-    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
@@ -69,7 +66,8 @@
     "is-regexp": "^3.0.0",
     "lint-staged": "^9.5.0",
     "sass": "^1.25.0",
-    "sass-loader": "^8.0.2"
+    "sass-loader": "^8.0.2",
+    "vite": "^2.6.14"
   },
   "eslintConfig": {
     "root": true,

package.json

@@ -47,9 +47,11 @@
 </template>
 
 <script>
+
 export default {
   props: [],
-  components: { },
+  components: { 
+  },
   data() {
     return {
       previewMode: false,

src/components-v2/ToolsBar.vue

@@ -10,7 +10,7 @@
     <div style="margin-top: 20px;">
       <div name="1" v-show="!editMode">
         <div>
-          <div class="item" v-for="(item, index) in localAttributes" :key="item.key">
+          <div class="item" v-for="(item, index) in localAttributes" :key="index">
             <el-input v-model="item.key" :placeholder="'key' + index" class="half-width" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
             <div class="split">:</div>
             <el-input v-model="item.value" type="textarea" :placeholder="'value' + index" class="half-width" style="flex-grow: 4;" :autosize="{ minRows: 2, maxRows: 4}"></el-input>

src/components/AttributeInput.vue

@@ -50,7 +50,7 @@
       </div>
     </nav>
 
-    <div style="overflow:scroll;padding:0 10px;">
+    <div style="overflow:scroll;padding:0 10px;width: 100%;">
       <keep-alive>
         <component :is="currentSelectBrand.componentName" @mounted='onMouted(currentIndex)'></component>
       </keep-alive>
@@ -99,6 +99,14 @@ export default {
       }, {
         icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/quasar-n.png'),
         enable: false
+      }, {
+        icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/pie.png'),
+        clickCallback: this.onSelectElement, 
+        className: "demonstration-echart", 
+        selectIndex: 0, 
+        componentName: 'echart', 
+        enable: true, 
+        titleArray: [], 
       }, {
         icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/antd-n.svg'), // 组件库导航图标
         clickCallback: this.onSelectElement, // 图标点击回调
@@ -220,7 +228,8 @@ export default {
     // iview,
     // quasar,
     ele: defineAsyncComponent(() => import("../rawComponents/element/index.vue")),
-    antd: defineAsyncComponent(() => import("../rawComponents/antd"))
+    antd: defineAsyncComponent(() => import("../rawComponents/antd")),
+    echart: defineAsyncComponent(() => import("../rawComponents/echart"))
   },
 
 };

src/components/RawComponents.vue

@@ -49,7 +49,7 @@ export class MainPanelProvider {
         let code = this.codeGenerator.outputVueCodeWithJsonObj(rawDataStructure);
 
         // 将xxx: () => {} 转换为xxx(){}
-        code = code.replace(/:\s*\(([\w\s]*)\)\s*=>/g,"\($1\)");
+        code = code.replace(/:\s*\(([\w\s]*)\)\s*=>/g, "\($1\)");
 
         // 生成展示代码
         let codeForShow = code.replace(/\s{1}lc_id=".+?"/g, '');
@@ -67,19 +67,19 @@ export class MainPanelProvider {
         const componentOptions = (new Function(`return ${newScript}`))();
 
         componentOptions.template = template.content;
-        
+
         if (this.editMode) {
             // 渲染当前代码
             const readyForMoutedElement = this.createMountedElement();
             createBaseAppAsync(componentOptions).then(app => {
                 app.mount(readyForMoutedElement)
-                // 开启编辑模式
+                // 开启编辑模式，这个方式会导致正常渲染的事件被中断， 例如EChart的加载渲染。
                 this.enableEditMode();
             });
-            
+
             // 拍平数据结构
             this.flatDataStructure(rawDataStructure);
-    
+
         } else {
             // 渲染当前代码
             createBaseAppAsync(componentOptions).then(app => app.mount(this.mountedEle));
@@ -280,11 +280,11 @@ export class MainPanelProvider {
     enableEditMode() {
         const renderControlPanel = this.getControlPanelRoot();
         // 加一个延迟的作用是：给el-table这种绘制需要时间的组件留出充足的时间，否则会造成el-table渲染不到页面上
-        
+
         if (this.enableDelayTask) {
             clearTimeout(this.enableDelayTask);
         }
-        
+
         this.enableDelayTask = setTimeout(() => {
             // 这种方式可以禁用原节点所有的事件
             const elClone = renderControlPanel.cloneNode(true);

src/libs/main-panel.js

@@ -13,15 +13,18 @@ import "element-plus/dist/index.css";
 import APP from "./App.vue";
 import loadCompontents from "@/libs/UIComponentInit.js";
 
+import Chart from './rawComponents/echart/init';
+
 /**
  * 创建实例基础方法
  * @param {*} renderComponent 
  * @param {*} loadFinished 
  * @returns 
  */
-function loadTemplate(renderComponent, loadFinished = () => {}) {
+function loadTemplate(renderComponent, loadFinished = () => { }) {
   const app = createApp(renderComponent);
   app.use(ElementPlus);
+  app.component('VChart', Chart);
   loadCompontents().then((modules) => {
     for (let index = 0; index < modules.length; index++) {
       const module = modules[index];

src/main.js

@@ -0,0 +1,98 @@
+<template lc_id="Bb1LYS7hJm">
+  <div class="echart-class" lc_id="OT0KmxfA/e">
+    <div style="font-size: 12px;">
+      Tips: Vcc使用的是vue-echarts，因此实际使用时也需要将vue-echarts集成至项目中使用。
+      另外由于渲染器本身的原因，在将eChart拖入到面板之后，<span style="color:red;">会有无法正常展示的问题</span>。
+      代码本身是没有问题的，在预览模式下也可以正常渲染。
+    </div>
+    <v-chart
+      class="chart"
+      style="height: 300px; width: 500px"
+      :option="echartPieOption"
+      autoresize
+      lc-mark
+      lc_id="4C2wEjQs0u"
+    ></v-chart>
+    <v-chart
+      class="chart"
+      style="height: 300px; width: 500px"
+      :option="echartBarOption"
+      autoresize
+      lc-mark
+      lc_id="zQ9T9YQOw3"
+    ></v-chart>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      echartPieOption: {
+        title: {
+          text: 'Traffic Sources',
+          left: 'center',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
+        },
+        series: [
+          {
+            name: 'Traffic Sources',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [
+              { value: 335, name: 'Direct' },
+              { value: 310, name: 'Email' },
+              { value: 234, name: 'Ad Networks' },
+              { value: 135, name: 'Video Ads' },
+              { value: 1548, name: 'Search Engines' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      },
+      echartBarOption: {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+          },
+        ],
+      },
+    };
+  },
+  mounted() {},
+  provide: {},
+};
+</script>
+<style scoped>
+.echart-class {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chart {
+  height: 300px;
+  width: 100% !important;
+  border: 1px dashed #c6c6c6;
+  border-radius: 5px;
+}
+</style>

src/map/data.index.js

@@ -0,0 +1,41 @@
+<template>
+  <div class="echart-class">
+    <Chart />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+import { deepLCEle } from '@/utils/initRawComponent';
+
+export default {
+  components: {
+    Chart,
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$emit('mounted');
+    // 对所有拥有lc-mark的元素进行初始化
+    deepLCEle(document.querySelector('.echart-class'), () => {});
+  },
+  provide: {},
+};
+</script>
+
+<style scoped>
+.echart-class {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chart {
+  height: 300px;
+  width: 100%;
+  border: 1px dashed #c6c6c6;
+  border-radius: 5px;
+}
+</style>

src/map/style.index.js

@@ -0,0 +1,11 @@
+<script>
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { PieChart, BarChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
+import VChart from 'vue-echarts';
+
+use([CanvasRenderer, PieChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent]);
+
+export default VChart;
+</script>

src/map/template.index.js

@@ -14,7 +14,7 @@ glob(
   {
     cwd: componentsPath,
     absolute: true,
-    ignore: ["**/element/index.vue", "**/vant/index.vue", "**/iview/index.vue", "**/antd/index.vue"],
+    ignore: ["**/element/index.vue", "**/vant/index.vue", "**/iview/index.vue", "**/antd/index.vue", "**/echart/index.vue"],
   },
   function (er, files) {
     console.info(`正在对${files.length}个文件进行编译...`);