{"version":3,"sources":["webpack:///./src/components/EchartBarLine.vue?946d","webpack:///src/components/EchartBarLine.vue","webpack:///./src/components/EchartBarLine.vue?4979","webpack:///./src/components/EchartBarLine.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","staticStyle","staticRenderFns","name","props","data","type","default","title","thisEchart","xAxisData","targetCount","cost","totalCount","matchingRate","targetCountMax","costMax","totalCountMax","matchingRateMax","watch","mounted","methods","setData","initEcharts","text","left","tooltip","trigger","axisPointer","shadowStyle","color","formatter","console","backgroundColor","textStyle","padding","legend","selectedMode","bottom","xAxis","axisLine","show","lineStyle","splitLine","axisTick","axisLabel","yAxis","nameTextStyle","fontSize","min","max","interval","series","symbolSize","hoverAnimation","yAxisIndex","width","areaStyle","x","y","x2","y2","colorStops","offset","itemStyle","barBorderRadius","barWidth","xAxisIndex","window","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,IAAI,UAAUC,YAAY,kBAAkBC,YAAY,CAAC,MAAQ,OAAO,OAAS,WACvLC,EAAkB,G,qBCKR,GACdC,qBACAC,OACAC,MACAC,WACAC,UACA,WAGAC,OACAF,YACAC,mBAGAF,OACA,OACAI,gBACAC,aACAC,eACAC,QACAC,cACAC,gBACAC,iBACAC,UACAC,gBACAC,oBAGAC,OACAd,OACA,iBAGAe,UACA,gBAEAC,SACAC,UACA,SACA,KACA,KACA,KACA,KACA,eACA,sBACA,qBACA,uBACA,sBACAZ,mCACAC,sBACAC,eACAC,qBACAC,mEACA,oCACA,mCAEA,sBACA,qBAEA,kCACA,iCAEA,sCACA,uCAGA,iIACA,6JACA,yJACA,iKACA,SACA,iBAEA,mHAEA,mBACA,YACA,kBACA,oBACA,oBAEAS,cACA,OACAf,OACAgB,0BACAC,eAEAC,SACAC,eACAC,aACAtB,cACAuB,aACAC,8BAKAC,cACAC,iCACA,gDACA,+BACA,WACA,wGACA,KAEAC,uBACAC,WACAJ,iBAEAK,YAEAC,QACAC,gBACAC,SACAjC,+CAEAkC,OACA,CACAjC,gBACAkC,UACAC,QACAC,WACAZ,kBAGAa,WACAF,QACAC,WACAZ,gBACAxB,gBAGAD,qBAEA,CACAC,gBACAkC,UACAC,QACAC,WACAZ,kBAGAc,UACAH,SAEAI,WACAJ,SAEApC,sBAGAyC,OACA,CACAxC,aACAH,YACA4C,eACAjB,gBACAkB,eAGAR,UACAC,QACAC,WACAZ,kBAGAc,UACAF,WACAZ,eAGAa,WACAF,QACAC,WACAZ,gBACAxB,iBAIA,CACAA,aACAH,WACA4C,eACAjB,gBACAkB,eAGAR,UACAC,QACAC,WACAZ,kBAGAc,UACAF,WACAZ,eAGAa,WACAF,QACAC,WACAZ,gBACAxB,iBAIA,CACAA,aACAH,WACAsC,QACAQ,MACAC,QACAC,cAGAC,QACA,CACAjD,cACAG,YACAD,uBACAyB,gBACAuB,gBACAC,kBACAC,aACAb,WACAc,SAEAC,WACA3B,OACAxB,cACAoD,IACAC,IACAC,KACAC,KACAC,aACAC,SACAjC,kCACA,CACAiC,SACAjC,sCAKA,CACA3B,cACAG,WACA0D,WACAlC,OACAxB,cACAoD,IACAC,IACAC,KACAC,KACAC,aACAC,SAAAjC,iBACA,CACAiC,SAAAjC,mBAGAmC,2BAGAC,YACA7D,gBAEA,CACAF,eACAG,WACA0D,WACAlC,gBACAmC,2BAEAV,aACAW,YACA7D,sBAEA,CACAF,QACAG,WACA4D,YACAC,cAEA,CACAhE,gBACAG,WACA0D,WACAlC,OACAxB,cACAoD,IACAC,IACAC,KACAC,KACAC,aACAC,SAAAjC,iBACA,CACAiC,SAAAjC,mBAGAmC,2BAEAV,aACAW,YACAC,aACA9D,yBAIA,6CACA,6BAEA+D,qBACA,6BC9TuV,I,YCOnVC,EAAY,eACd,EACA7E,EACAU,GACA,EACA,KACA,KACA,MAIa,aAAAmE,E","file":"static/js/chunk-2d0a47ed.72f05503.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"barLine\",staticClass:\"eachrt-bar-line\",staticStyle:{\"width\":\"100%\",\"height\":\"100%\"}})}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template lang=\"pug\">\n    .eachrt-bar-line(style=\"width:100%;height:100%;\" ref=\"barLine\")\n</template>\n\n<script>\nimport echarts from 'echarts'\nexport default {\n    name: 'EchartBarLine',\n    props: {\n        data: {\n            type: Array,\n            default () {\n                return []\n            }\n        },\n        title: {\n            type: String,\n            default: '客流量和费用'\n        }\n    },\n    data () {\n        return {\n            thisEchart: null,\n            xAxisData: [],\n            targetCount: [],\n            cost: [],\n            totalCount: [],\n            matchingRate: [],\n            targetCountMax: 0,\n            costMax: 0,\n            totalCountMax: 0,\n            matchingRateMax: 0\n        }\n    },\n    watch: {\n        data () {\n            this.setData()\n        }\n    },\n    mounted () {\n        this.setData()\n    },\n    methods: {\n        setData () {\n            let xAxisData = []\n            let targetCount = []\n            let cost = []\n            let totalCount = []\n            let matchingRate = []\n            this.costMax = 0\n            this.targetCountMax = 0\n            this.totalCountMax = 0\n            this.matchingRateMax = 0\n            this.data.forEach((item) => {\n                xAxisData.push(item.targetTime || item.peroidTime)\n                targetCount.push(item.targetCount)\n                cost.push(item.cost)\n                totalCount.push(item.totalCount)\n                matchingRate.push(item.totalCount ? (item.targetCount / item.totalCount * 100).toFixed(2) : 0)\n                if (this.targetCountMax < item.targetCount) {\n                    this.targetCountMax = item.targetCount\n                }\n                if (this.costMax < item.cost) {\n                    this.costMax = item.cost\n                }\n                if (this.totalCountMax < item.totalCount) {\n                    this.totalCountMax = item.totalCount\n                }\n                if (this.matchingRateMax < item.matchingRate) {\n                    this.matchingRateMax = item.matchingRate\n                }\n            })\n            this.costMax = Math.ceil((this.costMax / Math.pow(10, this.costMax.toString().length - 3))) * (Math.pow(10, this.costMax.toString().length - 3))\n            this.targetCountMax = Math.ceil((this.targetCountMax / Math.pow(10, this.targetCountMax.toString().length - 2))) * (Math.pow(10, this.targetCountMax.toString().length - 2))\n            this.totalCountMax = Math.ceil((this.totalCountMax / Math.pow(10, this.totalCountMax.toString().length - 2))) * (Math.pow(10, this.totalCountMax.toString().length - 2))\n            this.matchingRateMax = Math.ceil((this.matchingRateMax / Math.pow(10, this.matchingRateMax.toString().length - 2))) * (Math.pow(10, this.matchingRateMax.toString().length - 2))\n            if (xAxisData.length) {\n                this.xAxisData = xAxisData\n            } else {\n                this.xAxisData = ['09:00-09:30', '09:30-10:30', '12:00-12:30', '12:30-13:00', '14:00-14:30', '18:00-18:30', '21:30-22:00']\n            }\n            this.targetCount = targetCount\n            this.cost = cost\n            this.totalCount = totalCount\n            this.matchingRate = matchingRate\n            this.initEcharts()\n        },\n        initEcharts () {\n            let option = {\n                title: {\n                    text: this.title || '客流量和费用',\n                    left: 'center'\n                },\n                tooltip: {\n                    trigger: 'axis',\n                    axisPointer: {\n                        type: 'shadow',\n                        shadowStyle: {\n                            color: 'rgba(40,39,41,0.05)'\n                        }\n                    },\n                    // formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}',\n                    // formatter: '{a1}: {c1}<br />{a3}: {c3}<br />{a2}: {c2}<br />{a0}: {c0}',\n                    formatter: data => {\n                        console.log('formatter data:', data)\n                        let colors = ['#FDCB15', '#FF3973', '#D4D4D4', '#282729']\n                        return [1, 3, 2, 0].reduce( (a, b) => {\n                            let item = data[b]\n                            return a + `<span class=\"fmt-span\" style=\"background: ${colors[b]}\"></span> ${item.seriesName}: ${item.value}<br/>`\n                        }, '')\n                    },\n                    backgroundColor: '#FFF',\n                    textStyle: {\n                        color: '#282729'\n                    },\n                    padding: 10\n                },\n                legend: {\n                    selectedMode: false,\n                    bottom: 0,\n                    data: ['广告费(元)', '目标流量(人次)', '总流量(人次)', '匹配率(%)']\n                },\n                xAxis: [\n                    {\n                        type: 'category',\n                        axisLine: {\n                            show: false,\n                            lineStyle: {\n                                color: '#999999'\n                            }\n                        },\n                        splitLine: {\n                            show: true,\n                            lineStyle: {\n                                color: '#E9E9E9',\n                                type: 'dashed'\n                            }\n                        },\n                        data: this.xAxisData\n                    },\n                    {\n                        type: 'category',\n                        axisLine: {\n                            show: false,\n                            lineStyle: {\n                                color: '#999999'\n                            }\n                        },\n                        axisTick: {\n                            show: false\n                        },\n                        axisLabel: {\n                            show: false\n                        },\n                        data: this.xAxisData\n                    }\n                ],\n                yAxis: [\n                    {\n                        type: 'value',\n                        name: '广告费用',\n                        nameTextStyle: {\n                            color: '#282729',\n                            fontSize: '16',\n                            // fontWeight: 'bold'\n                        },\n                        axisLine: {\n                            show: false,\n                            lineStyle: {\n                                color: '#FF3973'\n                            }\n                        },\n                        axisTick: {\n                            lineStyle: {\n                                color: '#FFF'\n                            }\n                        },\n                        splitLine: {\n                            show: true,\n                            lineStyle: {\n                                color: '#E9E9E9',\n                                type: 'dashed'\n                            }\n                        },\n                    },\n                    {\n                        type: 'value',\n                        name: '客流量',\n                        nameTextStyle: {\n                            color: '#282729',\n                            fontSize: '16',\n                            // fontWeight: 'bold'\n                        },\n                        axisLine: {\n                            show: false,\n                            lineStyle: {\n                                color: '#999999'\n                            }\n                        },\n                        axisTick: {\n                            lineStyle: {\n                                color: '#FFF'\n                            }\n                        },\n                        splitLine: {\n                            show: true,\n                            lineStyle: {\n                                color: '#E9E9E9',\n                                type: 'dashed'\n                            }\n                        }\n                    },\n                    {\n                        type: 'value',\n                        name: '匹配率',\n                        show: false,\n                        min: 0,\n                        max: 100,\n                        interval: 10,\n                    }\n                ],\n                series: [\n                    {\n                        name: '匹配率(%)',\n                        type: 'line',\n                        data: this.matchingRate,\n                        color: '#FDCB15',\n                        symbolSize: '12',\n                        hoverAnimation: false,\n                        yAxisIndex: 2,\n                        lineStyle: {\n                            width: 4\n                        },\n                        areaStyle: {\n                            color: {\n                                type: 'linear',\n                                x: 0,\n                                y: 0,\n                                x2: 0,\n                                y2: 1,\n                                colorStops: [{\n                                    offset: 0,\n                                    color: 'rgba(255, 184, 31, 0.12)'\n                                }, {\n                                    offset: 1,\n                                    color: 'rgba(250, 234, 97, 0.12)'\n                                }]\n                            }\n                        }\n                    },\n                    {\n                        name: '广告费(元)',\n                        type: 'bar',\n                        itemStyle: {\n                            color: {\n                                type: 'linear',\n                                x: 0,\n                                y: 0,\n                                x2: 0,\n                                y2: 1,\n                                colorStops: [{\n                                    offset: 0, color: '#FF846D' // 0% 处的颜色\n                                }, {\n                                    offset: 1, color: '#FF3973' // 100% 处的颜色\n                                }]\n                            },\n                            barBorderRadius: [5, 5, 0, 0],\n\n                        },\n                        barWidth: 10,\n                        data: this.cost\n                    },\n                    {\n                        name: '总流量(人次)',\n                        type: 'bar',\n                        itemStyle: {\n                            color: '#D4D4D4',\n                            barBorderRadius: [5, 5, 0, 0]\n                        },\n                        yAxisIndex: 1,\n                        barWidth: 10,\n                        data: this.totalCount\n                    },\n                    {\n                        name: '',\n                        type: 'bar',\n                        barWidth: 10,\n                        xAxisIndex: 1,\n                    },\n                    {\n                        name: '有效流量(人次)',\n                        type: 'bar',\n                        itemStyle: {\n                            color: {\n                                type: 'linear',\n                                x: 0,\n                                y: 0,\n                                x2: 0,\n                                y2: 1,\n                                colorStops: [{\n                                    offset: 0, color: '#504F53' // 0% 处的颜色\n                                }, {\n                                    offset: 1, color: '#282729' // 100% 处的颜色\n                                }]\n                            },\n                            barBorderRadius: [5, 5, 0, 0]\n                        },\n                        yAxisIndex: 1,\n                        barWidth: 10,\n                        xAxisIndex: 1,\n                        data: this.targetCount\n                    }\n                ]\n            }\n            this.thisEchart = echarts.init(this.$refs.barLine)\n            this.thisEchart.setOption(option)\n\n            window.onresize = () => {\n                this.thisEchart.resize()\n            }\n        }\n    }\n}\n</script>\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!./EchartBarLine.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!./EchartBarLine.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./EchartBarLine.vue?vue&type=template&id=7069ed5e&lang=pug&\"\nimport script from \"./EchartBarLine.vue?vue&type=script&lang=js&\"\nexport * from \"./EchartBarLine.vue?vue&type=script&lang=js&\"\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  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}