cloud-web-corejs 1.0.54-dev.34 → 1.0.54-dev.340

package/src/components/xform/form-designer/setting-panel/property-editor/field-echart/echart-category-editor.vue

@@ -1,32 +1,56 @@
 <template>
   <div>
-    <el-form-item :label="i18nt('背景颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.backgroundColor"></el-color-picker></el-form-item>
-<!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')"><el-switch v-model="optionModel.dsEnabled"></el-switch></el-form-item>
-    <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
-      <el-input
-        class="search-input"
-        max="200"
-        v-model="optionModel.accessName"
-        @clear="
-		  optionModel.accessCode = '';
-          $forceUpdate();
-        "
-        v-el-readonly
-        clearable
-      >
-        <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog = true"></i>
-      </el-input>
-    </el-form-item>-->
-
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">折现设置</el-divider></el-form-item>
-    <el-form-item :label="i18nt('标记点')"><el-switch v-model="showSymbol"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('点大小')"><el-slider v-model="symbolSize"></el-slider></el-form-item>
-    <el-form-item :label="i18nt('平滑曲线')"><el-switch v-model="smooth"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('面积堆积')"><el-switch v-model="showArea"></el-switch></el-form-item>
+    <el-form-item :label="i18nt('背景颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.backgroundColor"></el-color-picker>
+    </el-form-item>
+    <!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')"><el-switch v-model="optionModel.dsEnabled"></el-switch></el-form-item>
+        <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
+          <el-input
+            class="search-input"
+            max="200"
+            v-model="optionModel.accessName"
+            @clear="
+          optionModel.accessCode = '';
+              $forceUpdate();
+            "
+            v-el-readonly
+            clearable
+          >
+            <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog = true"></i>
+          </el-input>
+        </el-form-item>-->
+    <el-form-item label="自定义图表配置" label-width="150px">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('echartConfig', ['dataId', 'formCode'])">
+        <span>{{ optionModel.echartConfig }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">折线设置</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('标记点')">
+      <el-switch v-model="showSymbol"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('点大小')">
+      <el-slider v-model="symbolSize"></el-slider>
+    </el-form-item>
+    <el-form-item :label="i18nt('平滑曲线')">
+      <el-switch v-model="smooth"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('面积堆积')">
+      <el-switch v-model="showArea"></el-switch>
+    </el-form-item>
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">标题设置</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示标题')"><el-switch v-model="optionModel.echarCategoryOption.title.show"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('标题')"><el-input v-model="optionModel.echarCategoryOption.title.text"></el-input></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">标题设置</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示标题')">
+      <el-switch v-model="optionModel.echarCategoryOption.title.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('标题')">
+      <el-input v-model="optionModel.echarCategoryOption.title.text"></el-input>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.title.textStyle.color"></el-color-picker></el-form-item>
     <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarCategoryOption.title.textStyle.fontWeight">
@@ -37,7 +61,9 @@
       </el-select>
     </el-form-item>
     <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarCategoryOption.title.textStyle.fontSize"></base-input-number></el-form-item> -->
-    <el-form-item :label="i18nt('背景颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.title.backgroundColor"></el-color-picker></el-form-item>
+    <el-form-item :label="i18nt('背景颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.title.backgroundColor"></el-color-picker>
+    </el-form-item>
     <el-form-item :label="i18nt('字体位置')">
       <el-select v-model="optionModel.echarCategoryOption.title.left">
         <el-option label="居中" value="center"></el-option>
@@ -45,7 +71,9 @@
         <el-option label="右对齐" value="right"></el-option>
       </el-select>
     </el-form-item>
-    <el-form-item :label="i18nt('副标题')"><el-input v-model="optionModel.echarCategoryOption.title.subtext"></el-input></el-form-item>
+    <el-form-item :label="i18nt('副标题')">
+      <el-input v-model="optionModel.echarCategoryOption.title.subtext"></el-input>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.title.subtextStyle.color"></el-color-picker></el-form-item>
     <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarCategoryOption.title.subtextStyle.fontWeight">
@@ -57,40 +85,103 @@
     </el-form-item>
     <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarCategoryOption.title.subtextStyle.fontSize"></base-input-number></el-form-item> -->
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">X轴设置</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示')"><el-switch v-model="optionModel.echarCategoryOption.xAxis.show"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('坐标名')"><el-input v-model="optionModel.echarCategoryOption.xAxis.name"></el-input></el-form-item>
-    <el-form-item :label="i18nt('坐标名颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.xAxis.nameTextStyle.color"></el-color-picker></el-form-item>
-    <el-form-item :label="i18nt('坐标字号')"><base-input-number :scale="0" v-model="optionModel.echarCategoryOption.xAxis.nameTextStyle.fontSize"></base-input-number></el-form-item>
-    <el-form-item :label="i18nt('数值颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.xAxis.axisLabel.color"></el-color-picker></el-form-item>
-    <el-form-item :label="i18nt('数值字号')"><base-input-number :scale="0" v-model="optionModel.echarCategoryOption.xAxis.axisLabel.fontSize"></base-input-number></el-form-item>
-    <el-form-item :label="i18nt('数值角度')"><el-slider v-model="optionModel.echarCategoryOption.xAxis.axisLabel.rotate"></el-slider></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">X轴设置</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示')">
+      <el-switch v-model="optionModel.echarCategoryOption.xAxis.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标名')">
+      <el-input v-model="optionModel.echarCategoryOption.xAxis.name"></el-input>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标名颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.xAxis.nameTextStyle.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标字号')">
+      <base-input-number :scale="0"
+                         v-model="optionModel.echarCategoryOption.xAxis.nameTextStyle.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.xAxis.axisLabel.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值字号')">
+      <base-input-number :scale="0"
+                         v-model="optionModel.echarCategoryOption.xAxis.axisLabel.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值角度')">
+      <el-slider v-model="optionModel.echarCategoryOption.xAxis.axisLabel.rotate"></el-slider>
+    </el-form-item>
 
-    <el-form-item :label="i18nt('轴反转')"><el-switch v-model="optionModel.echarCategoryOption.xAxis.inverse"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('轴颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.xAxis.axisLine.lineStyle.color"></el-color-picker></el-form-item>
-    <el-form-item :label="i18nt('分割线显示')"><el-switch v-model="optionModel.echarCategoryOption.xAxis.splitLine.show"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('分割线颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.xAxis.splitLine.lineStyle.color"></el-color-picker></el-form-item>
+    <el-form-item :label="i18nt('轴反转')">
+      <el-switch v-model="optionModel.echarCategoryOption.xAxis.inverse"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('轴颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.xAxis.axisLine.lineStyle.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('分割线显示')">
+      <el-switch v-model="optionModel.echarCategoryOption.xAxis.splitLine.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('分割线颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.xAxis.splitLine.lineStyle.color"></el-color-picker>
+    </el-form-item>
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">Y轴设置</el-divider></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">Y轴设置</el-divider>
+    </el-form-item>
 
-    <el-form-item :label="i18nt('显示')"><el-switch v-model="optionModel.echarCategoryOption.yAxis.show"></el-switch></el-form-item>
-        <el-form-item :label="i18nt('坐标名')"><el-input v-model="optionModel.echarCategoryOption.yAxis.name"></el-input></el-form-item>
-        <el-form-item :label="i18nt('坐标名颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.yAxis.nameTextStyle.color"></el-color-picker></el-form-item>
-        <el-form-item :label="i18nt('坐标字号')"><base-input-number :scale="0" v-model="optionModel.echarCategoryOption.yAxis.nameTextStyle.fontSize"></base-input-number></el-form-item>
-        <el-form-item :label="i18nt('数值颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.yAxis.axisLabel.color"></el-color-picker></el-form-item>
-        <el-form-item :label="i18nt('数值字号')"><base-input-number :scale="0" v-model="optionModel.echarCategoryOption.yAxis.axisLabel.fontSize"></base-input-number></el-form-item>
-        <el-form-item :label="i18nt('数值角度')"><el-slider v-model="optionModel.echarCategoryOption.yAxis.axisLabel.rotate"></el-slider></el-form-item>
+    <el-form-item :label="i18nt('显示')">
+      <el-switch v-model="optionModel.echarCategoryOption.yAxis.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标名')">
+      <el-input v-model="optionModel.echarCategoryOption.yAxis.name"></el-input>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标名颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.yAxis.nameTextStyle.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标字号')">
+      <base-input-number :scale="0"
+                         v-model="optionModel.echarCategoryOption.yAxis.nameTextStyle.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.yAxis.axisLabel.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值字号')">
+      <base-input-number :scale="0"
+                         v-model="optionModel.echarCategoryOption.yAxis.axisLabel.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值角度')">
+      <el-slider v-model="optionModel.echarCategoryOption.yAxis.axisLabel.rotate"></el-slider>
+    </el-form-item>
 
-        <el-form-item :label="i18nt('轴显示')"><el-switch v-model="optionModel.echarCategoryOption.yAxis.axisLine.show"></el-switch></el-form-item>
-        <el-form-item :label="i18nt('轴反转')"><el-switch v-model="optionModel.echarCategoryOption.yAxis.inverse"></el-switch></el-form-item>
-        <el-form-item :label="i18nt('轴颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.yAxis.axisLine.lineStyle.color"></el-color-picker></el-form-item>
-        <el-form-item :label="i18nt('分割线显示')"><el-switch v-model="optionModel.echarCategoryOption.yAxis.splitLine.show"></el-switch></el-form-item>
-        <el-form-item :label="i18nt('分割线颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.yAxis.splitLine.lineStyle.color"></el-color-picker></el-form-item>
+    <el-form-item :label="i18nt('轴显示')">
+      <el-switch v-model="optionModel.echarCategoryOption.yAxis.axisLine.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('轴反转')">
+      <el-switch v-model="optionModel.echarCategoryOption.yAxis.inverse"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('轴颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.yAxis.axisLine.lineStyle.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('分割线显示')">
+      <el-switch v-model="optionModel.echarCategoryOption.yAxis.splitLine.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('分割线颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.yAxis.splitLine.lineStyle.color"></el-color-picker>
+    </el-form-item>
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">数值设定</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示数值')"><el-switch v-model="showSeriesLabel"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarCategoryOption.series[0].label.fontSize"></base-input-number></el-form-item>
-    <el-form-item :label="i18nt('颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.series[0].label.color"></el-color-picker></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">数值设定</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示数值')">
+      <el-switch v-model="showSeriesLabel"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('字体大小')">
+      <base-input-number :scale="0"
+                         v-model="optionModel.echarCategoryOption.series[0].label.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.series[0].label.color"></el-color-picker>
+    </el-form-item>
     <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarCategoryOption.series[0].label.fontWeight">
         <el-option label="正常" value="normal"></el-option>
@@ -100,22 +191,32 @@
       </el-select>
     </el-form-item>
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">提示语设置</el-divider></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">提示语设置</el-divider>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarCategoryOption.tooltip.textStyle.fontSize"></base-input-number></el-form-item> -->
-    <el-form-item :label="i18nt('网格线颜色')"><el-color-picker v-model="optionModel.echarCategoryOption.tooltip.borderColor"></el-color-picker></el-form-item>
+    <el-form-item :label="i18nt('网格线颜色')">
+      <el-color-picker v-model="optionModel.echarCategoryOption.tooltip.borderColor"></el-color-picker>
+    </el-form-item>
 
     <!-- <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">坐标轴边距设置</el-divider></el-form-item> -->
-
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">自定义配色</el-divider></el-form-item>
-    <draggable tag="ul" class="draggable-box" :list="optionModel.echarCategoryOption.color" v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.el-icon-s-operation' }">
-      <li v-for="(colorItem, index) in optionModel.echarCategoryOption.color" :key="index">
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">自定义配色</el-divider>
+    </el-form-item>
+    <draggable tag="ul" class="draggable-box" :list="optionModel.echarCategoryOption.colors"
+               v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.el-icon-s-operation' }">
+      <li v-for="(colorItem, index) in optionModel.echarCategoryOption.colors" :key="index">
         <i class="el-icon-s-operation"></i>
-        <el-color-picker v-model="optionModel.echarCategoryOption.color[index]"></el-color-picker>
+        <el-color-picker v-model="optionModel.echarCategoryOption.colors[index]"></el-color-picker>
         <!-- {{colorItem}} -->
-        <el-button circle plain size="mini" type="danger" @click="deleteColor(index)" icon="el-icon-minus" class="col-delete-button"></el-button>
+        <el-button circle plain size="mini" type="danger" @click="deleteColor(index)" icon="el-icon-minus"
+                   class="col-delete-button"></el-button>
       </li>
     </draggable>
-    <el-button type="text" @click="addColor" icon="el-icon-circle-plus-outline" class="add-option">{{ i18nt('新增配色') }}</el-button>
+    <el-button type="text" @click="addColor" icon="el-icon-circle-plus-outline" class="add-option">{{
+        i18nt('新增配色')
+      }}
+    </el-button>
 
     <requestaccessDialog
       v-if="showRequestaccessDialog"
@@ -129,13 +230,14 @@
 
 <script>
 import i18n from '../../../../../../components/xform/utils/i18n';
-import { deepClone } from '../../../../../../components/xform/utils/util';
+import {deepClone} from '../../../../../../components/xform/utils/util';
 import Draggable from 'vuedraggable';
 import requestaccessDialog from '../../../../../../views/user/form/report_requestaccess/dialog.vue';
+import eventMixin from "@base/components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
 
 export default {
   name: 'echart-category-editor',
-  mixins: [i18n],
+  mixins: [eventMixin, i18n],
   props: {
     designer: Object,
     selectedWidget: Object,
@@ -147,7 +249,7 @@ export default {
     requestaccessDialog
   },
   computed: {
-    reportTemplate: function() {
+    reportTemplate: function () {
       return this.getReportTemplate();
     },
     nameSet: {
@@ -233,13 +335,13 @@ export default {
     },
     showArea: {
       get() {
-        return this.optionModel.echarCategoryOption.series[0].areaStyle!=null;
+        return this.optionModel.echarCategoryOption.series[0].areaStyle != null;
       },
       set(val) {
         this.optionModel.echarCategoryOption.series.forEach(item => {
-          if(val){
-            if(item.areaStyle==null)item.areaStyle = {};
-          }else{
+          if (val) {
+            if (item.areaStyle == null) item.areaStyle = {};
+          } else {
             item.areaStyle = null;
           }
         });
@@ -248,16 +350,16 @@ export default {
   },
   data() {
     return {
-      requestIndex:null,
+      requestIndex: null,
       showRequestaccessDialog: false
     };
   },
   methods: {
     addColor() {
-      this.optionModel.echarCategoryOption.color.push('');
+      this.optionModel.echarCategoryOption.colors.push('');
     },
     deleteColor(index) {
-      this.optionModel.echarCategoryOption.color.splice(index, 1);
+      this.optionModel.echarCategoryOption.colors.splice(index, 1);
     },
     addOption() {
       this.nameSet.push('');
@@ -267,15 +369,15 @@ export default {
     },
     addSerie() {
       this.optionModel.echarCategoryOption.series.push({
-          name:"",
-          data: [],
-          type: 'line',
-          label: {
-            show:this.showSeriesLabel,
-            fontSize:12,
-            color:"",
-            fontWeight:"normal"
-          }
+        name: "",
+        data: [],
+        type: 'line',
+        label: {
+          show: this.showSeriesLabel,
+          fontSize: 12,
+          color: "",
+          fontWeight: "normal"
+        }
       });
     },
     deleteSerie(index) {
@@ -287,7 +389,7 @@ export default {
       if (rows.length) {
         let row = rows[0];
         this.optionModel.accessName = row.accessName;
-		this.optionModel.accessCode = row.accessCode;
+        this.optionModel.accessCode = row.accessCode;
       }
     }
   }

package/src/components/xform/form-designer/setting-panel/property-editor/field-echart/echart-pie-editor.vue

@@ -1,31 +1,46 @@
 <template>
   <div>
-<!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')"><el-switch v-model="optionModel.dsEnabled"></el-switch></el-form-item>
-    <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
-      <el-input
-        class="search-input"
-        max="200"
-        v-model="optionModel.accessName"
-        @clear="
-          optionModel.accessCode = '';
-          $forceUpdate();
-        "
-        v-el-readonly
-        clearable
-      >
-        <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog = true"></i>
-      </el-input>
-    </el-form-item>-->
-    <el-form-item :label="i18nt('背景颜色')"><el-color-picker v-model="optionModel.echarPieOption.backgroundColor"></el-color-picker></el-form-item>
+    <!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')"><el-switch v-model="optionModel.dsEnabled"></el-switch></el-form-item>
+        <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
+          <el-input
+            class="search-input"
+            max="200"
+            v-model="optionModel.accessName"
+            @clear="
+              optionModel.accessCode = '';
+              $forceUpdate();
+            "
+            v-el-readonly
+            clearable
+          >
+            <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog = true"></i>
+          </el-input>
+        </el-form-item>-->
+    <el-form-item :label="i18nt('背景颜色')">
+      <el-color-picker v-model="optionModel.echarPieOption.backgroundColor"></el-color-picker>
+    </el-form-item>
     <el-form-item :label="i18nt('饼图样式')">
       <el-select v-model="optionModel.echarPieOption.series[0].radius">
         <el-option label="实心饼图" :value="'70%'"></el-option>
         <el-option label="空心饼图" :value="['40%', '70%']"></el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">标题设置</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示标题')"><el-switch v-model="optionModel.echarPieOption.title.show"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('标题')"><el-input v-model="optionModel.echarPieOption.title.text"></el-input></el-form-item>
+    <el-form-item label="自定义图表配置" label-width="150px">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('echartConfig', ['dataId', 'formCode'])">
+        <span>{{ optionModel.echartConfig }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">标题设置</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示标题')">
+      <el-switch v-model="optionModel.echarPieOption.title.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('标题')">
+      <el-input v-model="optionModel.echarPieOption.title.text"></el-input>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarPieOption.title.textStyle.color"></el-color-picker></el-form-item> -->
     <!-- <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarPieOption.title.textStyle.fontWeight">
@@ -36,7 +51,9 @@
       </el-select>
     </el-form-item>
     <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarPieOption.title.textStyle.fontSize"></base-input-number></el-form-item> -->
-    <el-form-item :label="i18nt('背景颜色')"><el-color-picker v-model="optionModel.echarPieOption.title.backgroundColor"></el-color-picker></el-form-item>
+    <el-form-item :label="i18nt('背景颜色')">
+      <el-color-picker v-model="optionModel.echarPieOption.title.backgroundColor"></el-color-picker>
+    </el-form-item>
     <el-form-item :label="i18nt('字体位置')">
       <el-select v-model="optionModel.echarPieOption.title.left">
         <el-option label="居中" value="center"></el-option>
@@ -44,7 +61,9 @@
         <el-option label="右对齐" value="right"></el-option>
       </el-select>
     </el-form-item>
-    <el-form-item :label="i18nt('副标题')"><el-input v-model="optionModel.echarPieOption.title.subtext"></el-input></el-form-item>
+    <el-form-item :label="i18nt('副标题')">
+      <el-input v-model="optionModel.echarPieOption.title.subtext"></el-input>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarPieOption.title.subtextStyle.color"></el-color-picker></el-form-item>
     <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarPieOption.title.subtextStyle.fontWeight">
@@ -56,10 +75,18 @@
     </el-form-item>
     <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarPieOption.title.subtextStyle.fontSize"></base-input-number></el-form-item> -->
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">数值设定</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示数值')"><el-switch v-model="showSeriesLabel"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarPieOption.series[0].label.fontSize"></base-input-number></el-form-item>
-    <el-form-item :label="i18nt('颜色')"><el-color-picker v-model="optionModel.echarPieOption.series[0].label.color"></el-color-picker></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">数值设定</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示数值')">
+      <el-switch v-model="showSeriesLabel"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('字体大小')">
+      <base-input-number :scale="0" v-model="optionModel.echarPieOption.series[0].label.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('颜色')">
+      <el-color-picker v-model="optionModel.echarPieOption.series[0].label.color"></el-color-picker>
+    </el-form-item>
     <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarPieOption.series[0].label.fontWeight">
         <el-option label="正常" value="normal"></el-option>
@@ -75,18 +102,30 @@
         <el-option label="中心" value="center"></el-option>
       </el-select>
     </el-form-item>
-    <el-form-item :label="i18nt('数值格式')"><el-input v-model="optionModel.echarPieOption.series[0].label.formatter"></el-input></el-form-item>
+    <el-form-item :label="i18nt('数值格式')">
+      <el-input v-model="optionModel.echarPieOption.series[0].label.formatter"></el-input>
+    </el-form-item>
     注：{b}：数据名。{c}：数据值。{d}：百分比。
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">提示语设置</el-divider></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">提示语设置</el-divider>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarPieOption.tooltip.textStyle.fontSize"></base-input-number></el-form-item> -->
-    <el-form-item :label="i18nt('网格线颜色')"><el-color-picker v-model="optionModel.echarPieOption.tooltip.borderColor"></el-color-picker></el-form-item>
+    <el-form-item :label="i18nt('网格线颜色')">
+      <el-color-picker v-model="optionModel.echarPieOption.tooltip.borderColor"></el-color-picker>
+    </el-form-item>
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">图例操作</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示图例')"><el-switch v-model="optionModel.echarPieOption.legend.show"></el-switch></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">图例操作</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示图例')">
+      <el-switch v-model="optionModel.echarPieOption.legend.show"></el-switch>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarPieOption.legend.textStyle.color"></el-color-picker></el-form-item>
     <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarPieOption.legend.textStyle.fontSize"></base-input-number></el-form-item> -->
-    <el-form-item :label="i18nt('图例宽度')"><base-input-number :scale="0" v-model="optionModel.echarPieOption.legend.itemWidth"></base-input-number></el-form-item>
+    <el-form-item :label="i18nt('图例宽度')">
+      <base-input-number :scale="0" v-model="optionModel.echarPieOption.legend.itemWidth"></base-input-number>
+    </el-form-item>
     <el-form-item :label="i18nt('横向位置')">
       <el-select v-model="optionModel.echarPieOption.legend.left">
         <el-option label="左对齐" value="left"></el-option>
@@ -105,17 +144,22 @@
         <el-option label="横排" value="vertical"></el-option>
       </el-select>
     </el-form-item>
-
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">自定义配色</el-divider></el-form-item>
-    <draggable tag="ul" class="draggable-box" :list="optionModel.echarPieOption.color" v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.el-icon-s-operation' }">
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">自定义配色</el-divider>
+    </el-form-item>
+    <draggable tag="ul" class="draggable-box" :list="optionModel.echarPieOption.color"
+               v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.el-icon-s-operation' }">
       <li v-for="(colorItem, index) in optionModel.echarPieOption.color" :key="index">
         <i class="el-icon-s-operation"></i>
         <el-color-picker v-model="optionModel.echarPieOption.color[index]"></el-color-picker>
         <!-- {{colorItem}} -->
-        <el-button circle plain size="mini" type="danger" @click="deleteColor(index)" icon="el-icon-minus" class="col-delete-button"></el-button>
+        <el-button circle plain size="mini" type="danger" @click="deleteColor(index)" icon="el-icon-minus"
+                   class="col-delete-button"></el-button>
       </li>
     </draggable>
-    <el-button type="text" @click="addColor" icon="el-icon-circle-plus-outline" class="add-option">{{ i18nt('designer.setting.addOption') }}</el-button>
+    <el-button type="text" @click="addColor" icon="el-icon-circle-plus-outline" class="add-option">
+      {{ i18nt('designer.setting.addOption') }}
+    </el-button>
     <requestaccessDialog
       v-if="showRequestaccessDialog"
       :visiable.sync="showRequestaccessDialog"
@@ -130,10 +174,11 @@
 import i18n from '../../../../../../components/xform/utils/i18n';
 import Draggable from 'vuedraggable';
 import requestaccessDialog from '../../../../../../views/user/form/report_requestaccess/dialog.vue';
+import eventMixin from "@base/components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
 
 export default {
   name: 'echart-pie-editor',
-  mixins: [i18n],
+  mixins: [eventMixin, i18n],
   props: {
     designer: Object,
     selectedWidget: Object,
@@ -145,7 +190,7 @@ export default {
     requestaccessDialog
   },
   computed: {
-    reportTemplate: function() {
+    reportTemplate: function () {
       return this.getReportTemplate();
     },
     showSeriesLabel: {