From 589e1e8c5f087712b90854ccaaf358ab23e6dc4f Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Fri, 29 Jan 2021 14:20:09 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=96=B0=E5=A2=9EChartScreen=E4=BD=9C?=
=?UTF-8?q?=E4=B8=BA=E5=9B=BE=E8=A1=A8Demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../form-designer/src/GenerateFormItem.vue | 45 ++-
.../src/components/Charts/Echarts.vue | 6 +-
src/demo/App.vue | 37 +-
src/demo/component/ChartScreen.vue | 42 ++
src/demo/component/data/index.ts | 364 ++++++++++++++++++
5 files changed, 464 insertions(+), 30 deletions(-)
create mode 100644 src/demo/component/ChartScreen.vue
create mode 100644 src/demo/component/data/index.ts
diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
index 01469be..d5baf53 100644
--- a/src/component/form-designer/src/GenerateFormItem.vue
+++ b/src/component/form-designer/src/GenerateFormItem.vue
@@ -425,14 +425,6 @@ export default class GenerateFormItem extends Vue {
})
readOnly!: boolean;
- // 子表单单个组件value
- @Prop()
- value: any;
-
- // 子表单单个组件初始值model
- @Prop()
- model: any;
-
// 组件校验规则
@Prop()
rules: any;
@@ -448,32 +440,45 @@ export default class GenerateFormItem extends Vue {
normalizer: any;
initData() {
- // 如果是子表单
- if (this.model) {
- if (this.widget.options.multiple || 'cascader,checkbox'.includes(this.widget.type)) {
- this.dataModel = typeof this.model === 'string' ? this.model.split(',') : this.model;
- } else {
- this.dataModel = this.model;
- }
- return;
- }
+ const { type, model } = this.widget;
+ // if (this.model) {
+ // // 多选组件需要初始化值为数组
+ // if (this.widget.options.multiple || 'cascader,checkbox'.includes(type)) {
+ // this.dataModel = typeof this.model === 'string' ? this.model.split(',') : this.model;
+ // } else {
+ // this.dataModel = this.model;
+ // }
+ // return;
+ // }
let normalizer;
- if (this.widget.type === 'treeselect') {
+ // tree-select组件初始化
+ if (type === 'treeselect') {
const { value, label } = this.widget.options.props;
normalizer = (node) => {
// 去掉children=null的属性
if (node.children === null || node.children === 'null') {
delete node.children;
}
- // 此处暂时写反了...暂时不做修改
return {
id: node[value],
label: node[label],
};
};
+ } else if (type.includes('chart-')) { // 图表预设option
+ // 如果是通用图表则传入的值为option
+ if (type === 'chart-common') {
+ if (this.models[model]) {
+ this.widget.options.option = this.models[model];
+ }
+ } else { // 指定图表默认转入data
+ // eslint-disable-next-line no-lonely-if
+ if (this.models[model]) {
+ this.widget.options.data = this.models[model];
+ }
+ }
}
this.normalizer = normalizer;
- this.dataModel = this.models[this.widget.model];
+ this.dataModel = this.models[model];
}
created() {
diff --git a/src/component/form-designer/src/components/Charts/Echarts.vue b/src/component/form-designer/src/components/Charts/Echarts.vue
index ec4d8d5..718e04a 100644
--- a/src/component/form-designer/src/components/Charts/Echarts.vue
+++ b/src/component/form-designer/src/components/Charts/Echarts.vue
@@ -88,9 +88,9 @@ export default {
this.initEvent();
// 运行配置参数
this.setOption();
- if (this.loop) {
- this.initLoopFn();
- }
+ // if (this.loop) {
+ // this.initLoopFn();
+ // }
},
initLoopFn() {
const timer = setInterval(() => {
diff --git a/src/demo/App.vue b/src/demo/App.vue
index 7e5869d..6993cc9 100644
--- a/src/demo/App.vue
+++ b/src/demo/App.vue
@@ -41,7 +41,7 @@
- 表格设计器(TableDesigner)
+ 表格设计器(TableDesigner)
- 表单设计器(FormDesigner)
+ 表单设计器(FormDesigner)
@@ -65,7 +65,7 @@
- ProTable组件 (基于El-Table二次封装,托管分页，查询，表格。仅包含数据表格及搜索功能，增删改查封装见CrudTable)
+ ProTable组件 (基于El-Table二次封装,托管分页，查询，表格。仅包含数据表格及搜索功能，增删改查封装见CrudTable)
当前表格json
@@ -145,7 +145,7 @@
- CrudTable组件 基于ProTable + GenerateForm + El-Dialog 二次封装 （有批量操作按钮时会默认开启多选模式）
+ CrudTable 基于ProTable + GenerateForm + El-Dialog 二次封装 （有批量操作按钮时会默认开启多选模式）
当前表格json
@@ -274,6 +274,22 @@
+
+
+
+
+ GenerateForm渲染图表示例
+
+ 当前表单JSON
+
+
+
+
+
+
+
+
+
{
const editor = ace.edit('jsoneditor');
@@ -354,6 +375,7 @@ export default {
},
data() {
return {
+ chartData,
jsonVisible: false,
jsonTemplate: '',
dictList: [],
@@ -395,6 +417,7 @@ export default {
CusDialog,
PersonCrudTable,
PersonProTable,
+ ChartScreen,
},
};
diff --git a/src/demo/component/ChartScreen.vue b/src/demo/component/ChartScreen.vue
new file mode 100644
index 0000000..8e2f176
--- /dev/null
+++ b/src/demo/component/ChartScreen.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/demo/component/data/index.ts b/src/demo/component/data/index.ts
new file mode 100644
index 0000000..601ec28
--- /dev/null
+++ b/src/demo/component/data/index.ts
@@ -0,0 +1,364 @@
+/*
+ * @file: 图表json
+ * @author: BoBo
+ * @copyright: NanJing Anshare Tech .Com
+ * @Date: 2021-01-29 13:48:22
+ */
+const xAxisData:any = [];
+const data1:any = [];
+const data2:any = [];
+for (let i = 0; i < 100; i += 1) {
+ xAxisData.push(`类目${i}`);
+ data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
+ data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
+}
+
+
+export default {
+ list: [
+ {
+ type: 'grid',
+ name: '栅格布局',
+ icon: 'th',
+ columns: [
+ {
+ span: 8,
+ list: [
+ {
+ type: 'chart-pie',
+ name: '饼图',
+ icon: 'chart-pie',
+ options: {
+ className: '',
+ width: '100%',
+ option: '',
+ hiddenLabel: true,
+ hollow: true,
+ height: '400px',
+ data: [
+ {
+ name: '商品一',
+ value: '20',
+ },
+ {
+ name: '商品二',
+ value: '5',
+ },
+ {
+ name: '商品三',
+ value: '10',
+ },
+ ],
+ remoteFunc: 'func_chart-pie_33111',
+ },
+ key: 'chart-pie_33111',
+ model: 'chart-pie_33111',
+ rules: [],
+ },
+ ],
+ },
+ {
+ span: 8,
+ list: [
+ {
+ type: 'chart-line',
+ name: '柱状图',
+ icon: 'chart-line',
+ options: {
+ className: '',
+ yAxisMax: null,
+ width: '100%',
+ type: 'bar',
+ option: '',
+ rotate: false,
+ xUnit: '',
+ yUnit: '个',
+ hiddenLabel: true,
+ height: '400px',
+ data: [
+ {
+ name: '商品一',
+ value: '20',
+ },
+ {
+ name: '商品二',
+ value: '5',
+ },
+ {
+ name: '商品三',
+ value: '10',
+ },
+ ],
+ remoteFunc: 'func_chart-line_10673',
+ },
+ key: 'chart-line_10673',
+ model: 'chart-line_10673',
+ rules: [],
+ },
+ ],
+ key: '[object Object]_61291',
+ },
+ {
+ span: 8,
+ list: [
+ {
+ type: 'chart-line',
+ name: '折线图',
+ icon: 'chart-line',
+ options: {
+ className: '',
+ yAxisMax: null,
+ width: '100%',
+ type: 'line',
+ option: '',
+ rotate: false,
+ xUnit: '',
+ yUnit: '个',
+ hiddenLabel: true,
+ height: '400px',
+ data: [
+ {
+ name: '商品一',
+ value: '20',
+ },
+ {
+ name: '商品二',
+ value: '5',
+ },
+ {
+ name: '商品三',
+ value: '10',
+ },
+ ],
+ remoteFunc: 'func_chart-line_10624',
+ },
+ key: 'chart-line_10624',
+ model: 'chart-line_10624',
+ rules: [],
+ },
+ ],
+ key: '[object Object]_17310',
+ },
+ ],
+ options: {
+ gutter: 20,
+ justify: 'start',
+ align: 'top',
+ remoteFunc: 'func_grid_54448',
+ },
+ key: 'grid_54448',
+ model: 'grid_54448',
+ rules: [],
+ },
+ {
+ type: 'grid',
+ name: '栅格布局',
+ icon: 'th',
+ columns: [
+ {
+ span: 8,
+ list: [
+ {
+ type: 'chart-common',
+ name: '散点图',
+ icon: 'chart-bar',
+ options: {
+ className: '',
+ height: '400px',
+ hiddenLabel: true,
+ width: '100%',
+ loop: false,
+ option: {
+ xAxis: {},
+ yAxis: {},
+ series: [{
+ symbolSize: 20,
+ data: [
+ [10.0, 8.04],
+ [8.07, 6.95],
+ [13.0, 7.58],
+ [9.05, 8.81],
+ [11.0, 8.33],
+ [14.0, 7.66],
+ [13.4, 6.81],
+ [10.0, 6.33],
+ [14.0, 8.96],
+ [12.5, 6.82],
+ [9.15, 7.20],
+ [11.5, 7.20],
+ [3.03, 4.23],
+ [12.2, 7.83],
+ [2.02, 4.47],
+ [1.05, 3.33],
+ [4.05, 4.96],
+ [6.03, 7.24],
+ [12.0, 6.26],
+ [12.0, 8.84],
+ [7.08, 5.82],
+ [5.02, 5.68],
+ ],
+ type: 'scatter',
+ }],
+ },
+ remoteFunc: 'func_chart-common_26877',
+ },
+ key: 'chart-common_26877',
+ model: 'chart-common_26877',
+ rules: [],
+ },
+ ],
+ },
+ {
+ span: 8,
+ list: [
+ {
+ type: 'chart-common',
+ name: '雷达图',
+ icon: 'chart-bar',
+ options: {
+ className: '',
+ height: '400px',
+ hiddenLabel: true,
+ width: '100%',
+ loop: false,
+ option: {
+ tooltip: {},
+ legend: {
+ data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+ },
+ radar: {
+ // shape: 'circle',
+ name: {
+ textStyle: {
+ color: '#fff',
+ backgroundColor: '#999',
+ borderRadius: 3,
+ padding: [3, 5],
+ },
+ },
+ indicator: [
+ { name: '销售（sales）', max: 6500 },
+ { name: '管理（Administration）', max: 16000 },
+ { name: '信息技术（Information Techology）', max: 30000 },
+ { name: '客服（Customer Support）', max: 38000 },
+ { name: '研发（Development）', max: 52000 },
+ { name: '市场（Marketing）', max: 25000 },
+ ],
+ },
+ series: [{
+ name: '预算 vs 开销（Budget vs spending）',
+ type: 'radar',
+ // areaStyle: {normal: {}},
+ data: [
+ {
+ value: [4300, 10000, 28000, 35000, 50000, 19000],
+ name: '预算分配（Allocated Budget）',
+ },
+ {
+ value: [5000, 14000, 28000, 31000, 42000, 21000],
+ name: '实际开销（Actual Spending）',
+ },
+ ],
+ }],
+ },
+ remoteFunc: 'func_chart-common_76476',
+ },
+ key: 'chart-common_76476',
+ model: 'chart-common_76476',
+ rules: [],
+ },
+ ],
+ key: '[object Object]_31888',
+ },
+ {
+ span: 8,
+ list: [
+ {
+ type: 'chart-common',
+ name: '柱状图动画',
+ icon: 'chart-bar',
+ options: {
+ className: '',
+ height: '400px',
+ hiddenLabel: true,
+ width: '100%',
+ loop: false,
+ option: {
+ legend: {
+ data: ['bar', 'bar2'],
+ },
+ toolbox: {
+ // y: 'bottom',
+ feature: {
+ magicType: {
+ type: ['stack', 'tiled'],
+ },
+ dataView: {},
+ saveAsImage: {
+ pixelRatio: 2,
+ },
+ },
+ },
+ tooltip: {},
+ xAxis: {
+ data: xAxisData,
+ splitLine: {
+ show: false,
+ },
+ },
+ yAxis: {
+ },
+ series: [{
+ name: 'bar',
+ type: 'bar',
+ data: data1,
+ emphasis: {
+ focus: 'series',
+ },
+ animationDelay(idx) {
+ return idx * 10;
+ },
+ }, {
+ name: 'bar2',
+ type: 'bar',
+ data: data2,
+ emphasis: {
+ focus: 'series',
+ },
+ animationDelay(idx) {
+ return idx * 10 + 100;
+ },
+ }],
+ animationEasing: 'elasticOut',
+ animationDelayUpdate(idx) {
+ return idx * 5;
+ },
+ },
+ remoteFunc: 'func_chart-common_14493',
+ },
+ key: 'chart-common_14493',
+ model: 'chart-common_14493',
+ rules: [],
+ },
+ ],
+ key: '[object Object]_97258',
+ },
+ ],
+ options: {
+ gutter: 20,
+ justify: 'start',
+ align: 'top',
+ remoteFunc: 'func_grid_58177',
+ },
+ key: 'grid_58177',
+ model: 'grid_58177',
+ rules: [],
+ },
+ ],
+ config: {
+ labelWidth: 140,
+ labelPosition: 'right',
+ size: 'small',
+ customClass: '',
+ },
+};