{"remainingRequest":"C:\\hjmWeb\\suyiScreen\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\hjmWeb\\suyiScreen\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\conicalColumnChart\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\hjmWeb\\suyiScreen\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\conicalColumnChart\\src\\main.vue","mtime":1670640065277},{"path":"C:\\hjmWeb\\suyiScreen\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1670640066936},{"path":"C:\\hjmWeb\\suyiScreen\\suyiScreen\\node_modules\\babel-loader\\lib\\index.js","mtime":1670640065986},{"path":"C:\\hjmWeb\\suyiScreen\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1670640066936},{"path":"C:\\hjmWeb\\suyiScreen\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js","mtime":1670640074287}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgYXV0b1Jlc2l6ZSBmcm9tICcuLi8uLi8uLi9taXhpbi9hdXRvUmVzaXplJw0KDQppbXBvcnQgeyBkZWVwTWVyZ2UgfSBmcm9tICdAamlhbWluZ2hpL2NoYXJ0cy9saWIvdXRpbC9pbmRleCcNCg0KaW1wb3J0IHsgZGVlcENsb25lIH0gZnJvbSAnQGppYW1pbmdoaS9jLXJlbmRlci9saWIvcGx1Z2luL3V0aWwnDQoNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogJ0R2Q29uaWNhbENvbHVtbkNoYXJ0JywNCiAgbWl4aW5zOiBbYXV0b1Jlc2l6ZV0sDQogIHByb3BzOiB7DQogICAgY29uZmlnOiB7DQogICAgICB0eXBlOiBPYmplY3QsDQogICAgICBkZWZhdWx0OiAoKSA9PiAoe30pDQogICAgfQ0KICB9LA0KICBkYXRhICgpIHsNCiAgICByZXR1cm4gew0KICAgICAgcmVmOiAnY29uaWNhbC1jb2x1bW4tY2hhcnQnLA0KDQogICAgICBkZWZhdWx0Q29uZmlnOiB7DQogICAgICAgIC8qKg0KICAgICAgICAgKiBAZGVzY3JpcHRpb24gQ2hhcnQgZGF0YQ0KICAgICAgICAgKiBAdHlwZSB7QXJyYXk8T2JqZWN0Pn0NCiAgICAgICAgICogQGRlZmF1bHQgZGF0YSA9IFtdDQogICAgICAgICAqLw0KICAgICAgICBkYXRhOiBbXSwNCiAgICAgICAgLyoqDQogICAgICAgICAqIEBkZXNjcmlwdGlvbiBDaGFydCBpbWcNCiAgICAgICAgICogQHR5cGUge0FycmF5PFN0cmluZz59DQogICAgICAgICAqIEBkZWZhdWx0IGltZyA9IFtdDQogICAgICAgICAqLw0KICAgICAgICBpbWc6IFtdLA0KICAgICAgICAvKioNCiAgICAgICAgICogQGRlc2NyaXB0aW9uIENoYXJ0IGZvbnQgc2l6ZQ0KICAgICAgICAgKiBAdHlwZSB7TnVtYmVyfQ0KICAgICAgICAgKiBAZGVmYXVsdCBmb250U2l6ZSA9IDEyDQogICAgICAgICAqLw0KICAgICAgICBmb250U2l6ZTogMTIsDQogICAgICAgIC8qKg0KICAgICAgICAgKiBAZGVzY3JpcHRpb24gSW1nIHNpZGUgbGVuZ3RoDQogICAgICAgICAqIEB0eXBlIHtOdW1iZXJ9DQogICAgICAgICAqIEBkZWZhdWx0IGltZ1NpZGVMZW5ndGggPSAzMA0KICAgICAgICAgKi8NCiAgICAgICAgaW1nU2lkZUxlbmd0aDogMzAsDQogICAgICAgIC8qKg0KICAgICAgICAgKiBAZGVzY3JpcHRpb24gQ29sdW1uIGNvbG9yDQogICAgICAgICAqIEB0eXBlIHtTdHJpbmd9DQogICAgICAgICAqIEBkZWZhdWx0IGNvbHVtbkNvbG9yID0gJ3JnYmEoMCwgMTk0LCAyNTUsIDAuNCknDQogICAgICAgICAqLw0KICAgICAgICBjb2x1bW5Db2xvcjogJ3JnYmEoMCwgMTk0LCAyNTUsIDAuNCknLA0KICAgICAgICAvKioNCiAgICAgICAgICogQGRlc2NyaXB0aW9uIFRleHQgY29sb3INCiAgICAgICAgICogQHR5cGUge1N0cmluZ30NCiAgICAgICAgICogQGRlZmF1bHQgdGV4dENvbG9yID0gJyNmZmYnDQogICAgICAgICAqLw0KICAgICAgICB0ZXh0Q29sb3I6ICcjZmZmJywNCiAgICAgICAgLyoqDQogICAgICAgICAqIEBkZXNjcmlwdGlvbiBTaG93IHZhbHVlDQogICAgICAgICAqIEB0eXBlIHtCb29sZWFufQ0KICAgICAgICAgKiBAZGVmYXVsdCBzaG93VmFsdWUgPSBmYWxzZQ0KICAgICAgICAgKi8NCiAgICAgICAgc2hvd1ZhbHVlOiBmYWxzZQ0KICAgICAgfSwNCg0KICAgICAgbWVyZ2VkQ29uZmlnOiBudWxsLA0KDQogICAgICBjb2x1bW46IFtdDQogICAgfQ0KICB9LA0KICB3YXRjaDogew0KICAgIGNvbmZpZyAoKSB7DQogICAgICBjb25zdCB7IGNhbGNEYXRhIH0gPSB0aGlzDQoNCiAgICAgIGNhbGNEYXRhKCkNCiAgICB9DQogIH0sDQogIG1ldGhvZHM6IHsNCiAgICBhZnRlckF1dG9SZXNpemVNaXhpbkluaXQgKCkgew0KICAgICAgY29uc3QgeyBjYWxjRGF0YSB9ID0gdGhpcw0KDQogICAgICBjYWxjRGF0YSgpDQogICAgfSwNCiAgICBvblJlc2l6ZSAoKSB7DQogICAgICBjb25zdCB7IGNhbGNEYXRhIH0gPSB0aGlzDQoNCiAgICAgIGNhbGNEYXRhKCkNCiAgICB9LA0KICAgIGNhbGNEYXRhICgpIHsNCiAgICAgIGNvbnN0IHsgbWVyZ2VDb25maWcsIGluaXREYXRhLCBjYWxjU1ZHUGF0aCB9ID0gdGhpcw0KDQogICAgICBtZXJnZUNvbmZpZygpDQoNCiAgICAgIGluaXREYXRhKCkNCg0KICAgICAgY2FsY1NWR1BhdGgoKQ0KICAgIH0sDQogICAgbWVyZ2VDb25maWcgKCkgew0KICAgICAgY29uc3QgeyBkZWZhdWx0Q29uZmlnLCBjb25maWcgfSA9IHRoaXMNCg0KICAgICAgdGhpcy5tZXJnZWRDb25maWcgPSBkZWVwTWVyZ2UoZGVlcENsb25lKGRlZmF1bHRDb25maWcsIHRydWUpLCBjb25maWcgfHwge30pDQogICAgfSwNCiAgICBpbml0RGF0YSAoKSB7DQogICAgICBjb25zdCB7IG1lcmdlZENvbmZpZyB9ID0gdGhpcw0KICAgICAgbGV0IHsgZGF0YSB9ID0gbWVyZ2VkQ29uZmlnDQoNCiAgICAgIGRhdGEgPSBkZWVwQ2xvbmUoZGF0YSwgdHJ1ZSkNCg0KICAgICAgZGF0YS5zb3J0KCh7IHZhbHVlOiBhIH0sIHsgdmFsdWU6IGIgfSkgPT4gew0KICAgICAgICBpZiAoYSA+IGIpIHJldHVybiAtMQ0KICAgICAgICBpZiAoYSA8IGIpIHJldHVybiAxDQogICAgICAgIGlmIChhID09PSBiKSByZXR1cm4gMA0KICAgICAgfSkNCg0KICAgICAgY29uc3QgbWF4ID0gZGF0YVswXSA/IGRhdGFbMF0udmFsdWUgOiAxMA0KDQogICAgICBkYXRhID0gZGF0YS5tYXAoaXRlbSA9PiAoew0KICAgICAgICAuLi5pdGVtLA0KICAgICAgICBwZXJjZW50OiBpdGVtLnZhbHVlIC8gbWF4DQogICAgICB9KSkNCg0KICAgICAgbWVyZ2VkQ29uZmlnLmRhdGEgPSBkYXRhDQogICAgfSwNCiAgICBjYWxjU1ZHUGF0aCAoKSB7DQogICAgICBjb25zdCB7IG1lcmdlZENvbmZpZywgd2lkdGgsIGhlaWdodCB9ID0gdGhpcw0KDQogICAgICBjb25zdCB7IGltZ1NpZGVMZW5ndGgsIGZvbnRTaXplLCBkYXRhIH0gPSBtZXJnZWRDb25maWcNCg0KICAgICAgY29uc3QgaXRlbU51bSA9IGRhdGEubGVuZ3RoDQogICAgICBjb25zdCBnYXAgPSB3aWR0aCAvIChpdGVtTnVtICsgMSkNCg0KICAgICAgY29uc3QgdXNlQWJsZUhlaWdodCA9IGhlaWdodCAtIGltZ1NpZGVMZW5ndGggLSBmb250U2l6ZSAtIDUNCiAgICAgIGNvbnN0IHN2Z0JvdHRvbSA9IGhlaWdodCAtIGZvbnRTaXplIC0gNQ0KDQogICAgICB0aGlzLmNvbHVtbiA9IGRhdGEubWFwKChpdGVtLCBpKSA9PiB7DQogICAgICAgIGNvbnN0IHsgcGVyY2VudCB9ID0gaXRlbQ0KDQogICAgICAgIGNvbnN0IG1pZGRsZVhQb3MgPSBnYXAgKiAoaSArIDEpDQogICAgICAgIGNvbnN0IGxlZnRYUG9zID0gZ2FwICogaQ0KICAgICAgICBjb25zdCByaWdodFhwb3MgPSBnYXAgKiAoaSArIDIpDQoNCiAgICAgICAgY29uc3QgbWlkZGxlWVBvcyA9IHN2Z0JvdHRvbSAtIHVzZUFibGVIZWlnaHQgKiBwZXJjZW50DQogICAgICAgIGNvbnN0IGNvbnRyb2xZUG9zID0gdXNlQWJsZUhlaWdodCAqIHBlcmNlbnQgKiAwLjYgKyBtaWRkbGVZUG9zDQoNCiAgICAgICAgY29uc3QgZCA9IGANCiAgICAgICAgICBNJHtsZWZ0WFBvc30sICR7c3ZnQm90dG9tfQ0KICAgICAgICAgIFEke21pZGRsZVhQb3N9LCAke2NvbnRyb2xZUG9zfSAke21pZGRsZVhQb3N9LCR7bWlkZGxlWVBvc30NCiAgICAgICAgICBNJHttaWRkbGVYUG9zfSwke21pZGRsZVlQb3N9DQogICAgICAgICAgUSR7bWlkZGxlWFBvc30sICR7Y29udHJvbFlQb3N9ICR7cmlnaHRYcG9zfSwke3N2Z0JvdHRvbX0NCiAgICAgICAgICBMJHtsZWZ0WFBvc30sICR7c3ZnQm90dG9tfQ0KICAgICAgICAgIFoNCiAgICAgICAgYA0KDQogICAgICAgIGNvbnN0IHRleHRZID0gKHN2Z0JvdHRvbSArIG1pZGRsZVlQb3MpIC8gMiArIGZvbnRTaXplIC8gMg0KDQogICAgICAgIHJldHVybiB7DQogICAgICAgICAgLi4uaXRlbSwNCiAgICAgICAgICBkLA0KICAgICAgICAgIHg6IG1pZGRsZVhQb3MsDQogICAgICAgICAgeTogbWlkZGxlWVBvcywNCiAgICAgICAgICB0ZXh0WQ0KICAgICAgICB9DQogICAgICB9KQ0KICAgIH0NCiAgfQ0KfQ0K"},{"version":3,"sources":["main.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"main.vue","sourceRoot":"node_modules/@jiaminghi/data-view/lib/components/conicalColumnChart/src","sourcesContent":["<template>\r\n  <div class=\"dv-conical-column-chart\" :ref=\"ref\">\r\n    <svg :width=\"width\" :height=\"height\">\r\n      <g\r\n        v-for=\"(item, i) in column\"\r\n        :key=\"i\"\r\n      >\r\n        <path\r\n          :d=\"item.d\"\r\n          :fill=\"mergedConfig.columnColor\"\r\n        />\r\n        <text\r\n          :style=\"`fontSize:${mergedConfig.fontSize}px`\"\r\n          :fill=\"mergedConfig.textColor\"\r\n          :x=\"item.x\"\r\n          :y=\"height - 4\"\r\n        >\r\n          {{ item.name }}\r\n        </text>\r\n        <image\r\n          v-if=\"mergedConfig.img.length\"\r\n          :xlink:href=\"mergedConfig.img[i % mergedConfig.img.length]\"\r\n          :width=\"mergedConfig.imgSideLength\"\r\n          :height=\"mergedConfig.imgSideLength\"\r\n          :x=\"item.x - mergedConfig.imgSideLength / 2\"\r\n          :y=\"item.y - mergedConfig.imgSideLength\"\r\n        />\r\n        <text\r\n          v-if=\"mergedConfig.showValue\"\r\n          :style=\"`fontSize:${mergedConfig.fontSize}px`\"\r\n          :fill=\"mergedConfig.textColor\"\r\n          :x=\"item.x\"\r\n          :y=\"item.textY\"\r\n        >\r\n          {{ item.value }}\r\n        </text>\r\n      </g>\r\n    </svg>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport autoResize from '../../../mixin/autoResize'\r\n\r\nimport { deepMerge } from '@jiaminghi/charts/lib/util/index'\r\n\r\nimport { deepClone } from '@jiaminghi/c-render/lib/plugin/util'\r\n\r\nexport default {\r\n  name: 'DvConicalColumnChart',\r\n  mixins: [autoResize],\r\n  props: {\r\n    config: {\r\n      type: Object,\r\n      default: () => ({})\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      ref: 'conical-column-chart',\r\n\r\n      defaultConfig: {\r\n        /**\r\n         * @description Chart data\r\n         * @type {Array<Object>}\r\n         * @default data = []\r\n         */\r\n        data: [],\r\n        /**\r\n         * @description Chart img\r\n         * @type {Array<String>}\r\n         * @default img = []\r\n         */\r\n        img: [],\r\n        /**\r\n         * @description Chart font size\r\n         * @type {Number}\r\n         * @default fontSize = 12\r\n         */\r\n        fontSize: 12,\r\n        /**\r\n         * @description Img side length\r\n         * @type {Number}\r\n         * @default imgSideLength = 30\r\n         */\r\n        imgSideLength: 30,\r\n        /**\r\n         * @description Column color\r\n         * @type {String}\r\n         * @default columnColor = 'rgba(0, 194, 255, 0.4)'\r\n         */\r\n        columnColor: 'rgba(0, 194, 255, 0.4)',\r\n        /**\r\n         * @description Text color\r\n         * @type {String}\r\n         * @default textColor = '#fff'\r\n         */\r\n        textColor: '#fff',\r\n        /**\r\n         * @description Show value\r\n         * @type {Boolean}\r\n         * @default showValue = false\r\n         */\r\n        showValue: false\r\n      },\r\n\r\n      mergedConfig: null,\r\n\r\n      column: []\r\n    }\r\n  },\r\n  watch: {\r\n    config () {\r\n      const { calcData } = this\r\n\r\n      calcData()\r\n    }\r\n  },\r\n  methods: {\r\n    afterAutoResizeMixinInit () {\r\n      const { calcData } = this\r\n\r\n      calcData()\r\n    },\r\n    onResize () {\r\n      const { calcData } = this\r\n\r\n      calcData()\r\n    },\r\n    calcData () {\r\n      const { mergeConfig, initData, calcSVGPath } = this\r\n\r\n      mergeConfig()\r\n\r\n      initData()\r\n\r\n      calcSVGPath()\r\n    },\r\n    mergeConfig () {\r\n      const { defaultConfig, config } = this\r\n\r\n      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})\r\n    },\r\n    initData () {\r\n      const { mergedConfig } = this\r\n      let { data } = mergedConfig\r\n\r\n      data = deepClone(data, true)\r\n\r\n      data.sort(({ value: a }, { value: b }) => {\r\n        if (a > b) return -1\r\n        if (a < b) return 1\r\n        if (a === b) return 0\r\n      })\r\n\r\n      const max = data[0] ? data[0].value : 10\r\n\r\n      data = data.map(item => ({\r\n        ...item,\r\n        percent: item.value / max\r\n      }))\r\n\r\n      mergedConfig.data = data\r\n    },\r\n    calcSVGPath () {\r\n      const { mergedConfig, width, height } = this\r\n\r\n      const { imgSideLength, fontSize, data } = mergedConfig\r\n\r\n      const itemNum = data.length\r\n      const gap = width / (itemNum + 1)\r\n\r\n      const useAbleHeight = height - imgSideLength - fontSize - 5\r\n      const svgBottom = height - fontSize - 5\r\n\r\n      this.column = data.map((item, i) => {\r\n        const { percent } = item\r\n\r\n        const middleXPos = gap * (i + 1)\r\n        const leftXPos = gap * i\r\n        const rightXpos = gap * (i + 2)\r\n\r\n        const middleYPos = svgBottom - useAbleHeight * percent\r\n        const controlYPos = useAbleHeight * percent * 0.6 + middleYPos\r\n\r\n        const d = `\r\n          M${leftXPos}, ${svgBottom}\r\n          Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}\r\n          M${middleXPos},${middleYPos}\r\n          Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}\r\n          L${leftXPos}, ${svgBottom}\r\n          Z\r\n        `\r\n\r\n        const textY = (svgBottom + middleYPos) / 2 + fontSize / 2\r\n\r\n        return {\r\n          ...item,\r\n          d,\r\n          x: middleXPos,\r\n          y: middleYPos,\r\n          textY\r\n        }\r\n      })\r\n    }\r\n  }\r\n}\r\n</script>"]}]}