1 line
7.5 KiB
JSON
1 line
7.5 KiB
JSON
{"remainingRequest":"E:\\项目\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\项目\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\capsuleChart\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\项目\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\capsuleChart\\src\\main.vue","mtime":1670569849669},{"path":"E:\\项目\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1670569853083},{"path":"E:\\项目\\suyiScreen\\node_modules\\babel-loader\\lib\\index.js","mtime":1670569850970},{"path":"E:\\项目\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1670569853083},{"path":"E:\\项目\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js","mtime":1670569867456}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgeyBkZWVwTWVyZ2UgfSBmcm9tICdAamlhbWluZ2hpL2NoYXJ0cy9saWIvdXRpbC9pbmRleCcNCg0KaW1wb3J0IHsgZGVlcENsb25lIH0gZnJvbSAnQGppYW1pbmdoaS9jLXJlbmRlci9saWIvcGx1Z2luL3V0aWwnDQoNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogJ0R2Q2Fwc3VsZUNoYXJ0JywNCiAgcHJvcHM6IHsNCiAgICBjb25maWc6IHsNCiAgICAgIHR5cGU6IE9iamVjdCwNCiAgICAgIGRlZmF1bHQ6ICgpID0+ICh7fSkNCiAgICB9DQogIH0sDQogIGRhdGEgKCkgew0KICAgIHJldHVybiB7DQogICAgICBkZWZhdWx0Q29uZmlnOiB7DQogICAgICAgIC8qKg0KICAgICAgICAgKiBAZGVzY3JpcHRpb24gQ2Fwc3VsZSBjaGFydCBkYXRhDQogICAgICAgICAqIEB0eXBlIHtBcnJheTxPYmplY3Q+fQ0KICAgICAgICAgKiBAZGVmYXVsdCBkYXRhID0gW10NCiAgICAgICAgICogQGV4YW1wbGUgZGF0YSA9IFt7IG5hbWU6ICdmb28xJywgdmFsdWU6IDEwMCB9LCB7IG5hbWU6ICdmb28yJywgdmFsdWU6IDEwMCB9XQ0KICAgICAgICAgKi8NCiAgICAgICAgZGF0YTogW10sDQogICAgICAgIC8qKg0KICAgICAgICAgKiBAZGVzY3JpcHRpb24gQ29sb3JzIChoZXh8cmdifHJnYmF8Y29sb3Iga2V5d29yZHMpDQogICAgICAgICAqIEB0eXBlIHtBcnJheTxTdHJpbmc+fQ0KICAgICAgICAgKiBAZGVmYXVsdCBjb2xvciA9IFsnIzM3YTJkYScsICcjMzJjNWU5JywgJyM2N2UwZTMnLCAnIzlmZTZiOCcsICcjZmZkYjVjJywgJyNmZjlmN2YnLCAnI2ZiNzI5MyddDQogICAgICAgICAqIEBleGFtcGxlIGNvbG9yID0gWycjMDAwJywgJ3JnYigwLCAwLCAwKScsICdyZ2JhKDAsIDAsIDAsIDEpJywgJ3JlZCddDQogICAgICAgICAqLw0KICAgICAgICBjb2xvcnM6IFsnIzM3YTJkYScsICcjMzJjNWU5JywgJyM2N2UwZTMnLCAnIzlmZTZiOCcsICcjZmZkYjVjJywgJyNmZjlmN2YnLCAnI2ZiNzI5MyddLA0KICAgICAgICAvKioNCiAgICAgICAgICogQGRlc2NyaXB0aW9uIENoYXJ0IHVuaXQNCiAgICAgICAgICogQHR5cGUge1N0cmluZ30NCiAgICAgICAgICogQGRlZmF1bHQgdW5pdCA9ICcnDQogICAgICAgICAqLw0KICAgICAgICB1bml0OiAnJw0KICAgICAgfSwNCg0KICAgICAgbWVyZ2VkQ29uZmlnOiBudWxsLA0KDQogICAgICBjYXBzdWxlTGVuZ3RoOiBbXSwNCiAgICAgIGxhYmVsRGF0YTogW10NCiAgICB9DQogIH0sDQogIHdhdGNoOiB7DQogICAgY29uZmlnICgpIHsNCiAgICAgIGNvbnN0IHsgY2FsY0RhdGEgfSA9IHRoaXMNCg0KICAgICAgY2FsY0RhdGEoKQ0KICAgIH0NCiAgfSwNCiAgbWV0aG9kczogew0KICAgIGNhbGNEYXRhICgpIHsNCiAgICAgIGNvbnN0IHsgbWVyZ2VDb25maWcsIGNhbGNDYXBzdWxlTGVuZ3RoQW5kTGFiZWxEYXRhIH0gPSB0aGlzDQoNCiAgICAgIG1lcmdlQ29uZmlnKCkNCg0KICAgICAgY2FsY0NhcHN1bGVMZW5ndGhBbmRMYWJlbERhdGEoKQ0KICAgIH0sDQogICAgbWVyZ2VDb25maWcgKCkgew0KICAgICAgbGV0IHsgY29uZmlnLCBkZWZhdWx0Q29uZmlnIH0gPSB0aGlzDQoNCiAgICAgIHRoaXMubWVyZ2VkQ29uZmlnID0gZGVlcE1lcmdlKGRlZXBDbG9uZShkZWZhdWx0Q29uZmlnLCB0cnVlKSwgY29uZmlnIHx8IHt9KQ0KICAgIH0sDQogICAgY2FsY0NhcHN1bGVMZW5ndGhBbmRMYWJlbERhdGEgKCkgew0KICAgICAgY29uc3QgeyBkYXRhIH0gPSB0aGlzLm1lcmdlZENvbmZpZw0KDQogICAgICBpZiAoIWRhdGEubGVuZ3RoKSByZXR1cm4NCg0KICAgICAgY29uc3QgY2Fwc3VsZVZhbHVlID0gZGF0YS5tYXAoKHsgdmFsdWUgfSkgPT4gdmFsdWUpDQoNCiAgICAgIGNvbnN0IG1heFZhbHVlID0gTWF0aC5tYXgoLi4uY2Fwc3VsZVZhbHVlKQ0KDQogICAgICB0aGlzLmNhcHN1bGVMZW5ndGggPSBjYXBzdWxlVmFsdWUubWFwKHYgPT4gbWF4VmFsdWUgPyB2IC8gbWF4VmFsdWUgOiAwKQ0KDQogICAgICBjb25zdCBvbmVGaWZ0aCA9IG1heFZhbHVlIC8gNQ0KDQogICAgICB0aGlzLmxhYmVsRGF0YSA9IG5ldyBBcnJheSg2KS5maWxsKDApLm1hcCgodiwgaSkgPT4gTWF0aC5jZWlsKGkgKiBvbmVGaWZ0aCkpDQogICAgfQ0KICB9LA0KICBtb3VudGVkICgpIHsNCiAgICBjb25zdCB7IGNhbGNEYXRhIH0gPSB0aGlzDQoNCiAgICBjYWxjRGF0YSgpDQogIH0NCn0NCg=="},{"version":3,"sources":["main.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;;AAEA;;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;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"main.vue","sourceRoot":"node_modules/@jiaminghi/data-view/lib/components/capsuleChart/src","sourcesContent":["<template>\r\n <div class=\"dv-capsule-chart\">\r\n <template v-if=\"mergedConfig\">\r\n <div class=\"label-column\">\r\n <div v-for=\"item in mergedConfig.data\" :key=\"item.name\">{{ item.name }}</div>\r\n <div> </div>\r\n </div>\r\n\r\n <div class=\"capsule-container\">\r\n <div\r\n class=\"capsule-item\"\r\n v-for=\"(capsule, index) in capsuleLength\"\r\n :key=\"index\"\r\n >\r\n <div :style=\"`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`\"></div>\r\n </div>\r\n\r\n <div class=\"unit-label\">\r\n <div v-for=\"(label, index) in labelData\" :key=\"label + index\">{{ label }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"unit-text\" v-if=\"mergedConfig.unit\">{{ mergedConfig.unit }}</div>\r\n </template>\r\n </div>\r\n</template>\r\n\r\n<script>\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: 'DvCapsuleChart',\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 defaultConfig: {\r\n /**\r\n * @description Capsule chart data\r\n * @type {Array<Object>}\r\n * @default data = []\r\n * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]\r\n */\r\n data: [],\r\n /**\r\n * @description Colors (hex|rgb|rgba|color keywords)\r\n * @type {Array<String>}\r\n * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']\r\n * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']\r\n */\r\n colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],\r\n /**\r\n * @description Chart unit\r\n * @type {String}\r\n * @default unit = ''\r\n */\r\n unit: ''\r\n },\r\n\r\n mergedConfig: null,\r\n\r\n capsuleLength: [],\r\n labelData: []\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 calcData () {\r\n const { mergeConfig, calcCapsuleLengthAndLabelData } = this\r\n\r\n mergeConfig()\r\n\r\n calcCapsuleLengthAndLabelData()\r\n },\r\n mergeConfig () {\r\n let { config, defaultConfig } = this\r\n\r\n this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})\r\n },\r\n calcCapsuleLengthAndLabelData () {\r\n const { data } = this.mergedConfig\r\n\r\n if (!data.length) return\r\n\r\n const capsuleValue = data.map(({ value }) => value)\r\n\r\n const maxValue = Math.max(...capsuleValue)\r\n\r\n this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)\r\n\r\n const oneFifth = maxValue / 5\r\n\r\n this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))\r\n }\r\n },\r\n mounted () {\r\n const { calcData } = this\r\n\r\n calcData()\r\n }\r\n}\r\n</script>"]}]} |