From 979027cb518ee12309c127fe0722375b6c152aa9 Mon Sep 17 00:00:00 2001
From: lynee <415989157@qq.com>
Date: Thu, 8 Sep 2022 18:05:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=94=A5=E5=9E=8B=E5=9B=BE?=
 =?UTF-8?q?=20config.data[].value=E4=B8=BA0=E6=97=B6=20js=E9=99=A4?=
 =?UTF-8?q?=E6=B3=95=E6=8A=A5=E9=94=99=20svg=E7=BB=98=E5=9B=BE=E6=97=A0?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E5=AF=BC=E8=87=B4=E5=AD=97=E4=BD=93=E9=87=8D?=
 =?UTF-8?q?=E5=8F=A0=E6=A0=B7=E5=BC=8F=E9=94=99=E8=AF=AF=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../conicalColumnChart/src/main.vue           | 308 +++++++++---------
 1 file changed, 158 insertions(+), 150 deletions(-)

diff --git a/src/components/conicalColumnChart/src/main.vue b/src/components/conicalColumnChart/src/main.vue
index 2db4cb1..1fd473d 100644
--- a/src/components/conicalColumnChart/src/main.vue
+++ b/src/components/conicalColumnChart/src/main.vue
@@ -1,14 +1,8 @@
 <template>
   <div class="dv-conical-column-chart" :ref="ref">
     <svg :width="width" :height="height">
-      <g
-        v-for="(item, i) in column"
-        :key="i"
-      >
-        <path
-          :d="item.d"
-          :fill="mergedConfig.columnColor"
-        />
+      <g v-for="(item, i) in column" :key="i">
+        <path :d="item.d" :fill="mergedConfig.columnColor" />
         <text
           :style="`fontSize:${mergedConfig.fontSize}px`"
           :fill="mergedConfig.textColor"
@@ -40,180 +34,194 @@
 </template>
 
 <script>
-import autoResize from '../../../mixin/autoResize'
+  import autoResize from "../../../mixin/autoResize";
 
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+  import { deepMerge } from "@jiaminghi/charts/lib/util/index";
 
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+  import { deepClone } from "@jiaminghi/c-render/lib/plugin/util";
 
