study/vue-component-creater-ui
1
0
Fork 0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-06-06 13:04:05 +08:00
Code Issues Releases Wiki Activity

feat: 集成echart

Browse Source
This commit is contained in:
Shangbin 2023-12-06 17:23:12 +08:00
parent 7c57f50e9a
commit 1c11a0c364
15 changed files with 7763 additions and 9496 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11379
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -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,

4
src/components-v2/ToolsBar.vue
View File

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

2
src/components/AttributeInput.vue
View File

@ -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>

13
src/components/RawComponents.vue
View File

@ -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"))
},
};

14
src/libs/main-panel.js
View File

@ -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);

5
src/main.js
View File

@ -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];

2
src/map/data.index.js
View File

File diff suppressed because one or more lines are too long

2
src/map/style.index.js
View File

@ -1 +1 @@
export default {".container":"",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader :v-deep(.el-upload)":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;","#vant-button > *":"margin: 0 5px 5px 0;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;",":v-deep(.van-tabbar--fixed)":"position: initial;",":v-deep(.van-address-list__bottom)":"position: relative;",":v-deep(.van-submit-bar)":"position: initial;"}
export default {".container":"",".echart-class":"padding: 20px; display: flex; flex-direction: column; gap: 10px;",".chart":"height: 300px; width: 100% !important; border: 1px dashed #c6c6c6; border-radius: 5px;",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader :v-deep(.el-upload)":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;","#vant-button > *":"margin: 0 5px 5px 0;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;",":v-deep(.van-tabbar--fixed)":"position: initial;",":v-deep(.van-address-list__bottom)":"position: relative;",":v-deep(.van-submit-bar)":"position: initial;"}

2
src/map/template.index.js
View File

File diff suppressed because one or more lines are too long

98
src/rawComponents/echart/chart.vue Normal file
View File

@ -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>

41
src/rawComponents/echart/index.vue Normal file
View File

@ -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>

11
src/rawComponents/echart/init.vue Normal file
View File

@ -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>

2
src/script/compile.js
View File

@ -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}个文件进行编译...`);

5674
yarn.lock
View File

File diff suppressed because it is too large Load Diff