{"remainingRequest":"D:\\Hjm项目\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\waterLevelPond\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\Hjm项目\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\waterLevelPond\\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:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCB7IGRlZXBNZXJnZSB9IGZyb20gJ0BqaWFtaW5naGkvY2hhcnRzL2xpYi91dGlsL2luZGV4JwoKaW1wb3J0IHsgZGVlcENsb25lIH0gZnJvbSAnQGppYW1pbmdoaS9jLXJlbmRlci9saWIvcGx1Z2luL3V0aWwnCgppbXBvcnQgQ1JlbmRlciBmcm9tICdAamlhbWluZ2hpL2MtcmVuZGVyJwoKZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICdEdldhdGVyTGV2ZWxQb25kJywKICBwcm9wczogewogICAgY29uZmlnOiBPYmplY3QsCiAgICBkZWZhdWx0OiAoKSA9PiAoe30pCiAgfSwKICBkYXRhICgpIHsKICAgIGNvbnN0IHRpbWVzdGFtcCA9IERhdGUubm93KCkKICAgIHJldHVybiB7CiAgICAgIGdyYWRpZW50SWQ6IGB3YXRlci1sZXZlbC1wb25kLSR7dGltZXN0YW1wfWAsCgogICAgICBkZWZhdWx0Q29uZmlnOiB7CiAgICAgICAgLyoqCiAgICAgICAgICogQGRlc2NyaXB0aW9uIERhdGEKICAgICAgICAgKiBAdHlwZSB7QXJyYXk8TnVtYmVyPn0KICAgICAgICAgKiBAZGVmYXVsdCBkYXRhID0gW10KICAgICAgICAgKiBAZXhhbXBsZSBkYXRhID0gWzYwLCA0MF0KICAgICAgICAgKi8KICAgICAgICBkYXRhOiBbXSwKICAgICAgICAvKioKICAgICAgICAgKiBAZGVzY3JpcHRpb24gU2hhcGUgb2Ygd2FudGVyIGxldmVsIHBvbmQKICAgICAgICAgKiBAdHlwZSB7U3RyaW5nfQogICAgICAgICAqIEBkZWZhdWx0IHNoYXBlID0gJ3JlY3QnCiAgICAgICAgICogQGV4YW1wbGUgc2hhcGUgPSAncmVjdCcgfCAncm91bmRSZWN0JyB8ICdyb3VuZCcKICAgICAgICAgKi8KICAgICAgICBzaGFwZTogJ3JlY3QnLAogICAgICAgIC8qKgogICAgICAgICAqIEBkZXNjcmlwdGlvbiBXYXRlciB3YXZlIG51bWJlcgogICAgICAgICAqIEB0eXBlIHtOdW1iZXJ9CiAgICAgICAgICogQGRlZmF1bHQgd2F2ZU51bSA9IDMKICAgICAgICAgKi8KICAgICAgICB3YXZlTnVtOiAzLAogICAgICAgIC8qKgogICAgICAgICAqIEBkZXNjcmlwdGlvbiBXYXRlciB3YXZlIGhlaWdodCAocHgpCiAgICAgICAgICogQHR5cGUge051bWJlcn0KICAgICAgICAgKiBAZGVmYXVsdCB3YXZlSGVpZ2h0ID0gNDAKICAgICAgICAgKi8KICAgICAgICB3YXZlSGVpZ2h0OiA0MCwKICAgICAgICAvKioKICAgICAgICAgKiBAZGVzY3JpcHRpb24gV2F2ZSBvcGFjaXR5CiAgICAgICAgICogQHR5cGUge051bWJlcn0KICAgICAgICAgKiBAZGVmYXVsdCB3YXZlT3BhY2l0eSA9IDAuNAogICAgICAgICAqLwogICAgICAgIHdhdmVPcGFjaXR5OiAwLjQsCiAgICAgICAgLyoqCiAgICAgICAgICogQGRlc2NyaXB0aW9uIENvbG9ycyAoaGV4fHJnYnxyZ2JhfGNvbG9yIGtleXdvcmRzKQogICAgICAgICAqIEB0eXBlIHtBcnJheTxTdHJpbmc+fQogICAgICAgICAqIEBkZWZhdWx0IGNvbG9ycyA9IFsnIzAwQkFGRicsICcjM0RFN0M5J10KICAgICAgICAgKiBAZXhhbXBsZSBjb2xvcnMgPSBbJyMwMDAnLCAncmdiKDAsIDAsIDApJywgJ3JnYmEoMCwgMCwgMCwgMSknLCAncmVkJ10KICAgICAgICAgKi8KICAgICAgICBjb2xvcnM6IFsnIzNERTdDOScsICcjMDBCQUZGJ10sCiAgICAgICAgLyoqCiAgICAgICAgICogQGRlc2NyaXB0aW9uIEZvcm1hdHRlcgogICAgICAgICAqIEB0eXBlIHtTdHJpbmd9CiAgICAgICAgICogQGRlZmF1bHQgZm9ybWF0dGVyID0gJ3t2YWx1ZX0lJwogICAgICAgICAqLwogICAgICAgIGZvcm1hdHRlcjogJ3t2YWx1ZX0lJwogICAgICB9LAoKICAgICAgbWVyZ2VkQ29uZmlnOiB7fSwKCiAgICAgIHJlbmRlcmVyOiBudWxsLAoKICAgICAgc3ZnQm9yZGVyR3JhZGllbnQ6IFtdLAoKICAgICAgZGV0YWlsczogJycsCgogICAgICB3YXZlczogW10sCgogICAgICBhbmltYXRpb246IGZhbHNlCiAgICB9CiAgfSwKICBjb21wdXRlZDogewogICAgcmFkaXVzICgpIHsKICAgICAgY29uc3QgeyBzaGFwZSB9ID0gdGhpcy5tZXJnZWRDb25maWcKCiAgICAgIGlmIChzaGFwZSA9PT0gJ3JvdW5kJykgcmV0dXJuICc1MCUnCgogICAgICBpZiAoc2hhcGUgPT09ICdyZWN0JykgcmV0dXJuICcwJwoKICAgICAgaWYgKHNoYXBlID09PSAncm91bmRSZWN0JykgcmV0dXJuICcxMHB4JwoKICAgICAgcmV0dXJuICcwJwogICAgfSwKICAgIHNoYXBlICgpIHsKICAgICAgY29uc3QgeyBzaGFwZSB9ID0gdGhpcy5tZXJnZWRDb25maWcKCiAgICAgIGlmICghc2hhcGUpIHJldHVybiAncmVjdCcKCiAgICAgIHJldHVybiBzaGFwZQogICAgfQogIH0sCiAgd2F0Y2g6IHsKICAgIGNvbmZpZyAoKSB7CiAgICAgIGNvbnN0IHsgY2FsY0RhdGEsIHJlbmRlcmVyIH0gPSB0aGlzCgogICAgICByZW5kZXJlci5kZWxBbGxHcmFwaCgpCgogICAgICB0aGlzLndhdmVzID0gW10KCiAgICAgIHNldFRpbWVvdXQoY2FsY0RhdGEsIDApCiAgICB9CiAgfSwKICBtZXRob2RzOiB7CiAgICBpbml0ICgpIHsKICAgICAgY29uc3QgeyBpbml0UmVuZGVyLCBjb25maWcsIGNhbGNEYXRhIH0gPSB0aGlzCgogICAgICBpbml0UmVuZGVyKCkKCiAgICAgIGlmICghY29uZmlnKSByZXR1cm4KCiAgICAgIGNhbGNEYXRhKCkKICAgIH0sCiAgICBpbml0UmVuZGVyICgpIHsKICAgICAgY29uc3QgeyAkcmVmcyB9ID0gdGhpcwoKICAgICAgdGhpcy5yZW5kZXJlciA9IG5ldyBDUmVuZGVyKCRyZWZzWyd3YXRlci1wb25kLWxldmVsJ10pCiAgICB9LAogICAgY2FsY0RhdGEgKCkgewogICAgICBjb25zdCB7IG1lcmdlQ29uZmlnLCBjYWxjU3ZnQm9yZGVyR3JhZGllbnQsIGNhbGNEZXRhaWxzIH0gPSB0aGlzCgogICAgICBtZXJnZUNvbmZpZygpCgogICAgICBjYWxjU3ZnQm9yZGVyR3JhZGllbnQoKQoKICAgICAgY2FsY0RldGFpbHMoKQoKICAgICAgY29uc3QgeyBhZGRXYXZlLCBhbmltYXRpb25XYXZlIH0gPSB0aGlzCgogICAgICBhZGRXYXZlKCkKCiAgICAgIGFuaW1hdGlvbldhdmUoKQogICAgfSwKICAgIG1lcmdlQ29uZmlnICgpIHsKICAgICAgY29uc3QgeyBjb25maWcsIGRlZmF1bHRDb25maWcgfSA9IHRoaXMKCiAgICAgIHRoaXMubWVyZ2VkQ29uZmlnID0gZGVlcE1lcmdlKGRlZXBDbG9uZShkZWZhdWx0Q29uZmlnLCB0cnVlKSwgY29uZmlnKQogICAgfSwKICAgIGNhbGNTdmdCb3JkZXJHcmFkaWVudCAoKSB7CiAgICAgIGNvbnN0IHsgY29sb3JzIH0gPSB0aGlzLm1lcmdlZENvbmZpZwoKICAgICAgY29uc3QgY29sb3JOdW0gPSBjb2xvcnMubGVuZ3RoCgogICAgICBjb25zdCBjb2xvck9mZnNldEdhcCA9IDEwMCAvIChjb2xvck51bSAtIDEpCgogICAgICB0aGlzLnN2Z0JvcmRlckdyYWRpZW50ID0gY29sb3JzLm1hcCgoYywgaSkgPT4gW2NvbG9yT2Zmc2V0R2FwICogaSwgY10pCiAgICB9LAogICAgY2FsY0RldGFpbHMgKCkgewogICAgICBjb25zdCB7IGRhdGEsIGZvcm1hdHRlciB9ID0gdGhpcy5tZXJnZWRDb25maWcKCiAgICAgIGlmICghZGF0YS5sZW5ndGgpIHsKICAgICAgICB0aGlzLmRldGFpbHMgPSAnJwoKICAgICAgICByZXR1cm4KICAgICAgfQoKICAgICAgY29uc3QgbWF4VmFsdWUgPSBNYXRoLm1heCguLi5kYXRhKQoKICAgICAgdGhpcy5kZXRhaWxzID0gZm9ybWF0dGVyLnJlcGxhY2UoJ3t2YWx1ZX0nLCBtYXhWYWx1ZSkKICAgIH0sCiAgICBhZGRXYXZlICgpIHsKICAgICAgY29uc3QgeyByZW5kZXJlciwgZ2V0V2F2ZVNoYXBlcywgZ2V0V2F2ZVN0eWxlLCBkcmF3ZWQgfSA9IHRoaXMKCiAgICAgIGNvbnN0IHNoYXBlcyA9IGdldFdhdmVTaGFwZXMoKQogICAgICBjb25zdCBzdHlsZSA9IGdldFdhdmVTdHlsZSgpCgogICAgICB0aGlzLndhdmVzID0gc2hhcGVzLm1hcChzaGFwZSA9PiByZW5kZXJlci5hZGQoewogICAgICAgIG5hbWU6ICdzbW9vdGhsaW5lJywKICAgICAgICBhbmltYXRpb25GcmFtZTogMzAwLAogICAgICAgIHNoYXBlLAogICAgICAgIHN0eWxlLAogICAgICAgIGRyYXdlZAogICAgICB9KSkKICAgIH0sCiAgICBnZXRXYXZlU2hhcGVzICgpIHsKICAgICAgY29uc3QgeyBtZXJnZWRDb25maWcsIHJlbmRlcmVyLCBtZXJnZU9mZnNldCB9ID0gdGhpcwoKICAgICAgY29uc3QgeyB3YXZlTnVtLCB3YXZlSGVpZ2h0LCBkYXRhIH0gPSBtZXJnZWRDb25maWcKCiAgICAgIGNvbnN0IFt3LCBoXSA9IHJlbmRlcmVyLmFyZWEKCiAgICAgIGNvbnN0IHBvaW50c051bSA9IHdhdmVOdW0gKiA0ICsgNAoKICAgICAgY29uc3QgcG9pbnRYR2FwID0gdyAvIHdhdmVOdW0gLyAyCgogICAgICByZXR1cm4gZGF0YS5tYXAodiA9PiB7CiAgICAgICAgbGV0IHBvaW50cyA9IG5ldyBBcnJheShwb2ludHNOdW0pLmZpbGwoMCkubWFwKChmb28sIGopID0+IHsKICAgICAgICAgIGNvbnN0IHggPSB3IC0gcG9pbnRYR2FwICogagoKICAgICAgICAgIGNvbnN0IHN0YXJ0WSA9ICgxIC0gdiAvIDEwMCkgKiBoCgogICAgICAgICAgY29uc3QgeSA9IGogJSAyID09PSAwID8gc3RhcnRZIDogc3RhcnRZIC0gd2F2ZUhlaWdodAoKICAgICAgICAgIHJldHVybiBbeCwgeV0KICAgICAgICB9KQoKICAgICAgICBwb2ludHMgPSBwb2ludHMubWFwKHAgPT4gbWVyZ2VPZmZzZXQocCwgW3BvaW50WEdhcCAqIDIsIDBdKSkKCiAgICAgICAgcmV0dXJuIHsgcG9pbnRzIH0KICAgICAgfSkKICAgIH0sCiAgICBtZXJnZU9mZnNldCAoW3gsIHldLCBbb3gsIG95XSkgewogICAgICByZXR1cm4gW3ggKyBveCwgeSArIG95XQogICAgfSwKICAgIGdldFdhdmVTdHlsZSAoKSB7CiAgICAgIGNvbnN0IHsgcmVuZGVyZXIsIG1lcmdlZENvbmZpZyB9ID0gdGhpcwoKICAgICAgY29uc3QgaCA9IHJlbmRlcmVyLmFyZWFbMV0KCiAgICAgIHJldHVybiB7CiAgICAgICAgZ3JhZGllbnRDb2xvcjogbWVyZ2VkQ29uZmlnLmNvbG9ycywKICAgICAgICBncmFkaWVudFR5cGU6ICdsaW5lYXInLAogICAgICAgIGdyYWRpZW50UGFyYW1zOiBbMCwgMCwgMCwgaF0sCiAgICAgICAgZ3JhZGllbnRXaXRoOiAnZmlsbCcsCiAgICAgICAgb3BhY2l0eTogbWVyZ2VkQ29uZmlnLndhdmVPcGFjaXR5LAogICAgICAgIHRyYW5zbGF0ZTogWzAsIDBdCiAgICAgIH0KICAgIH0sCiAgICBkcmF3ZWQgKHsgc2hhcGU6IHsgcG9pbnRzIH0gfSwgeyBjdHgsIGFyZWEgfSkgewogICAgICBjb25zdCBmaXJzdFBvaW50ID0gcG9pbnRzWzBdCiAgICAgIGNvbnN0IGxhc3RQb2ludCA9IHBvaW50cy5zbGljZSgtMSlbMF0KCiAgICAgIGNvbnN0IGggPSBhcmVhWzFdCgogICAgICBjdHgubGluZVRvKGxhc3RQb2ludFswXSwgaCkKICAgICAgY3R4LmxpbmVUbyhmaXJzdFBvaW50WzBdLCBoKQoKICAgICAgY3R4LmNsb3NlUGF0aCgpCgogICAgICBjdHguZmlsbCgpCiAgICB9LAogICAgYXN5bmMgYW5pbWF0aW9uV2F2ZSAocmVwZWF0ID0gMSkgewogICAgICBjb25zdCB7IHdhdmVzLCByZW5kZXJlciwgYW5pbWF0aW9uIH0gPSB0aGlzCgogICAgICBpZiAoYW5pbWF0aW9uKSByZXR1cm4KCiAgICAgIHRoaXMuYW5pbWF0aW9uID0gdHJ1ZQoKICAgICAgY29uc3QgdyA9IHJlbmRlcmVyLmFyZWFbMF0KCiAgICAgIHdhdmVzLmZvckVhY2goZ3JhcGggPT4gewogICAgICAgIGdyYXBoLmF0dHIoJ3N0eWxlJywgeyB0cmFuc2xhdGU6IFswLCAwXSB9KQoKICAgICAgICBncmFwaC5hbmltYXRpb24oJ3N0eWxlJywgewogICAgICAgICAgdHJhbnNsYXRlOiBbdywgMF0KICAgICAgICB9LCB0cnVlKQogICAgICB9KQoKICAgICAgYXdhaXQgcmVuZGVyZXIubGF1bmNoQW5pbWF0aW9uKCkKCiAgICAgIHRoaXMuYW5pbWF0aW9uID0gZmFsc2UKCiAgICAgIGlmICghcmVuZGVyZXIuZ3JhcGhzLmxlbmd0aCkgcmV0dXJuCgogICAgICB0aGlzLmFuaW1hdGlvbldhdmUocmVwZWF0ICsgMSkKICAgIH0KICB9LAogIG1vdW50ZWQgKCkgewogICAgY29uc3QgeyBpbml0IH0gPSB0aGlzCgogICAgaW5pdCgpCiAgfSwKICBiZWZvcmVEZXN0cm95ICgpIHsKICAgIGNvbnN0IHsgcmVuZGVyZXIgfSA9IHRoaXMKCiAgICByZW5kZXJlci5kZWxBbGxHcmFwaCgpCgogICAgdGhpcy53YXZlcyA9IFtdCiAgfQp9Cg=="},{"version":3,"sources":["main.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;;AAEA;;AAEA;;AAEA;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;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA","file":"main.vue","sourceRoot":"node_modules/@jiaminghi/data-view/lib/components/waterLevelPond/src","sourcesContent":["<template>\n  <div class=\"dv-water-pond-level\">\n    <svg v-if=\"renderer\">\n      <defs>\n        <linearGradient :id=\"gradientId\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n          <stop v-for=\"lc in svgBorderGradient\" :key=\"lc[0]\"\n            :offset=\"lc[0]\"\n            :stop-color=\"lc[1]\" />\n        </linearGradient>\n      </defs>\n\n      <text\n        v-if=\"renderer\"\n        :stroke=\"`url(#${gradientId})`\"\n        :fill=\"`url(#${gradientId})`\"\n        :x=\"renderer.area[0] / 2 + 8\"\n        :y=\"renderer.area[1] / 2 + 8\"\n      >\n        {{ details }}\n      </text>\n\n      <ellipse v-if=\"!shape || shape === 'round'\"\n        :cx=\"renderer.area[0] / 2 + 8\"\n        :cy=\"renderer.area[1] / 2 + 8\"\n        :rx=\"renderer.area[0] / 2 + 5\"\n        :ry=\"renderer.area[1] / 2 + 5\"\n        :stroke=\"`url(#${gradientId})`\" />\n\n      <rect v-else\n        x=\"2\" y=\"2\"\n        :rx=\"shape === 'roundRect' ? 10 : 0\"\n        :ry=\"shape === 'roundRect' ? 10 : 0\"\n        :width=\"renderer.area[0] + 12\"\n        :height=\"renderer.area[1] + 12\"\n        :stroke=\"`url(#${gradientId})`\" />\n    </svg>\n\n    <canvas ref=\"water-pond-level\" :style=\"`border-radius: ${radius};`\" />\n  </div>\n</template>\n\n<script>\nimport { deepMerge } from '@jiaminghi/charts/lib/util/index'\n\nimport { deepClone } from '@jiaminghi/c-render/lib/plugin/util'\n\nimport CRender from '@jiaminghi/c-render'\n\nexport default {\n  name: 'DvWaterLevelPond',\n  props: {\n    config: Object,\n    default: () => ({})\n  },\n  data () {\n    const timestamp = Date.now()\n    return {\n      gradientId: `water-level-pond-${timestamp}`,\n\n      defaultConfig: {\n        /**\n         * @description Data\n         * @type {Array<Number>}\n         * @default data = []\n         * @example data = [60, 40]\n         */\n        data: [],\n        /**\n         * @description Shape of wanter level pond\n         * @type {String}\n         * @default shape = 'rect'\n         * @example shape = 'rect' | 'roundRect' | 'round'\n         */\n        shape: 'rect',\n        /**\n         * @description Water wave number\n         * @type {Number}\n         * @default waveNum = 3\n         */\n        waveNum: 3,\n        /**\n         * @description Water wave height (px)\n         * @type {Number}\n         * @default waveHeight = 40\n         */\n        waveHeight: 40,\n        /**\n         * @description Wave opacity\n         * @type {Number}\n         * @default waveOpacity = 0.4\n         */\n        waveOpacity: 0.4,\n        /**\n         * @description Colors (hex|rgb|rgba|color keywords)\n         * @type {Array<String>}\n         * @default colors = ['#00BAFF', '#3DE7C9']\n         * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']\n         */\n        colors: ['#3DE7C9', '#00BAFF'],\n        /**\n         * @description Formatter\n         * @type {String}\n         * @default formatter = '{value}%'\n         */\n        formatter: '{value}%'\n      },\n\n      mergedConfig: {},\n\n      renderer: null,\n\n      svgBorderGradient: [],\n\n      details: '',\n\n      waves: [],\n\n      animation: false\n    }\n  },\n  computed: {\n    radius () {\n      const { shape } = this.mergedConfig\n\n      if (shape === 'round') return '50%'\n\n      if (shape === 'rect') return '0'\n\n      if (shape === 'roundRect') return '10px'\n\n      return '0'\n    },\n    shape () {\n      const { shape } = this.mergedConfig\n\n      if (!shape) return 'rect'\n\n      return shape\n    }\n  },\n  watch: {\n    config () {\n      const { calcData, renderer } = this\n\n      renderer.delAllGraph()\n\n      this.waves = []\n\n      setTimeout(calcData, 0)\n    }\n  },\n  methods: {\n    init () {\n      const { initRender, config, calcData } = this\n\n      initRender()\n\n      if (!config) return\n\n      calcData()\n    },\n    initRender () {\n      const { $refs } = this\n\n      this.renderer = new CRender($refs['water-pond-level'])\n    },\n    calcData () {\n      const { mergeConfig, calcSvgBorderGradient, calcDetails } = this\n\n      mergeConfig()\n\n      calcSvgBorderGradient()\n\n      calcDetails()\n\n      const { addWave, animationWave } = this\n\n      addWave()\n\n      animationWave()\n    },\n    mergeConfig () {\n      const { config, defaultConfig } = this\n\n      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config)\n    },\n    calcSvgBorderGradient () {\n      const { colors } = this.mergedConfig\n\n      const colorNum = colors.length\n\n      const colorOffsetGap = 100 / (colorNum - 1)\n\n      this.svgBorderGradient = colors.map((c, i) => [colorOffsetGap * i, c])\n    },\n    calcDetails () {\n      const { data, formatter } = this.mergedConfig\n\n      if (!data.length) {\n        this.details = ''\n\n        return\n      }\n\n      const maxValue = Math.max(...data)\n\n      this.details = formatter.replace('{value}', maxValue)\n    },\n    addWave () {\n      const { renderer, getWaveShapes, getWaveStyle, drawed } = this\n\n      const shapes = getWaveShapes()\n      const style = getWaveStyle()\n\n      this.waves = shapes.map(shape => renderer.add({\n        name: 'smoothline',\n        animationFrame: 300,\n        shape,\n        style,\n        drawed\n      }))\n    },\n    getWaveShapes () {\n      const { mergedConfig, renderer, mergeOffset } = this\n\n      const { waveNum, waveHeight, data } = mergedConfig\n\n      const [w, h] = renderer.area\n\n      const pointsNum = waveNum * 4 + 4\n\n      const pointXGap = w / waveNum / 2\n\n      return data.map(v => {\n        let points = new Array(pointsNum).fill(0).map((foo, j) => {\n          const x = w - pointXGap * j\n\n          const startY = (1 - v / 100) * h\n\n          const y = j % 2 === 0 ? startY : startY - waveHeight\n\n          return [x, y]\n        })\n\n        points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]))\n\n        return { points }\n      })\n    },\n    mergeOffset ([x, y], [ox, oy]) {\n      return [x + ox, y + oy]\n    },\n    getWaveStyle () {\n      const { renderer, mergedConfig } = this\n\n      const h = renderer.area[1]\n\n      return {\n        gradientColor: mergedConfig.colors,\n        gradientType: 'linear',\n        gradientParams: [0, 0, 0, h],\n        gradientWith: 'fill',\n        opacity: mergedConfig.waveOpacity,\n        translate: [0, 0]\n      }\n    },\n    drawed ({ shape: { points } }, { ctx, area }) {\n      const firstPoint = points[0]\n      const lastPoint = points.slice(-1)[0]\n\n      const h = area[1]\n\n      ctx.lineTo(lastPoint[0], h)\n      ctx.lineTo(firstPoint[0], h)\n\n      ctx.closePath()\n\n      ctx.fill()\n    },\n    async animationWave (repeat = 1) {\n      const { waves, renderer, animation } = this\n\n      if (animation) return\n\n      this.animation = true\n\n      const w = renderer.area[0]\n\n      waves.forEach(graph => {\n        graph.attr('style', { translate: [0, 0] })\n\n        graph.animation('style', {\n          translate: [w, 0]\n        }, true)\n      })\n\n      await renderer.launchAnimation()\n\n      this.animation = false\n\n      if (!renderer.graphs.length) return\n\n      this.animationWave(repeat + 1)\n    }\n  },\n  mounted () {\n    const { init } = this\n\n    init()\n  },\n  beforeDestroy () {\n    const { renderer } = this\n\n    renderer.delAllGraph()\n\n    this.waves = []\n  }\n}\n</script>"]}]}