From 5cfe6db94c1449810a44660b299dba8e7e98e5c5 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 10 六月 2021 14:43:39 +0800
Subject: [PATCH] 2021-06-10

---
 src/menu/components/chart/antv-pie/index.jsx                   |   62 +++-----
 src/menu/components/chart/antv-bar/index.jsx                   |  144 +++++++++++++++----
 src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx |   42 +++++
 src/tabviews/custom/components/chart/antv-bar-line/index.jsx   |  108 ++++++++++++---
 src/menu/components/chart/antv-dashboard/index.jsx             |    5 
 src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx |    7 
 src/tabviews/custom/components/chart/antv-pie/index.jsx        |   37 ++---
 7 files changed, 280 insertions(+), 125 deletions(-)

diff --git a/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx
index 837e853..64cdddb 100644
--- a/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx
+++ b/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx
@@ -162,6 +162,28 @@
   let xfields = columns.filter(item => /^Nvarchar/ig.test(item.datatype))
   let yfields = columns.filter(item => /^(Int|Decimal)/ig.test(item.datatype))
 
+  let labelOptions = [{
+    value: 'false',
+    text: '闅愯棌'
+  }, {
+    value: 'true',
+    text: '鏄剧ず'
+  }]
+
+  if (card.chartType === 'bar') {
+    labelOptions[1].text = '澶栭儴'
+    labelOptions.push(...[{
+      value: 'top',
+      text: '椤堕儴'
+    }, {
+      value: 'middle',
+      text: '涓棿'
+    }, {
+      value: 'bottom',
+      text: '搴曢儴'
+    }])
+  }
+
   return [
     {
       type: 'radio',
@@ -289,17 +311,25 @@
         text: '鐧惧垎姣�'
       }]
     }, {
-      type: 'radio',
+      type: labelOptions.length > 2 ? 'select' : 'radio',
       key: 'label',
-      label: '鏍囨敞鍊�',
+      label: '鏍囩',
       initVal: card.label || 'false',
       required: false,
+      options: labelOptions
+    }, {
+      type: 'radio',
+      key: 'labelColor',
+      label: '鏍囩棰滆壊',
+      initVal: card.labelColor || 'system',
+      tooltip: '浣跨敤绯荤粺鑹叉椂锛屼娇鐢ㄨ壊绯婚�夐」璁剧疆鐨勭郴缁熼鑹诧紝浣跨敤鑷畾涔変负棰滆壊璁剧疆涓畾涔夌殑鍥惧舰棰滆壊銆�',
+      required: false,
       options: [{
-        value: 'true',
-        text: '鏄剧ず'
+        value: 'system',
+        text: '绯荤粺'
       }, {
-        value: 'false',
-        text: '闅愯棌'
+        value: 'custom',
+        text: '鑷畾涔�'
       }]
     // }, {
     //   type: 'radio',
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index 547d9f4..60156f0 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -333,15 +333,20 @@
       } else {
         _chart.color('key')
       }
