1、动态环图添加提示语

qianbao
1 parent 4390879a
Showing 3 changed files with 91 additions and 21 deletions
src/views/bigscreenDesigner/designer/components/LabelTag.vue
src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-active-ring-chart.js
src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue
 <template>
-  <div class="label-tag">
+  <div class="label-tag" :style="labelTagStyle">
     <template v-if="mergedConfig">
-      <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label" :style="mergedConfig.labelStyle">
-        <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};margin-right:5px`" />{{ label }}
-      </div>
+        <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label" :style="mergedConfig.labelStyle">
+          <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};margin-right:5px`" />{{ label }}
+        </div>
     </template>
   </div>
 </template>
@@ -37,29 +37,28 @@ export default {
          * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
          * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
          */
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
+        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
       },
-      mergedConfig: null
+      mergedConfig: null,
+      labelTagStyle:{}
     }
   },
   watch: {
     config () {
       const { mergeConfig } = this
-
       mergeConfig()
     }
   },
   methods: {
     mergeConfig () {
       let { config, defaultConfig } = this
-
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.labelTagStyle = this.mergedConfig.labelTagStyle;
     }
   },
   mounted () {
     const { mergeConfig } = this
-
     mergeConfig()
   }
 }
@@ -68,8 +67,16 @@ export default {
 <style scoped lang="scss">
 .label-tag {
   display: flex;
+  position: absolute;
   justify-content: center;
   align-items: center;
+  flex-flow: row wrap;
+  margin: auto;
+  //top: 0;
+  //bottom: 0;
+  //left: 10%;
+  overflow-y: auto;
+  padding-right: 5px;
   .label-item {
     margin: 5px;
@@ -77,9 +84,12 @@ export default {
     display: flex;
     align-items: center;
     div {
-      width: 12px;
-      height: 12px;
       margin-left: 5px;
+      display: inline-block;
+      width: 30px;
+      height: 20px;
+      line-height: 20px;
+      border-radius: 5px;
     }
   }
 }
@@ -180,12 +180,20 @@ export const widgetActiveRingChart=  {
               value: false,
             },
             {
+              type: 'el-switch',
+              label: '数值显示',
+              name: 'isShowTipVal',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
               type: 'el-input-number',
               label: '字体字号',
               name: 'tipFontSize',
               required: false,
               placeholder: '',
-              value: 16
+              value: 25
             },
             {
               type: 'vue-color',
@@ -193,7 +201,7 @@ export const widgetActiveRingChart=  {
               name: 'tipsColor',
               required: false,
               placeholder: '',
-              value: '#00FEFF'
+              value: '#cdddf7'
             },
             {
               type: 'el-select',
@@ -202,12 +210,37 @@ export const widgetActiveRingChart=  {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'up', name: '头部' },
+                { code: 'top', name: '头部' },
+                { code: 'left', name: '左边' },
+                { code: 'right', name: '右边' },
                 { code: 'down', name: '底部' }
-
               ],
               value: 'down'
-            }
+            },
+            {
+              type: 'el-input-number',
+              label: '高度',
+              name: 'tipFontHeight',
+              required: false,
+              placeholder: '',
+              value: 100
+            },
+            {
+              type: 'el-input-number',
+              label: '左右距离',
+              name: 'tipFontLeft',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '上下距离',
+              name: 'tipFontTop',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
           ],
         },
         {
@@ -2,12 +2,18 @@
 动态环图
 -->
 <template>
-  <div class="bc-chart-item" :style="styleObj" v-if="isRouterAlive" >
+  <div  v-if="isRouterAlive">
     <div class="bcci-header" :style="titleConfig.titleStyle" v-if="titleConfig.isNoTitle" >{{titleConfig.titleText}}</div>
-    <Label-Tag :config="labelConfig" v-if="labelConfig.isNoTipTitle && labelConfig.tipsAlign=='up'"/>
-    <dv-active-ring-chart :config="options" :style="styleRingChart"/>
-    <Label-Tag :config="labelConfig" v-if="labelConfig.isNoTipTitle && labelConfig.tipsAlign=='down'"/>
+
+    <div class="bc-chart-item" :style="styleObj">
+      <Label-Tag :config="labelConfig" v-if="labelConfig.isNoTipTitle && labelConfig.tipsAlign=='top'"/>
+      <dv-active-ring-chart :config="options" :style="styleRingChart"/>
+      <Label-Tag :config="labelConfig" v-if="labelConfig.isNoTipTitle
+      && (labelConfig.tipsAlign=='down' || labelConfig.tipsAlign=='right' || labelConfig.tipsAlign=='left')"/>
+    </div>
+
   </div>
+
 </template>
 <script>
 import Vue from "vue";
@@ -51,6 +57,7 @@ export default {
         labelStyle:{},
         isNoTipTitle:false,
         tipsAlign:'down',
+        labelTagStyle:{}
       },
       titleConfig:{
         titleStyle:{},
@@ -132,11 +139,26 @@ export default {
     setLabelConfig(){
       const optionsSetup = this.optionsSetup;
       let labelStyle = {};
+      let labelTagStyleOne = {};
       if(optionsSetup.isNoTipTitle){
         this.labelConfig.isNoTipTitle = optionsSetup.isNoTipTitle;
         this.labelConfig.tipsAlign = optionsSetup.tipsAlign;
         labelStyle.color = optionsSetup.tipsColor;
         labelStyle['font-size'] = optionsSetup.tipFontSize+'px';
+        if(optionsSetup.tipsAlign=='right' || optionsSetup.tipsAlign=='left'){
+          labelTagStyleOne[optionsSetup.tipsAlign]=optionsSetup.tipFontLeft+"%";
+          labelTagStyleOne['height']=optionsSetup.tipFontHeight+"%";
+          labelTagStyleOne['width']="20%";
+          labelTagStyleOne['top']="0";
+          labelTagStyleOne['bottom']="0";
+        }else if(optionsSetup.tipsAlign=='top'){
+          labelTagStyleOne['left']= optionsSetup.tipFontLeft+"%";
+          labelTagStyleOne['top']= -optionsSetup.tipFontTop+"%";
+        }else{
+          labelTagStyleOne['left']= optionsSetup.tipFontLeft+"%";
+          labelTagStyleOne['bottom']= optionsSetup.tipFontTop+"%";
+        }
+        this.labelConfig.labelTagStyle = labelTagStyleOne;
         this.labelConfig.labelStyle = labelStyle;
       }else{
         this.labelConfig.isNoTipTitle = false;
@@ -232,11 +254,16 @@ export default {
       this.reload();
     },
     setLabelConfigData(val){
+      const optionsSetup = this.optionsSetup;
       const data = [];
       if(this.isNotBlankArray(val)){
         for(let i = 0;i<val.length;i++){
           const oneVal = val[i];
-          data.push(oneVal['name']);
+          let showName = oneVal['name'];
+          if(optionsSetup.isShowTipVal){
+            showName = showName+' '+oneVal['value'];
+          }
+          data.push(showName);
         }
         this.labelConfig.data = data;
       }