| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\statistic\\user\\components\\userRegion.vue?vue&type=style&index=0&id=a1b375d2&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\statistic\\user\\components\\userRegion.vue","mtime":1761614939066},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouZWNoYXJ0cyB7DQogIHdpZHRoOiAxMDAlOw0KfQ0KLnRhYmxlcyB7DQogIHdpZHRoOiAxMDAlOw0KICA6OnYtZGVlcCAuaXZ1LXRhYmxlLW92ZXJmbG93WSB7DQogICAgJjo6LXdlYmtpdC1zY3JvbGxiYXIgew0KICAgICAgd2lkdGg6IDA7DQogICAgfQ0KICAgICY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHsNCiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50Ow0KICAgIH0NCiAgICAmOjotd2Via2l0LXNjcm9sbGJhci10aHVtYiB7DQogICAgICBiYWNrZ3JvdW5kOiAjZThlYWVjOw0KICAgIH0NCiAgfQ0KfQ0K"},{"version":3,"sources":["userRegion.vue"],"names":[],"mappings":";AAoRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"userRegion.vue","sourceRoot":"src/pages/statistic/user/components","sourcesContent":["<template>\r\n <el-row :gutter=\"16\">\r\n <el-col :xs=\"24\" :sm=\"24\" :md=\"24\" :lg=\"18\">\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt-16\">\r\n <div class=\"acea-row row-between-wrapper\">\r\n <h4 class=\"statics-header-title mb20\">用户地域分布</h4>\r\n </div>\r\n <el-row>\r\n <el-col :xs=\"24\" :sm=\"24\" :md=\"24\" :lg=\"10\">\r\n <div class=\"echarts\">\r\n <div :style=\"{ height: '400px', width: '100%' }\" ref=\"myEchart\"></div>\r\n </div>\r\n </el-col>\r\n <el-col :xs=\"24\" :sm=\"24\" :md=\"24\" :lg=\"14\">\r\n <div class=\"tables\">\r\n <el-table height=\"400\" :columns=\"columns1\" :data=\"resdataList\">\r\n <el-table-column :label=\"item.title\" :min-width=\"100\" v-for=\"(item, index) in columns1\" :key=\"index\">\r\n <template slot-scope=\"scope\">\r\n <template v-if=\"item.key\">\r\n <div>\r\n <span>{{ scope.row[item.key] }}</span>\r\n </div>\r\n </template>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n </div>\r\n </el-col>\r\n </el-row>\r\n </el-card>\r\n </el-col>\r\n <el-col :xs=\"24\" :sm=\"24\" :md=\"24\" :lg=\"6\">\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt-16\">\r\n <div class=\"acea-row row-between-wrapper\">\r\n <h4 class=\"statics-header-title mb20\">用户性别比例</h4>\r\n </div>\r\n <echarts-new\r\n :option-data=\"optionData\"\r\n :styles=\"style\"\r\n height=\"100%\"\r\n width=\"100%\"\r\n v-if=\"optionData\"\r\n ></echarts-new>\r\n </el-card>\r\n </el-col>\r\n </el-row>\r\n</template>\r\n\r\n<script>\r\nimport echarts from 'echarts';\r\nimport '../../../../../node_modules/echarts/map/js/china.js'; // 引入中国地图数据\r\nimport { statisticWechatRegionApi, statisticWechatSexApi } from '@/api/statistic';\r\nimport echartsNew from '@/components/echartsNew/index';\r\nexport default {\r\n name: 'userRegion',\r\n components: {\r\n echartsNew,\r\n },\r\n props: {\r\n formInline: {\r\n type: Object,\r\n default: function () {\r\n return {\r\n channel_type: '',\r\n data: '',\r\n };\r\n },\r\n },\r\n },\r\n data() {\r\n return {\r\n chart: null,\r\n resdata: [],\r\n resdataList: [],\r\n columns1: [\r\n {\r\n title: 'TOP省份',\r\n key: 'province',\r\n },\r\n {\r\n title: '累积用户数',\r\n key: 'allNum',\r\n sortable: true,\r\n },\r\n {\r\n title: '新增用户数',\r\n key: 'newNum',\r\n sortable: true,\r\n },\r\n {\r\n title: '访客数',\r\n key: 'visitNum',\r\n sortable: true,\r\n },\r\n {\r\n title: '支付金额',\r\n key: 'payPrice',\r\n sortable: true,\r\n },\r\n ],\r\n style: { height: '400px' },\r\n optionData: {},\r\n };\r\n },\r\n mounted() {\r\n this.getTrend();\r\n this.getSex();\r\n },\r\n beforeDestroy() {\r\n if (!this.chart) {\r\n return;\r\n }\r\n this.chart.dispose();\r\n this.chart = null;\r\n },\r\n methods: {\r\n chinaConfigure() {\r\n let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置\r\n window.onresize = myChart.resize;\r\n myChart.setOption({\r\n // 进行相关配置\r\n backgroundColor: '#fff',\r\n tooltip: {\r\n trigger: 'item',\r\n formatter: function (params) {\r\n console.log(params, 'params');\r\n return params.data\r\n ? `地区:${params.name}</br>累计用户: ${params.data.value}</br>新增用户: ${params.data.newNum}</br>访客数: ${params.data.visitNum}</br>支付金额: ${params.data.payPrice}`\r\n : `地区:${params.name}</br>累计用户: 0</br>新增用户: 0</br>访客数: 0</br>支付金额: 0`;\r\n },\r\n }, // 鼠标移到图里面的浮动提示框\r\n dataRange: {\r\n show: false,\r\n min: 0,\r\n max: 1000,\r\n text: ['High', 'Low'],\r\n realtime: true,\r\n calculable: true,\r\n color: ['orangered', 'yellow', 'lightskyblue'],\r\n },\r\n geo: {\r\n // 这个是重点配置区\r\n map: 'china', // 表示中国地图\r\n roam: false,\r\n label: {\r\n normal: {\r\n show: false, // 是否显示对应地名\r\n textStyle: {\r\n color: 'rgba(0,0,0,0.4)',\r\n },\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n borderColor: 'rgba(0, 0, 0, 0.2)',\r\n },\r\n emphasis: {\r\n areaColor: null,\r\n shadowOffsetX: 0,\r\n shadowOffsetY: 0,\r\n shadowBlur: 20,\r\n borderWidth: 0,\r\n shadowColor: 'rgba(0, 0, 0, 0.5)',\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n type: 'scatter',\r\n zoom: 1.2,\r\n aspectScale: 1.75, //长宽比\r\n coordinateSystem: 'geo', // 对应上方配置\r\n },\r\n {\r\n type: 'map',\r\n geoIndex: 0,\r\n data: this.resdata,\r\n },\r\n ],\r\n });\r\n },\r\n // 统计图\r\n getTrend() {\r\n statisticWechatRegionApi(this.formInline)\r\n .then(async (res) => {\r\n this.resdataList = res.data;\r\n this.resdata = res.data.map((item) => {\r\n let jsonData = {};\r\n jsonData.name = item.province.replace('省', '');\r\n jsonData.value = item.allNum;\r\n jsonData.newNum = item.newNum;\r\n jsonData.payPrice = item.payPrice;\r\n jsonData.visitNum = item.visitNum;\r\n return jsonData;\r\n });\r\n this.chinaConfigure();\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n //性别\r\n getSex() {\r\n statisticWechatSexApi(this.formInline)\r\n .then(async (res) => {\r\n let totalSumAll = 0;\r\n res.data.forEach((item) => {\r\n totalSumAll += item.value;\r\n });\r\n this.optionData = {\r\n title: {\r\n show: true,\r\n text: '总用户数', // 当前写死\r\n subtext: totalSumAll, // 当前写死\r\n x: 'center',\r\n y: 'center',\r\n textStyle: {\r\n fontSize: '14',\r\n color: '#666666',\r\n },\r\n subtextStyle: {\r\n fontSize: '30',\r\n fontWeight: 'bold',\r\n color: '#333333',\r\n },\r\n },\r\n tooltip: {\r\n trigger: 'item',\r\n formatter: '{a} <br/>{b}: {c} ({d}%)',\r\n },\r\n legend: {\r\n orient: 'vertical',\r\n left: 10,\r\n data: ['未知', '男', '女'],\r\n },\r\n series: [\r\n {\r\n name: '访问来源',\r\n type: 'pie',\r\n radius: ['50%', '70%'],\r\n avoidLabelOverlap: false,\r\n label: {\r\n show: false,\r\n position: 'center',\r\n },\r\n labelLine: {\r\n show: false,\r\n },\r\n data: res.data,\r\n itemStyle: {\r\n emphasis: {\r\n shadowBlur: 10,\r\n shadowOffsetX: 0,\r\n shadowColor: 'rgba(0, 0, 0, 0.5)',\r\n },\r\n normal: {\r\n color: function (params) {\r\n //自定义颜色\r\n var colorList = ['#999999', '#1890FF', '#FFAB2B'];\r\n return colorList[params.dataIndex];\r\n },\r\n },\r\n },\r\n },\r\n ],\r\n };\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.echarts {\r\n width: 100%;\r\n}\r\n.tables {\r\n width: 100%;\r\n ::v-deep .ivu-table-overflowY {\r\n &::-webkit-scrollbar {\r\n width: 0;\r\n }\r\n &::-webkit-scrollbar-track {\r\n background-color: transparent;\r\n }\r\n &::-webkit-scrollbar-thumb {\r\n background: #e8eaec;\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]}
|