-      if (plot.label === 'true') {
-        _chart.label('value', (value) => {
+      if (plot.label !== 'false') {
+        _chart.label('value*key', (value, key) => {
           if (plot.show === 'percent') {
             value = value + '%'
+          }
+          let _color = color
+
+          if (plot.labelColor === 'custom' && colors.has(key)) {
+            _color = colors.get(key)
           }
           return {
             content: value,
             style: {
-              fill: color
+              fill: _color
             }
           }
         })
@@ -540,6 +545,27 @@
     chart.scale({
       nice: true
     })
+
+    let lablecfg = {
+      position: 'top',
+      offset: 2,
+      style: {
+        fill: '#fff'
+      }
+    }
+
+    if (plot.label === 'top') {
+      lablecfg.offset = -5
+      lablecfg.style.textBaseline = 'top'
+    } else if (plot.label === 'middle') {
+      lablecfg.position = 'middle'
+      lablecfg.offset = 0
+    } else if (plot.label === 'bottom') {
+      lablecfg.position = 'bottom'
+      lablecfg.offset = 0
+    } else if (plot.label === 'true') {
+      lablecfg.style.fill = color
+    }
     
     if (Bar_axis.length) {
       const view1 = chart.createView({
@@ -609,16 +635,18 @@
         } else {
           _chart.color('key')
         }
-        if (plot.label === 'true') {
-          _chart.label('value', (value) => {
+        if (plot.label !== 'false') {
+          _chart.label('value*key', (value, key) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) {
+              lablecfg.style.fill = colors.get(key)
+            }
             return {
               content: value,
-              style: {
-                fill: color
-              }
+              ...lablecfg
             }
           })
         }
@@ -658,16 +686,19 @@
         } else {
           _chart.color('key')
         }
-        if (plot.label === 'true') {
-          _chart.label('value', (value) => {
+        if (plot.label !== 'false') {
+          _chart.label('value*key', (value, key) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) {
+              lablecfg.style.fill = colors.get(key)
+            }
+
             return {
               content: value,
-              style: {
-                fill: color
-              }
+              ...lablecfg
             }
           })
         }
@@ -720,16 +751,18 @@
         if (plot.barSize) {
           _chart.size(plot.barSize || 35)
         }
-        if (item.label === 'true') {
+        if (item.label !== 'false') {
           _chart.label(item.name, (value) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom') {
+              lablecfg.style.fill = item.color
+            }
             return {
               content: value,
-              style: {
-                fill: color
-              }
+              ...lablecfg
             }
           })
         }
@@ -761,15 +794,20 @@
             }
           })
 
-        if (item.label === 'true') {
+        if (item.label !== 'false') {
           _chart.label(item.name, (value) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+            let _color = color
+
+            if (plot.labelColor === 'custom') {
+              _color = item.color
+            }
             return {
               content: value,
               style: {
-                fill: color
+                fill: _color
               }
             }
           })
@@ -876,10 +914,6 @@
         })
       }
   
-      if (plot.transpose === 'true') {
-        chart.coordinate().transpose()
-      }
-  
       if (plot.coordinate === 'polar') {
         chart.coordinate('polar', {
           innerRadius: 0.1,
@@ -889,6 +923,45 @@
 
       let colors = new Map()
       let colorIndex = 0
+      let lablecfg = {
+        position: 'top',
+        offset: 2,
+        style: {
+          fill: '#fff'
+        }
+      }
+
+      if (plot.label === 'top') {
+        lablecfg.offset = -5
+        lablecfg.style.textBaseline = 'top'
+      } else if (plot.label === 'middle') {
+        lablecfg.position = 'middle'
+        lablecfg.offset = 0
+      } else if (plot.label === 'bottom') {
+        lablecfg.position = 'bottom'
+        lablecfg.offset = 0
+      } else if (plot.label === 'true') {
+        lablecfg.style.fill = color
+      }
+
+      if (plot.transpose === 'true') {
+        chart.coordinate().transpose()
+        if (plot.label === 'top') {
+          delete lablecfg.style.textBaseline
+          lablecfg.position = 'right'
+          lablecfg.offset = -3
+          lablecfg.style.textAlign = 'end'
+        } else if (plot.label === 'middle') {
+          lablecfg.position = 'middle'
+          lablecfg.offset = 0
+        } else if (plot.label === 'bottom') {
+          lablecfg.position = 'left'
+          lablecfg.offset = 2
+        } else if (plot.label === 'true') {
+          lablecfg.position = 'right'
+          lablecfg.offset = 2
+        }
+      }
 
       if (plot.colors && plot.colors.length > 0) {
         if (plot.ramp === 'true') {
@@ -940,16 +1013,19 @@
         } else {
           _chart.color('key')
         }
-        if (plot.label === 'true') {
-          _chart.label('value', (value) => {
+        if (plot.label !== 'false') {
+          _chart.label('value*key', (value, key) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) {
+              lablecfg.style.fill = colors.get(key)
+            }
+            
             return {
               content: value,
-              style: {
-                fill: color
-              }
+              ...lablecfg
             }
           })
         }
@@ -998,16 +1074,18 @@
         } else {
           _chart.color('key')
         }
-        if (plot.label === 'true') {
-          _chart.label('value', (value) => {
+        if (plot.label !== 'false') {
+          _chart.label('value*key', (value, key) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) {
+              lablecfg.style.fill = colors.get(key)
+            }
             return {
               content: value,
-              style: {
-                fill: color
-              }
+              ...lablecfg
             }
           })
         }
diff --git a/src/menu/components/chart/antv-dashboard/index.jsx b/src/menu/components/chart/antv-dashboard/index.jsx
index 62bde3e..cc59f86 100644
--- a/src/menu/components/chart/antv-dashboard/index.jsx
+++ b/src/menu/components/chart/antv-dashboard/index.jsx
@@ -156,9 +156,12 @@
   }
 
   componentDidMount () {
-    this.viewrender()
     MKEmitter.addListener('tabsChange', this.handleTabsChange)
     MKEmitter.addListener('submitStyle', this.getStyle)
+
+    setTimeout(() => {
+      this.viewrender()
+    }, 1000)
   }
 
   shouldComponentUpdate (nextProps, nextState) {
diff --git a/src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx
index 0839cbb..195f5b0 100644
--- a/src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx
+++ b/src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx
@@ -251,7 +251,7 @@
     {
       type: 'radio',
       key: 'label',
-      label: '鏍囨敞鍊�',
+      label: '鏍囩',
       initVal: card.label || 'false',
       required: false,
       options: [{
@@ -262,7 +262,10 @@
         text: '鍐呬晶'
       }, {
         value: 'outer',
-        text: '澶栦晶'
+        text: '铚樿洓'
+      }, {
+        value: 'normal',
+        text: '甯歌'
       }],
     }, {
       type: 'radio',
diff --git a/src/menu/components/chart/antv-pie/index.jsx b/src/menu/components/chart/antv-pie/index.jsx
index cfbbd96..593fcd5 100644
--- a/src/menu/components/chart/antv-pie/index.jsx
+++ b/src/menu/components/chart/antv-pie/index.jsx
@@ -112,9 +112,12 @@
   }
 
   componentDidMount () {
-    this.pierender()
     MKEmitter.addListener('tabsChange', this.handleTabsChange)
     MKEmitter.addListener('submitStyle', this.getStyle)
+
+    setTimeout(() => {
+      this.viewrender()
+    }, 1000)
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -142,7 +145,17 @@
       }
 
       this.$timer && clearTimeout(this.$timer)
-      this.$timer = setTimeout(this.pierender, 100)
+      this.$timer = setTimeout(this.viewrender, 100)
+    }
+  }
+
+  viewrender = () => {
+    const { card } = this.state
+
+    if (card.plot.shape === 'nest') {
+      this.nestrender()
+    } else {
+      this.pierender()
     }
   }
 
@@ -349,19 +362,13 @@
         chart2.label(Y_axis, {
           offset: -30,
           content: (data) => {
-            let _label = ''
             let _val = ''
             if (plot.show !== 'value') {
               _val = `${(data[Y_axis] * 100).toFixed(2)}%`
             } else {
               _val = `${data[Y_axis]}`
             }
-            if (plot.label === 'inner') {
-              _label = _val
-            } else {
-              _label = `${data[X_axis]}: ${_val}`
-            }
-            return _label
+            return _val
           },
           style: {
             textAlign: 'center',
@@ -373,22 +380,17 @@
         })
       } else {
         chart2.label(Y_axis, {
-          layout: { type: 'pie-spider' },
+          layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
           labelHeight: 20,
           content: (data) => {
-            let _label = ''
             let _val = ''
             if (plot.show !== 'value') {
               _val = `${(data[Y_axis] * 100).toFixed(2)}%`
             } else {
               _val = `${data[Y_axis]}`
             }
-            if (plot.label === 'inner') {
-              _label = _val
-            } else {
-              _label = `${data[X_axis]}: ${_val}`
-            }
-            return _label
+
+            return `${data[X_axis]}: ${_val}`
           },
           labelLine: {
             style: {
@@ -414,11 +416,6 @@
   pierender = () => {
     const { card } = this.state
     const plot = card.plot
-
-    if (plot.shape === 'nest') {
-      this.nestrender()
-      return
-    }
 
     let color = plot.color || 'rgba(0, 0, 0, 0.85)'
     let X_axis = plot.Xaxis || 'x'
@@ -530,19 +527,13 @@
           _chart.label(Y_axis, {
             offset: -30,
             content: (data) => {
-              let _label = ''
               let _val = ''
               if (plot.show !== 'value') {
                 _val = `${(data[Y_axis] * 100).toFixed(2)}%`
               } else {
                 _val = `${data[Y_axis]}`
               }
-              if (plot.label === 'inner') {
-                _label = _val
-              } else {
-                _label = `${data[X_axis]}: ${_val}`
-              }
-              return _label
+              return _val
             },
             style: {
               textAlign: 'center',
@@ -554,22 +545,17 @@
           })
         } else {
           _chart.label(Y_axis, {
-            layout: { type: 'pie-spider' },
+            layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
             labelHeight: 20,
             content: (data) => {
-              let _label = ''
               let _val = ''
               if (plot.show !== 'value') {
                 _val = `${(data[Y_axis] * 100).toFixed(2)}%`
               } else {
                 _val = `${data[Y_axis]}`
               }
-              if (plot.label === 'inner') {
-                _label = _val
-              } else {
-                _label = `${data[X_axis]}: ${_val}`
-              }
-              return _label
+
+              return `${data[X_axis]}: ${_val}`
             },
             labelLine: {
               style: {
@@ -628,7 +614,7 @@
       }
       this.$timer && clearTimeout(this.$timer)
       this.$timer = setTimeout(() => {
-        this.pierender()
+        this.viewrender()
       }, 150)
     }
 
diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
index 85e467d..8b34453 100644
--- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
@@ -1054,6 +1054,27 @@
       nice: true
     })
 
+    let lablecfg = {
+      position: 'top',
+      offset: 2,
+      style: {
+        fill: '#fff'
+      }
+    }
+
+    if (plot.label === 'top') {
+      lablecfg.offset = -5
+      lablecfg.style.textBaseline = 'top'
+    } else if (plot.label === 'middle') {
+      lablecfg.position = 'middle'
+      lablecfg.offset = 0
+    } else if (plot.label === 'bottom') {
+      lablecfg.position = 'bottom'
+      lablecfg.offset = 0
+    } else if (plot.label === 'true') {
+      lablecfg.style.fill = plot.color
+    }
+
     if (plot.Bar_axis) {
       const view1 = chart.createView({
         region: {
@@ -1126,15 +1147,17 @@
           _chart.color('key')
         }
         if (plot.label === 'true') {
-          _chart.label('value', (value) => {
+          _chart.label('value*key', (value, key) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
+              lablecfg.style.fill = plot.$colors.get(key)
+            }
             return {
               content: value,
-              style: {
-                fill: plot.color
-              }
+              ...lablecfg
             }
           })
         }
@@ -1175,15 +1198,16 @@
           _chart.color('key')
         }
         if (plot.label === 'true') {
-          _chart.label('value', (value) => {
+          _chart.label('value*key', (value, key) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+            if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
+              lablecfg.style.fill = plot.$colors.get(key)
+            }
             return {
               content: value,
-              style: {
-                fill: plot.color
-              }
+              ...lablecfg
             }
           })
         }
@@ -1236,11 +1260,12 @@
             if (plot.show === 'percent') {
               value = value + '%'
             }
+            if (plot.label === 'true' && plot.labelColor === 'custom' && item.color) {
+              lablecfg.style.fill = item.color
+            }
             return {
               content: value,
-              style: {
-                fill: plot.color
-              }
+              ...lablecfg
             }
           })
         }
@@ -1410,10 +1435,44 @@
       })
     }
 
-    let offset = {offsetY: 5}
+    let lablecfg = {
+      position: 'top',
+      offset: 2,
+      style: {
+        fill: '#fff'
+      }
+    }
+
+    if (plot.label === 'top') {
+      lablecfg.offset = -5
+      lablecfg.style.textBaseline = 'top'
+    } else if (plot.label === 'middle') {
+      lablecfg.position = 'middle'
+      lablecfg.offset = 0
+    } else if (plot.label === 'bottom') {
+      lablecfg.position = 'bottom'
+      lablecfg.offset = 0
+    } else if (plot.label === 'true') {
+      lablecfg.style.fill = plot.color
+    }
+
     if (plot.transpose === 'true') {
       chart.coordinate().transpose()
-      offset = {offsetY: 0, offsetX: -10}
+      if (plot.label === 'top') {
+        delete lablecfg.style.textBaseline
+        lablecfg.position = 'right'
+        lablecfg.offset = -3
+        lablecfg.style.textAlign = 'end'
+      } else if (plot.label === 'middle') {
+        lablecfg.position = 'middle'
+        lablecfg.offset = 0
+      } else if (plot.label === 'bottom') {
+        lablecfg.position = 'left'
+        lablecfg.offset = 2
+      } else if (plot.label === 'true') {
+        lablecfg.position = 'right'
+        lablecfg.offset = 2
+      }
     }
 
     if (plot.coordinate === 'polar') {
@@ -1455,16 +1514,18 @@
         _chart.color(_typefield)
       }
       if (plot.label === 'true') {
-        _chart.label(_valfield, (value) => {
+        _chart.label(`${_valfield}*${_typefield}`, (value, key) => {
           if (plot.show === 'percent') {
             value = value + '%'
           }
+
+          if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
+            lablecfg.style.fill = plot.$colors.get(key)
+          }
+
           return {
             content: value,
-            style: {
-              fill: plot.color
-            },
-            ...offset
+            ...lablecfg
           }
         })
       }
@@ -1511,15 +1572,18 @@
         _chart.color(_typefield)
       }
       if (plot.label === 'true') {
-        _chart.label(_valfield, (value) => {
+        _chart.label(`${_valfield}*${_typefield}`, (value, key) => {
           if (plot.show === 'percent') {
             value = value + '%'
           }
+
+          if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
+            lablecfg.style.fill = plot.$colors.get(key)
+          }
+
           return {
             content: value,
-            style: {
-              fill: plot.color
-            }
+            ...lablecfg
           }
         })
       }
diff --git a/src/tabviews/custom/components/chart/antv-pie/index.jsx b/src/tabviews/custom/components/chart/antv-pie/index.jsx
index ec281d5..df47548 100644
--- a/src/tabviews/custom/components/chart/antv-pie/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-pie/index.jsx
@@ -207,11 +207,18 @@
   }
 
   handleData = () => {
-    let _element = document.getElementById(this.state.chartId)
+    const { plot, chartId } = this.state
+    
+    let _element = document.getElementById(chartId)
     if (_element) {
       _element.innerHTML = ''
     }
-    this.pierender()
+
+    if (plot.shape === 'nest') {
+      this.nestrender()
+    } else {
+      this.pierender()
+    }
   }
 
   async loadData (hastimer) {
@@ -682,19 +689,13 @@
         chart2.label(Y_axis, {
           offset: -30,
           content: (data) => {
-            let _label = ''
             let _val = ''
             if (plot.show !== 'value') {
               _val = `${(data[Y_axis] * 100).toFixed(2)}%`
             } else {
               _val = `${data[Y_axis]}`
             }
-            if (plot.label === 'inner') {
-              _label = _val
-            } else {
-              _label = `${data[X_axis]}: ${_val}`
-            }
-            return _label
+            return _val
           },
           style: {
             textAlign: 'center',
@@ -706,22 +707,17 @@
         })
       } else {
         chart2.label(Y_axis, {
-          layout: { type: 'pie-spider' },
+          layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
           labelHeight: 20,
           content: (data) => {
-            let _label = ''
             let _val = ''
             if (plot.show !== 'value') {
               _val = `${(data[Y_axis] * 100).toFixed(2)}%`
             } else {
               _val = `${data[Y_axis]}`
             }
-            if (plot.label === 'inner') {
-              _label = _val
-            } else {
-              _label = `${data[X_axis]}: ${_val}`
-            }
-            return _label
+
+            return `${data[X_axis]}: ${_val}`
           },
           labelLine: {
             style: {
@@ -747,11 +743,6 @@
    */
   pierender = () => {
     const { plot, chartId } = this.state
-
-    if (plot.shape === 'nest') {
-      this.nestrender()
-      return
-    }
 
     let color = plot.color
 
@@ -898,7 +889,7 @@
           })
         } else {
           _chart.label(Y_axis, {
-            layout: { type: 'pie-spider' },
+            layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
             labelHeight: 20,
             content: (data) => {
               let _val = ''

--
Gitblit v1.8.0