{"version":3,"sources":["webpack:///./src/views/statistics/components/ec-bar.vue","webpack:///src/views/statistics/components/ec-bar.vue","webpack:///./src/views/statistics/components/ec-bar.vue?cef2","webpack:///./src/views/statistics/components/ec-bar.vue?51bf","webpack:///./src/views/statistics/components/ec-bar.vue?a331"],"names":["render","_vm","this","_c","_self","ref","staticClass","staticRenderFns","name","props","type","required","default","names","data","unit","watch","newValue","oldValue","myNames","echartImpl","beforeDestroy","mounted","window","console","methods","myEchartsFontSize","value","n","initCubeBar","shape","x","y","buildPath","ctx","closePath","echart","title","show","text","textStyle","color","fontWeight","fontSize","left","top","legend","right","xAxis","axisLabel","rotate","yAxis","splitNumber","splitLine","lineStyle","series","renderItem","children","api","xAxisPoint","style","fill","label","normal","position","fontFamily","offset","itemStyle","tooltip","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,IAAI,MAAMC,YAAY,mBAE/FC,EAAkB,G,YCKtB,GACAC,cACAC,OACAC,MACAC,YACAD,YACAE,gBAEAC,OACAF,YACAD,YAEAI,MACAH,YACAD,YAEAK,MACAL,YACAE,iBAGAI,OACAF,KADA,SACAG,EAAAC,GACA,mBACA,qBAIAJ,KA5BA,WA6BA,OACAK,mBACAC,kBAGAC,cAlCA,WAmCA,sBAEAC,QArCA,WAqCA,WACA,uCACA,mBACA,mBAGAC,2BACAC,oBACA,wBAIAC,SACAC,kBADA,SACAC,EAAAC,GACA,gCACA,eACA,UAEAC,YANA,WAOA,gFAEA,sBACAC,OACAC,IACAC,KAEAC,wBAEA,mBACA,YACA,gBACA,kBACA,cACAC,0EACAC,eAIA,sBACAL,OACAC,IACAC,KAEAC,wBACA,mBACA,YACA,cACA,mBACA,iBACAC,0EACAC,eAIA,sBACAL,OACAC,IACAC,KAEAC,wBACA,gBACA,iBACA,iBACA,gBACAC,0EACAC,eAIAC,mCACAA,oCACAA,kCAEA,gBAIA,GAFA,kEAEA,GAGA,GACAC,OACAC,QACAC,eACAC,WACAC,aACAC,iBACAC,iBAEAC,OACAC,UAEAC,QACApC,aACA4B,QACAS,WACAF,MACAL,WACAG,wCAGAK,OACAtC,gBACAI,gBACAmC,WACAR,aACAS,UACAP,wCAGAQ,OACAzC,aACAuC,WACAR,aACAE,uCAEAS,cACAC,WACAf,QACAgB,WACA5C,cACA+B,gBAIAc,QA6CA,CACA7C,cACA8C,yBACA,uCACA,OACA9C,aACA+C,WACA/C,gBACAoB,OACA4B,MACA3B,OACAC,OACA2B,oCAEAC,OACAC,YAEA,CACAnD,iBACAoB,OACA4B,MACA3B,OACAC,OACA2B,oCAEAC,OACAC,YAEA,CACAnD,eACAoB,OACA4B,MACA3B,OACAC,OACA2B,oCAEAC,OACAC,eAKA/C,QACA,CACAJ,WACAoD,OACAC,QACAzB,QACA0B,eACAC,2BACAtB,sCACAF,WACAC,kBACAwB,gBAGAC,WACA1B,qBAEA2B,WACAtD,UAKA,gCCvR8W,I,yBCQ1WuD,EAAY,eACd,EACArE,EACAO,GACA,EACA,KACA,WACA,MAIa,aAAA8D,E,8CCnBf,W","file":"js/chunk-00d6aaa0.a5effc6a.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:\"bar\",staticClass:\"app-container\"})\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"app-container\" ref=\"bar\"></div>\r\n</template>\r\n\r\n<script>\r\n  import * as echart from 'echarts'\r\n\r\n  export default {\r\n    name: \"ec-bar\",\r\n    props: {\r\n      type: {\r\n        required: true,\r\n        type: String,\r\n        default: 'cube'\r\n      },\r\n      names: {\r\n        required: true,\r\n        type: Array\r\n      },\r\n      data: {\r\n        required: true,\r\n        type: Array\r\n      },\r\n      unit: {\r\n        type: String,\r\n        default: '(个数)'\r\n      }\r\n    },\r\n    watch: {\r\n      data(newValue, oldValue) {\r\n        if (this.type == 'cube') {\r\n          this.initCubeBar()\r\n        }\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        myNames: this.names,\r\n        echartImpl: null\r\n      }\r\n    },\r\n    beforeDestroy() {\r\n      this.echartImpl = null\r\n    },\r\n    mounted() {\r\n      this.echartImpl = echart.init(this.$refs.bar)\r\n      if (this.type == 'cube') {\r\n        this.initCubeBar()\r\n      }\r\n\r\n      window.onresize = () => {\r\n        console.log('test')\r\n        this.echartImpl.resize()\r\n      }\r\n    },\r\n\r\n  methods: {\r\n    myEchartsFontSize(value, n) {\r\n      let screenWidth = document.body.clientWidth;\r\n      const result = value * (screenWidth / 1920) * n;\r\n      return result;\r\n    },\r\n      initCubeBar() {\r\n        var colorData = ['rgba(241, 123, 28, 1)', 'rgba(255, 167, 91, 1)', 'rgba(255, 167, 91, 1)']\r\n        // 绘制左侧面\r\n        const CubeLeft = echart.graphic.extendShape({\r\n          shape: {\r\n            x: 0,\r\n            y: 0\r\n          },\r\n          buildPath: function (ctx, shape) {\r\n            // 会canvas的应该都能看得懂，shape是从custom传入的\r\n            const xAxisPoint = shape.xAxisPoint\r\n            const c0 = [shape.x, shape.y]\r\n            const c1 = [shape.x - 8, shape.y - 8]\r\n            const c2 = [xAxisPoint[0] - 8, xAxisPoint[1] - 8]\r\n            const c3 = [xAxisPoint[0], xAxisPoint[1]]\r\n            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1])\r\n              .closePath()\r\n          }\r\n        })\r\n        // 绘制右侧面\r\n        const CubeRight = echart.graphic.extendShape({\r\n          shape: {\r\n            x: 0,\r\n            y: 0\r\n          },\r\n          buildPath: function (ctx, shape) {\r\n            const xAxisPoint = shape.xAxisPoint\r\n            const c1 = [shape.x, shape.y]\r\n            const c2 = [xAxisPoint[0], xAxisPoint[1]]\r\n            const c3 = [xAxisPoint[0] + 10, xAxisPoint[1] - 3]\r\n            const c4 = [shape.x + 10, shape.y - 3]\r\n            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])\r\n              .closePath()\r\n          }\r\n        })\r\n        // 绘制顶面\r\n        const CubeTop = echart.graphic.extendShape({\r\n          shape: {\r\n            x: 0,\r\n            y: 0\r\n          },\r\n          buildPath: function (ctx, shape) {\r\n            const c1 = [shape.x, shape.y]\r\n            const c2 = [shape.x + 10, shape.y - 3]\r\n            const c3 = [shape.x + 3, shape.y - 11]\r\n            const c4 = [shape.x - 8, shape.y - 8]\r\n            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])\r\n              .closePath()\r\n          }\r\n        })\r\n        // 注册三个面图形\r\n        echart.graphic.registerShape('CubeLeft', CubeLeft)\r\n        echart.graphic.registerShape('CubeRight', CubeRight)\r\n        echart.graphic.registerShape('CubeTop', CubeTop)\r\n\r\n        let data = this.data\r\n\r\n        let numData = parseInt(Math.max.apply(null, data)) + parseInt(Math.max.apply(null, data)) * 0.25\r\n        const MAX = [numData, numData, numData, numData]\r\n        const VALUE = data\r\n\r\n\r\n        let option = {\r\n          title: {\r\n            show: true,\r\n            text: this.unit,\r\n            textStyle: {\r\n              color: '#fff',\r\n              fontWeight: '300',\r\n              fontSize: '16px'\r\n            },\r\n            left: 0,\r\n            top: '5%'\r\n          },\r\n          legend: {\r\n            type: 'plain',\r\n            show: true,\r\n            right: '5%',\r\n            top: 0,\r\n            textStyle: {\r\n              fontSize: this.myEchartsFontSize(14,1),\r\n            }\r\n          },\r\n          xAxis: {\r\n            type: 'category',\r\n            data: this.names,\r\n            axisLabel: {\r\n              color: '#fff',\r\n              rotate: 20,\r\n              fontSize: this.myEchartsFontSize(12,1),\r\n            }\r\n          },\r\n          yAxis: {\r\n            type: 'value',\r\n            axisLabel: {\r\n              color: '#fff',\r\n              fontSize: this.myEchartsFontSize(12,1),\r\n            },\r\n            splitNumber: 3,\r\n            splitLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                type: 'dashed',\r\n                color: '#999'\r\n              }\r\n            },\r\n          },\r\n          series: [\r\n            // {\r\n            //   type: 'custom',\r\n            //   renderItem: function(params, api) {\r\n            //     const location = api.coord([api.value(0), api.value(1)])\r\n            //     return {\r\n            //       type: 'group',\r\n            //       children: [{\r\n            //         type: 'CubeLeft',\r\n            //         shape: {\r\n            //           api,\r\n            //           x: location[0],\r\n            //           y: location[1],\r\n            //           xAxisPoint: api.coord([api.value(0), 0])\r\n            //         },\r\n            //         style: {\r\n            //           fill: 'rgba(47,102,192,.27)'\r\n            //         }\r\n            //       }, {\r\n            //         type: 'CubeRight',\r\n            //         shape: {\r\n            //           api,\r\n            //           x: location[0],\r\n            //           y: location[1],\r\n            //           xAxisPoint: api.coord([api.value(0), 0])\r\n            //         },\r\n            //         style: {\r\n            //           fill: 'rgba(59,128,226,.27)'\r\n            //         }\r\n            //       }, {\r\n            //         type: 'CubeTop',\r\n            //         shape: {\r\n            //           api,\r\n            //           x: location[0],\r\n            //           y: location[1],\r\n            //           xAxisPoint: api.coord([api.value(0), 0])\r\n            //         },\r\n            //         style: {\r\n            //           fill: 'rgba(72,156,221,.27)'\r\n            //         }\r\n            //       }]\r\n            //     }\r\n            //   },\r\n            //   data: MAX\r\n            // },\r\n            {\r\n              type: 'custom',\r\n              renderItem: (params, api) => {\r\n                const location = api.coord([api.value(0), api.value(1)])\r\n                return {\r\n                  type: 'group',\r\n                  children: [{\r\n                    type: 'CubeLeft',\r\n                    shape: {\r\n                      api,\r\n                      x: location[0],\r\n                      y: location[1],\r\n                      xAxisPoint: api.coord([api.value(0), 0])\r\n                    },\r\n                    style: {\r\n                      fill: colorData[0]\r\n                    }\r\n                  }, {\r\n                    type: 'CubeRight',\r\n                    shape: {\r\n                      api,\r\n                      x: location[0],\r\n                      y: location[1],\r\n                      xAxisPoint: api.coord([api.value(0), 0])\r\n                    },\r\n                    style: {\r\n                      fill: colorData[1]\r\n                    }\r\n                  }, {\r\n                    type: 'CubeTop',\r\n                    shape: {\r\n                      api,\r\n                      x: location[0],\r\n                      y: location[1],\r\n                      xAxisPoint: api.coord([api.value(0), 0])\r\n                    },\r\n                    style: {\r\n                      fill: colorData[1]\r\n                    }\r\n                  }]\r\n                }\r\n              },\r\n              data: VALUE\r\n            }, {\r\n              type: 'bar',\r\n              label: {\r\n                normal: {\r\n                  show: true,\r\n                  position: 'top',\r\n                  fontFamily: \"DIN Alternate\",\r\n                  fontSize: this.myEchartsFontSize(14,1),\r\n                  color: colorData[2],\r\n                  fontWeight: \"bold\",\r\n                  offset: [2, -8]\r\n                }\r\n              },\r\n              itemStyle: {\r\n                color: 'transparent'\r\n              },\r\n              tooltip: {},\r\n              data: VALUE\r\n            }\r\n          ]\r\n        };\r\n\r\n        this.echartImpl.setOption(option)\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"less\">\r\n  .app-container {\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n</style>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ec-bar.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ec-bar.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ec-bar.vue?vue&type=template&id=299f8ada&scoped=true&\"\nimport script from \"./ec-bar.vue?vue&type=script&lang=js&\"\nexport * from \"./ec-bar.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ec-bar.vue?vue&type=style&index=0&id=299f8ada&prod&scoped=true&lang=less&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"299f8ada\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ec-bar.vue?vue&type=style&index=0&id=299f8ada&prod&scoped=true&lang=less&\""],"sourceRoot":""}