1 line
16 KiB
JSON
1 line
16 KiB
JSON
{"remainingRequest":"D:\\Hjm项目\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\activeRingChart\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\Hjm项目\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\activeRingChart\\src\\main.vue","mtime":499162500000},{"path":"D:\\Hjm项目\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\suyiScreen\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"D:\\Hjm项目\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCBDaGFydHMgZnJvbSAnQGppYW1pbmdoaS9jaGFydHMnCgppbXBvcnQgZHZEaWdpdGFsRmxvcCBmcm9tICcuLi8uLi9kaWdpdGFsRmxvcC9zcmMvbWFpbi52dWUnCgppbXBvcnQgeyBkZWVwTWVyZ2UgfSBmcm9tICdAamlhbWluZ2hpL2NoYXJ0cy9saWIvdXRpbC9pbmRleCcKCmltcG9ydCB7IGRlZXBDbG9uZSB9IGZyb20gJ0BqaWFtaW5naGkvYy1yZW5kZXIvbGliL3BsdWdpbi91dGlsJwoKZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICdEdkFjdGl2ZVJpbmdDaGFydCcsCiAgY29tcG9uZW50czogewogICAgZHZEaWdpdGFsRmxvcAogIH0sCiAgcHJvcHM6IHsKICAgIGNvbmZpZzogewogICAgICB0eXBlOiBPYmplY3QsCiAgICAgIGRlZmF1bHQ6ICgpID0+ICh7fSkKICAgIH0KICB9LAogIGRhdGEgKCkgewogICAgcmV0dXJuIHsKICAgICAgZGVmYXVsdENvbmZpZzogewogICAgICAgIC8qKgogICAgICAgICAqIEBkZXNjcmlwdGlvbiBSaW5nIHJhZGl1cwogICAgICAgICAqIEB0eXBlIHtTdHJpbmd8TnVtYmVyfQogICAgICAgICAqIEBkZWZhdWx0IHJhZGl1cyA9ICc1MCUnCiAgICAgICAgICogQGV4YW1wbGUgcmFkaXVzID0gJzUwJScgfCAxMDAKICAgICAgICAgKi8KICAgICAgICByYWRpdXM6ICc1MCUnLAogICAgICAgIC8qKgogICAgICAgICAqIEBkZXNjcmlwdGlvbiBBY3RpdmUgcmluZyByYWRpdXMKICAgICAgICAgKiBAdHlwZSB7U3RyaW5nfE51bWJlcn0KICAgICAgICAgKiBAZGVmYXVsdCBhY3RpdmVSYWRpdXMgPSAnNTUlJwogICAgICAgICAqIEBleGFtcGxlIGFjdGl2ZVJhZGl1cyA9ICc1NSUnIHwgMTEwCiAgICAgICAgICovCiAgICAgICAgYWN0aXZlUmFkaXVzOiAnNTUlJywKICAgICAgICAvKioKICAgICAgICAgKiBAZGVzY3JpcHRpb24gUmluZyBkYXRhCiAgICAgICAgICogQHR5cGUge0FycmF5PE9iamVjdD59CiAgICAgICAgICogQGRlZmF1bHQgZGF0YSA9IFt7IG5hbWU6ICcnLCB2YWx1ZTogMCB9XQogICAgICAgICAqLwogICAgICAgIGRhdGE6IFt7IG5hbWU6ICcnLCB2YWx1ZTogMCB9XSwKICAgICAgICAvKioKICAgICAgICAgKiBAZGVzY3JpcHRpb24gUmluZyBsaW5lIHdpZHRoCiAgICAgICAgICogQHR5cGUge051bWJlcn0KICAgICAgICAgKiBAZGVmYXVsdCBsaW5lV2lkdGggPSAyMAogICAgICAgICAqLwogICAgICAgIGxpbmVXaWR0aDogMjAsCiAgICAgICAgLyoqCiAgICAgICAgICogQGRlc2NyaXB0aW9uIEFjdGl2ZSB0aW1lIGdhcCAobXMpCiAgICAgICAgICogQHR5cGUge051bWJlcn0KICAgICAgICAgKiBAZGVmYXVsdCBhY3RpdmVUaW1lR2FwID0gMzAwMAogICAgICAgICAqLwogICAgICAgIGFjdGl2ZVRpbWVHYXA6IDMwMDAsCiAgICAgICAgLyoqCiAgICAgICAgICogQGRlc2NyaXB0aW9uIFJpbmcgY29sb3IgKGhleHxyZ2J8cmdiYXxjb2xvciBrZXl3b3JkcykKICAgICAgICAgKiBAdHlwZSB7QXJyYXk8U3RyaW5nPn0KICAgICAgICAgKiBAZGVmYXVsdCBjb2xvciA9IFtDaGFydHMgRGVmYXVsdCBDb2xvcl0KICAgICAgICAgKiBAZXhhbXBsZSBjb2xvciA9IFsnIzAwMCcsICdyZ2IoMCwgMCwgMCknLCAncmdiYSgwLCAwLCAwLCAxKScsICdyZWQnXQogICAgICAgICAqLwogICAgICAgIGNvbG9yOiBbXSwKICAgICAgICAvKioKICAgICAgICAgKiBAZGVzY3JpcHRpb24gRGlnaXRhbCBmbG9wIHN0eWxlCiAgICAgICAgICogQHR5cGUge09iamVjdH0KICAgICAgICAgKi8KICAgICAgICBkaWdpdGFsRmxvcFN0eWxlOiB7CiAgICAgICAgICBmb250U2l6ZTogMjUsCiAgICAgICAgICBmaWxsOiAnI2ZmZicKICAgICAgICB9LAogICAgICAgIC8qKgogICAgICAgICAqIEBkZXNjcmlwdGlvbiBEaWdpdGFsIGZsb3AgdG9GaXhlZAogICAgICAgICAqIEB0eXBlIHtOdW1iZXJ9CiAgICAgICAgICovCiAgICAgICAgZGlnaXRhbEZsb3BUb0ZpeGVkOiAwLAogICAgICAgIC8qKgogICAgICAgICAqIEBkZXNjcmlwdGlvbiBDUmVuZGVyIGFuaW1hdGlvbkN1cnZlCiAgICAgICAgICogQHR5cGUge1N0cmluZ30KICAgICAgICAgKiBAZGVmYXVsdCBhbmltYXRpb25DdXJ2ZSA9ICdlYXNlT3V0Q3ViaWMnCiAgICAgICAgICovCiAgICAgICAgYW5pbWF0aW9uQ3VydmU6ICdlYXNlT3V0Q3ViaWMnLAogICAgICAgIC8qKgogICAgICAgICAqIEBkZXNjcmlwdGlvbiBDUmVuZGVyIGFuaW1hdGlvbkZyYW1lCiAgICAgICAgICogQHR5cGUge1N0cmluZ30KICAgICAgICAgKiBAZGVmYXVsdCBhbmltYXRpb25GcmFtZSA9IDUwCiAgICAgICAgICovCiAgICAgICAgYW5pbWF0aW9uRnJhbWU6IDUwCiAgICAgIH0sCgogICAgICBtZXJnZWRDb25maWc6IG51bGwsCgogICAgICBjaGFydDogbnVsbCwKCiAgICAgIGFjdGl2ZUluZGV4OiAwLAoKICAgICAgYW5pbWF0aW9uSGFuZGxlcjogJycKICAgIH0KICB9LAogIGNvbXB1dGVkOiB7CiAgICBkaWdpdGFsRmxvcCAoKSB7CiAgICAgIGNvbnN0IHsgbWVyZ2VkQ29uZmlnLCBhY3RpdmVJbmRleCB9ID0gdGhpcwoKICAgICAgaWYgKCFtZXJnZWRDb25maWcpIHJldHVybiB7fQoKICAgICAgY29uc3QgeyBkaWdpdGFsRmxvcFN0eWxlLCBkaWdpdGFsRmxvcFRvRml4ZWQsIGRhdGEgfSA9IG1lcmdlZENvbmZpZwoKICAgICAgY29uc3QgdmFsdWUgPSBkYXRhLm1hcCgoeyB2YWx1ZSB9KSA9PiB2YWx1ZSkKCiAgICAgIGNvbnN0IHN1bSA9IHZhbHVlLnJlZHVjZSgoYWxsLCB2KSA9PiBhbGwgKyB2LCAwKQoKICAgICAgY29uc3QgcGVyY2VudCA9IHBhcnNlRmxvYXQodmFsdWVbYWN0aXZlSW5kZXhdIC8gc3VtICogMTAwKSB8fCAwCgogICAgICByZXR1cm4gewogICAgICAgIGNvbnRlbnQ6ICd7bnR9JScsCiAgICAgICAgbnVtYmVyOiBbcGVyY2VudF0sCiAgICAgICAgc3R5bGU6IGRpZ2l0YWxGbG9wU3R5bGUsCiAgICAgICAgdG9GaXhlZDogZGlnaXRhbEZsb3BUb0ZpeGVkCiAgICAgIH0KICAgIH0sCiAgICByaW5nTmFtZSAoKSB7CiAgICAgIGNvbnN0IHsgbWVyZ2VkQ29uZmlnLCBhY3RpdmVJbmRleCB9ID0gdGhpcwoKICAgICAgaWYgKCFtZXJnZWRDb25maWcpIHJldHVybiAnJwoKICAgICAgcmV0dXJuIG1lcmdlZENvbmZpZy5kYXRhW2FjdGl2ZUluZGV4XS5uYW1lCiAgICB9LAogICAgZm9udFNpemUgKCkgewogICAgICBjb25zdCB7IG1lcmdlZENvbmZpZyB9ID0gdGhpcwoKICAgICAgaWYgKCFtZXJnZWRDb25maWcpIHJldHVybiAnJwoKICAgICAgcmV0dXJuIGBmb250LXNpemU6ICR7bWVyZ2VkQ29uZmlnLmRpZ2l0YWxGbG9wU3R5bGUuZm9udFNpemV9cHg7YAogICAgfQogIH0sCiAgd2F0Y2g6IHsKICAgIGNvbmZpZyAoKSB7CiAgICAgIGNvbnN0IHsgYW5pbWF0aW9uSGFuZGxlciwgbWVyZ2VDb25maWcsIHNldFJpbmdPcHRpb24gfSA9IHRoaXMKCiAgICAgIGNsZWFyVGltZW91dChhbmltYXRpb25IYW5kbGVyKQoKICAgICAgdGhpcy5hY3RpdmVJbmRleCA9IDAKCiAgICAgIG1lcmdlQ29uZmlnKCkKCiAgICAgIHNldFJpbmdPcHRpb24oKQogICAgfQogIH0sCiAgbWV0aG9kczogewogICAgaW5pdCAoKSB7CiAgICAgIGNvbnN0IHsgaW5pdENoYXJ0LCBtZXJnZUNvbmZpZywgc2V0UmluZ09wdGlvbiB9ID0gdGhpcwoKICAgICAgaW5pdENoYXJ0KCkKCiAgICAgIG1lcmdlQ29uZmlnKCkKCiAgICAgIHNldFJpbmdPcHRpb24oKQogICAgfSwKICAgIGluaXRDaGFydCAoKSB7CiAgICAgIGNvbnN0IHsgJHJlZnMgfSA9IHRoaXMKCiAgICAgIHRoaXMuY2hhcnQgPSBuZXcgQ2hhcnRzKCRyZWZzWydhY3RpdmUtcmluZy1jaGFydCddKQogICAgfSwKICAgIG1lcmdlQ29uZmlnICgpIHsKICAgICAgY29uc3QgeyBkZWZhdWx0Q29uZmlnLCBjb25maWcgfSA9IHRoaXMKCiAgICAgIHRoaXMubWVyZ2VkQ29uZmlnID0gZGVlcE1lcmdlKGRlZXBDbG9uZShkZWZhdWx0Q29uZmlnLCB0cnVlKSwgY29uZmlnIHx8IHt9KQogICAgfSwKICAgIHNldFJpbmdPcHRpb24gKCkgewogICAgICBjb25zdCB7IGdldFJpbmdPcHRpb24sIGNoYXJ0LCByaW5nQW5pbWF0aW9uIH0gPSB0aGlzCgogICAgICBjb25zdCBvcHRpb24gPSBnZXRSaW5nT3B0aW9uKCkKCiAgICAgIGNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpCgogICAgICByaW5nQW5pbWF0aW9uKCkKICAgIH0sCiAgICBnZXRSaW5nT3B0aW9uICgpIHsKICAgICAgY29uc3QgeyBtZXJnZWRDb25maWcsIGdldFJlYWxSYWRpdXMgfSA9IHRoaXMKCiAgICAgIGNvbnN0IHJhZGl1cyA9IGdldFJlYWxSYWRpdXMoKQoKICAgICAgbWVyZ2VkQ29uZmlnLmRhdGEuZm9yRWFjaChkYXRhSXRlbSA9PiB7CiAgICAgICAgZGF0YUl0ZW0ucmFkaXVzID0gcmFkaXVzCiAgICAgIH0pCgogICAgICByZXR1cm4gewogICAgICAgIHNlcmllczogWwogICAgICAgICAgewogICAgICAgICAgICB0eXBlOiAncGllJywKICAgICAgICAgICAgLi4ubWVyZ2VkQ29uZmlnLAogICAgICAgICAgICBvdXRzaWRlTGFiZWw6IHsKICAgICAgICAgICAgICBzaG93OiBmYWxzZQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgXSwKICAgICAgICBjb2xvcjogbWVyZ2VkQ29uZmlnLmNvbG9yCiAgICAgIH0KICAgIH0sCiAgICBnZXRSZWFsUmFkaXVzIChhY3RpdmUgPSBmYWxzZSkgewogICAgICBjb25zdCB7IG1lcmdlZENvbmZpZywgY2hhcnQgfSA9IHRoaXMKCiAgICAgIGNvbnN0IHsgcmFkaXVzLCBhY3RpdmVSYWRpdXMsIGxpbmVXaWR0aCB9ID0gbWVyZ2VkQ29uZmlnCgogICAgICBjb25zdCBtYXhSYWRpdXMgPSBNYXRoLm1pbiguLi5jaGFydC5yZW5kZXIuYXJlYSkgLyAyCgogICAgICBjb25zdCBoYWxmTGluZVdpZHRoID0gbGluZVdpZHRoIC8gMgoKICAgICAgbGV0IHJlYWxSYWRpdXMgPSBhY3RpdmUgPyBhY3RpdmVSYWRpdXMgOiByYWRpdXMKCiAgICAgIGlmICh0eXBlb2YgcmVhbFJhZGl1cyAhPT0gJ251bWJlcicpIHJlYWxSYWRpdXMgPSBwYXJzZUludChyZWFsUmFkaXVzKSAvIDEwMCAqIG1heFJhZGl1cwoKICAgICAgY29uc3QgaW5zaWRlUmFkaXVzID0gcmVhbFJhZGl1cyAtIGhhbGZMaW5lV2lkdGgKICAgICAgY29uc3Qgb3V0U2lkZVJhZGl1cyA9IHJlYWxSYWRpdXMgKyBoYWxmTGluZVdpZHRoCgogICAgICByZXR1cm4gW2luc2lkZVJhZGl1cywgb3V0U2lkZVJhZGl1c10KICAgIH0sCiAgICByaW5nQW5pbWF0aW9uICgpIHsKICAgICAgbGV0IHsgYWN0aXZlSW5kZXgsIGdldFJpbmdPcHRpb24sIGNoYXJ0LCBnZXRSZWFsUmFkaXVzIH0gPSB0aGlzCgogICAgICBjb25zdCByYWRpdXMgPSBnZXRSZWFsUmFkaXVzKCkKICAgICAgY29uc3QgYWN0aXZlID0gZ2V0UmVhbFJhZGl1cyh0cnVlKQoKICAgICAgY29uc3Qgb3B0aW9uID0gZ2V0UmluZ09wdGlvbigpCgogICAgICBjb25zdCB7IGRhdGEgfSA9IG9wdGlvbi5zZXJpZXNbMF0KCiAgICAgIGRhdGEuZm9yRWFjaCgoZGF0YUl0ZW0sIGkpID0+IHsKICAgICAgICBpZiAoaSA9PT0gYWN0aXZlSW5kZXgpIHsKICAgICAgICAgIGRhdGFJdGVtLnJhZGl1cyA9IGFjdGl2ZQogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICBkYXRhSXRlbS5yYWRpdXMgPSByYWRpdXMKICAgICAgICB9CiAgICAgIH0pCgogICAgICBjaGFydC5zZXRPcHRpb24ob3B0aW9uLCB0cnVlKQoKICAgICAgY29uc3QgeyBhY3RpdmVUaW1lR2FwIH0gPSBvcHRpb24uc2VyaWVzWzBdCgogICAgICB0aGlzLmFuaW1hdGlvbkhhbmRsZXIgPSBzZXRUaW1lb3V0KGZvbyA9PiB7CiAgICAgICAgYWN0aXZlSW5kZXggKz0gMQoKICAgICAgICBpZiAoYWN0aXZlSW5kZXggPj0gZGF0YS5sZW5ndGgpIGFjdGl2ZUluZGV4ID0gMAoKICAgICAgICB0aGlzLmFjdGl2ZUluZGV4ID0gYWN0aXZlSW5kZXgKCiAgICAgICAgdGhpcy5yaW5nQW5pbWF0aW9uKCkKICAgICAgfSwgYWN0aXZlVGltZUdhcCkKICAgIH0KICB9LAogIG1vdW50ZWQgKCkgewogICAgY29uc3QgeyBpbml0IH0gPSB0aGlzCgogICAgaW5pdCgpCiAgfSwKICBiZWZvcmVEZXN0cm95ICgpIHsKICAgIGNvbnN0IHsgYW5pbWF0aW9uSGFuZGxlciB9ID0gdGhpcwoKICAgIGNsZWFyVGltZW91dChhbmltYXRpb25IYW5kbGVyKQogIH0KfQo="},{"version":3,"sources":["main.vue"],"names":[],"mappings":";;;;;;;;;;;AAWA;;AAEA;;AAEA;;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;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;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"main.vue","sourceRoot":"node_modules/@jiaminghi/data-view/lib/components/activeRingChart/src","sourcesContent":["<template>\n <div class=\"dv-active-ring-chart\">\n <div class=\"active-ring-chart-container\" ref=\"active-ring-chart\" />\n <div class=\"active-ring-info\">\n <dv-digital-flop :config=\"digitalFlop\" />\n <div class=\"active-ring-name\" :style=\"fontSize\">{{ ringName }}</div>\n </div>\n </div>\n</template>\n\n<script>\nimport Charts from '@jiaminghi/charts'\n\nimport dvDigitalFlop from '../../digitalFlop/src/main.vue'\n\nimport { deepMerge } from '@jiaminghi/charts/lib/util/index'\n\nimport { deepClone } from '@jiaminghi/c-render/lib/plugin/util'\n\nexport default {\n name: 'DvActiveRingChart',\n components: {\n dvDigitalFlop\n },\n props: {\n config: {\n type: Object,\n default: () => ({})\n }\n },\n data () {\n return {\n defaultConfig: {\n /**\n * @description Ring radius\n * @type {String|Number}\n * @default radius = '50%'\n * @example radius = '50%' | 100\n */\n radius: '50%',\n /**\n * @description Active ring radius\n * @type {String|Number}\n * @default activeRadius = '55%'\n * @example activeRadius = '55%' | 110\n */\n activeRadius: '55%',\n /**\n * @description Ring data\n * @type {Array<Object>}\n * @default data = [{ name: '', value: 0 }]\n */\n data: [{ name: '', value: 0 }],\n /**\n * @description Ring line width\n * @type {Number}\n * @default lineWidth = 20\n */\n lineWidth: 20,\n /**\n * @description Active time gap (ms)\n * @type {Number}\n * @default activeTimeGap = 3000\n */\n activeTimeGap: 3000,\n /**\n * @description Ring color (hex|rgb|rgba|color keywords)\n * @type {Array<String>}\n * @default color = [Charts Default Color]\n * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']\n */\n color: [],\n /**\n * @description Digital flop style\n * @type {Object}\n */\n digitalFlopStyle: {\n fontSize: 25,\n fill: '#fff'\n },\n /**\n * @description Digital flop toFixed\n * @type {Number}\n */\n digitalFlopToFixed: 0,\n /**\n * @description CRender animationCurve\n * @type {String}\n * @default animationCurve = 'easeOutCubic'\n */\n animationCurve: 'easeOutCubic',\n /**\n * @description CRender animationFrame\n * @type {String}\n * @default animationFrame = 50\n */\n animationFrame: 50\n },\n\n mergedConfig: null,\n\n chart: null,\n\n activeIndex: 0,\n\n animationHandler: ''\n }\n },\n computed: {\n digitalFlop () {\n const { mergedConfig, activeIndex } = this\n\n if (!mergedConfig) return {}\n\n const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig\n\n const value = data.map(({ value }) => value)\n\n const sum = value.reduce((all, v) => all + v, 0)\n\n const percent = parseFloat(value[activeIndex] / sum * 100) || 0\n\n return {\n content: '{nt}%',\n number: [percent],\n style: digitalFlopStyle,\n toFixed: digitalFlopToFixed\n }\n },\n ringName () {\n const { mergedConfig, activeIndex } = this\n\n if (!mergedConfig) return ''\n\n return mergedConfig.data[activeIndex].name\n },\n fontSize () {\n const { mergedConfig } = this\n\n if (!mergedConfig) return ''\n\n return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`\n }\n },\n watch: {\n config () {\n const { animationHandler, mergeConfig, setRingOption } = this\n\n clearTimeout(animationHandler)\n\n this.activeIndex = 0\n\n mergeConfig()\n\n setRingOption()\n }\n },\n methods: {\n init () {\n const { initChart, mergeConfig, setRingOption } = this\n\n initChart()\n\n mergeConfig()\n\n setRingOption()\n },\n initChart () {\n const { $refs } = this\n\n this.chart = new Charts($refs['active-ring-chart'])\n },\n mergeConfig () {\n const { defaultConfig, config } = this\n\n this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})\n },\n setRingOption () {\n const { getRingOption, chart, ringAnimation } = this\n\n const option = getRingOption()\n\n chart.setOption(option, true)\n\n ringAnimation()\n },\n getRingOption () {\n const { mergedConfig, getRealRadius } = this\n\n const radius = getRealRadius()\n\n mergedConfig.data.forEach(dataItem => {\n dataItem.radius = radius\n })\n\n return {\n series: [\n {\n type: 'pie',\n ...mergedConfig,\n outsideLabel: {\n show: false\n }\n }\n ],\n color: mergedConfig.color\n }\n },\n getRealRadius (active = false) {\n const { mergedConfig, chart } = this\n\n const { radius, activeRadius, lineWidth } = mergedConfig\n\n const maxRadius = Math.min(...chart.render.area) / 2\n\n const halfLineWidth = lineWidth / 2\n\n let realRadius = active ? activeRadius : radius\n\n if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius\n\n const insideRadius = realRadius - halfLineWidth\n const outSideRadius = realRadius + halfLineWidth\n\n return [insideRadius, outSideRadius]\n },\n ringAnimation () {\n let { activeIndex, getRingOption, chart, getRealRadius } = this\n\n const radius = getRealRadius()\n const active = getRealRadius(true)\n\n const option = getRingOption()\n\n const { data } = option.series[0]\n\n data.forEach((dataItem, i) => {\n if (i === activeIndex) {\n dataItem.radius = active\n } else {\n dataItem.radius = radius\n }\n })\n\n chart.setOption(option, true)\n\n const { activeTimeGap } = option.series[0]\n\n this.animationHandler = setTimeout(foo => {\n activeIndex += 1\n\n if (activeIndex >= data.length) activeIndex = 0\n\n this.activeIndex = activeIndex\n\n this.ringAnimation()\n }, activeTimeGap)\n }\n },\n mounted () {\n const { init } = this\n\n init()\n },\n beforeDestroy () {\n const { animationHandler } = this\n\n clearTimeout(animationHandler)\n }\n}\n</script>"]}]} |