{"remainingRequest":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\examine-fvue\\node_modules\\@jiaminghi\\data-view\\lib\\components\\conicalColumnChart\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\@jiaminghi\\data-view\\lib\\components\\conicalColumnChart\\src\\main.vue","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport autoResize from '../../../mixin/autoResize'\n\nimport { deepMerge } from '@jiaminghi/charts/lib/util/index'\n\nimport { deepClone } from '@jiaminghi/c-render/lib/plugin/util'\n\nexport default {\n  name: 'DvConicalColumnChart',\n  mixins: [autoResize],\n  props: {\n    config: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data () {\n    return {\n      ref: 'conical-column-chart',\n\n      defaultConfig: {\n        /**\n         * @description Chart data\n         * @type {Array<Object>}\n         * @default data = []\n         */\n        data: [],\n        /**\n         * @description Chart img\n         * @type {Array<String>}\n         * @default img = []\n         */\n        img: [],\n        /**\n         * @description Chart font size\n         * @type {Number}\n         * @default fontSize = 12\n         */\n        fontSize: 12,\n        /**\n         * @description Img side length\n         * @type {Number}\n         * @default imgSideLength = 30\n         */\n        imgSideLength: 30,\n        /**\n         * @description Column color\n         * @type {String}\n         * @default columnColor = 'rgba(0, 194, 255, 0.4)'\n         */\n        columnColor: 'rgba(0, 194, 255, 0.4)',\n        /**\n         * @description Text color\n         * @type {String}\n         * @default textColor = '#fff'\n         */\n        textColor: '#fff',\n        /**\n         * @description Show value\n         * @type {Boolean}\n         * @default showValue = false\n         */\n        showValue: false\n      },\n\n      mergedConfig: null,\n\n      column: []\n    }\n  },\n  watch: {\n    config () {\n      const { calcData } = this\n\n      calcData()\n    }\n  },\n  methods: {\n    afterAutoResizeMixinInit () {\n      const { calcData } = this\n\n      calcData()\n    },\n    onResize () {\n      const { calcData } = this\n\n      calcData()\n    },\n    calcData () {\n      const { mergeConfig, initData, calcSVGPath } = this\n\n      mergeConfig()\n\n      initData()\n\n      calcSVGPath()\n    },\n    mergeConfig () {\n      const { defaultConfig, config } = this\n\n      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})\n    },\n    initData () {\n      const { mergedConfig } = this\n      let { data } = mergedConfig\n\n      data = deepClone(data, true)\n\n      data.sort(({ value: a }, { value: b }) => {\n        if (a > b) return -1\n        if (a < b) return 1\n        if (a === b) return 0\n      })\n\n      const max = data[0] ? data[0].value : 10\n\n      data = data.map(item => ({\n        ...item,\n        percent: item.value / max\n      }))\n\n      mergedConfig.data = data\n    },\n    calcSVGPath () {\n      const { mergedConfig, width, height } = this\n\n      const { imgSideLength, fontSize, data } = mergedConfig\n\n      const itemNum = data.length\n      const gap = width / (itemNum + 1)\n\n      const useAbleHeight = height - imgSideLength - fontSize - 5\n      const svgBottom = height - fontSize - 5\n\n      this.column = data.map((item, i) => {\n        const { percent } = item\n\n        const middleXPos = gap * (i + 1)\n        const leftXPos = gap * i\n        const rightXpos = gap * (i + 2)\n\n        const middleYPos = svgBottom - useAbleHeight * percent\n        const controlYPos = useAbleHeight * percent * 0.6 + middleYPos\n\n        const d = `\n          M${leftXPos}, ${svgBottom}\n          Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}\n          M${middleXPos},${middleYPos}\n          Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}\n          L${leftXPos}, ${svgBottom}\n          Z\n        `\n\n        const textY = (svgBottom + middleYPos) / 2 + fontSize / 2\n\n        return {\n          ...item,\n          d,\n          x: middleXPos,\n          y: middleYPos,\n          textY\n        }\n      })\n    }\n  }\n}\n",null]}