-export default {
-  name: 'DvConicalColumnChart',
-  mixins: [autoResize],
-  props: {
-    config: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      ref: 'conical-column-chart',
-
-      defaultConfig: {
-        /**
-         * @description Chart data
-         * @type {Array<Object>}
-         * @default data = []
-         */
-        data: [],
-        /**
-         * @description Chart img
-         * @type {Array<String>}
-         * @default img = []
-         */
-        img: [],
-        /**
-         * @description Chart font size
-         * @type {Number}
-         * @default fontSize = 12
-         */
-        fontSize: 12,
-        /**
-         * @description Img side length
-         * @type {Number}
-         * @default imgSideLength = 30
-         */
-        imgSideLength: 30,
-        /**
-         * @description Column color
-         * @type {String}
-         * @default columnColor = 'rgba(0, 194, 255, 0.4)'
-         */
-        columnColor: 'rgba(0, 194, 255, 0.4)',
-        /**
-         * @description Text color
-         * @type {String}
-         * @default textColor = '#fff'
-         */
-        textColor: '#fff',
-        /**
-         * @description Show value
-         * @type {Boolean}
-         * @default showValue = false
-         */
-        showValue: false
+  export default {
+    name: "DvConicalColumnChart",
+    mixins: [autoResize],
+    props: {
+      config: {
+        type: Object,
+        default: () => ({}),
       },
-
-      mergedConfig: null,
-
-      column: []
-    }
-  },
-  watch: {
-    config () {
-      const { calcData } = this
-
-      calcData()
-    }
-  },
-  methods: {
-    afterAutoResizeMixinInit () {
-      const { calcData } = this
-
-      calcData()
     },
-    onResize () {
-      const { calcData } = this
+    data() {
+      return {
+        ref: "conical-column-chart",
+
+        defaultConfig: {
+          /**
+           * @description Chart data
+           * @type {Array<Object>}
+           * @default data = []
+           */
+          data: [],
+          /**
+           * @description Chart img
+           * @type {Array<String>}
+           * @default img = []
+           */
+          img: [],
+          /**
+           * @description Chart font size
+           * @type {Number}
+           * @default fontSize = 12
+           */
+          fontSize: 12,
+          /**
+           * @description Img side length
+           * @type {Number}
+           * @default imgSideLength = 30
+           */
+          imgSideLength: 30,
+          /**
+           * @description Column color
+           * @type {String}
+           * @default columnColor = 'rgba(0, 194, 255, 0.4)'
+           */
+          columnColor: "rgba(0, 194, 255, 0.4)",
+          /**
+           * @description Text color
+           * @type {String}
+           * @default textColor = '#fff'
+           */
+          textColor: "#fff",
+          /**
+           * @description Show value
+           * @type {Boolean}
+           * @default showValue = false
+           */
+          showValue: false,
+        },
+
+        mergedConfig: null,
+
+        column: [],
+      };
+    },
+    watch: {
+      config() {
+        const { calcData } = this;
 
-      calcData()
+        calcData();
+      },
     },
-    calcData () {
-      const { mergeConfig, initData, calcSVGPath } = this
+    methods: {
+      afterAutoResizeMixinInit() {
+        const { calcData } = this;
+
+        calcData();
+      },
+      onResize() {
+        const { calcData } = this;
 
-      mergeConfig()
+        calcData();
+      },
+      calcData() {
+        const { mergeConfig, initData, calcSVGPath } = this;
 
-      initData()
+        mergeConfig();
 
-      calcSVGPath()
-    },
-    mergeConfig () {
-      const { defaultConfig, config } = this
+        initData();
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
-    },
-    initData () {
-      const { mergedConfig } = this
-      let { data } = mergedConfig
+        calcSVGPath();
+      },
+      mergeConfig() {
+        const { defaultConfig, config } = this;
 
-      data = deepClone(data, true)
+        this.mergedConfig = deepMerge(
+          deepClone(defaultConfig, true),
+          config || {}
+        );
+      },
+      initData() {
+        const { mergedConfig } = this;
+        let { data } = mergedConfig;
 
-      data.sort(({ value: a }, { value: b }) => {
-        if (a > b) return -1
-        if (a < b) return 1
-        if (a === b) return 0
-      })
+        data = deepClone(data, true);
 
-      const max = data[0] ? data[0].value : 10
+        data.sort(({ value: a }, { value: b }) => {
+          if (a > b) return -1;
+          if (a < b) return 1;
+          if (a === b) return 0;
+        });
 
-      data = data.map(item => ({
-        ...item,
-        percent: item.value / max
-      }))
+        const max = data[0] ? data[0].value : 10;
 
-      mergedConfig.data = data
-    },
-    calcSVGPath () {
-      const { mergedConfig, width, height } = this
+        data = data.map((item) => ({
+          ...item,
+          percent: this.computePercent(item.value, max),
+        }));
+
+        mergedConfig.data = data;
+      },
+      computePercent(value, max) {
+        if (value) {
+          if (value / max < 0.2) {
+            return 0.2;
+          } else {
+            return value / max;
+          }
+        } else {
+          return 0.2;
+        }
+      },
+      calcSVGPath() {
+        const { mergedConfig, width, height } = this;
 
-      const { imgSideLength, fontSize, data } = mergedConfig
+        const { imgSideLength, fontSize, data } = mergedConfig;
 
-      const itemNum = data.length
-      const gap = width / (itemNum + 1)
+        const itemNum = data.length;
+        const gap = width / (itemNum + 1);
 
-      const useAbleHeight = height - imgSideLength - fontSize - 5
-      const svgBottom = height - fontSize - 5
+        const useAbleHeight = height - imgSideLength - fontSize - 5;
+        const svgBottom = height - fontSize - 9;
 
-      this.column = data.map((item, i) => {
-        const { percent } = item
+        this.column = data.map((item, i) => {
+          const { percent } = item;
 
-        const middleXPos = gap * (i + 1)
-        const leftXPos = gap * i
-        const rightXpos = gap * (i + 2)
+          const middleXPos = gap * (i + 1);
+          const leftXPos = gap * i;
+          const rightXpos = gap * (i + 2);
 
-        const middleYPos = svgBottom - useAbleHeight * percent
-        const controlYPos = useAbleHeight * percent * 0.6 + middleYPos
+          const middleYPos = svgBottom - useAbleHeight * percent;
+          const controlYPos = useAbleHeight * percent * 0.6 + middleYPos;
 
-        const d = `
+          const d = `
           M${leftXPos}, ${svgBottom}
           Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}
           M${middleXPos},${middleYPos}
           Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}
           L${leftXPos}, ${svgBottom}
           Z
-        `
-
-        const textY = (svgBottom + middleYPos) / 2 + fontSize / 2
-
-        return {
-          ...item,
-          d,
-          x: middleXPos,
-          y: middleYPos,
-          textY
-        }
-      })
-    }
-  }
-}
+        `;
+
+          const textY = (svgBottom + middleYPos) / 2 + fontSize / 2;
+
+          return {
+            ...item,
+            d,
+            x: middleXPos,
+            y: middleYPos,
+            textY,
+          };
+        });
+      },
+    },
+  };
 </script>
 
 <style lang="less">
-.dv-conical-column-chart {
-  width: 100%;
-  height: 100%;
+  .dv-conical-column-chart {
+    width: 100%;
+    height: 100%;
 
-  text {
-    text-anchor: middle;
+    text {
+      text-anchor: middle;
+    }
   }
-}
 </style>