1 line
14 KiB
JSON
1 line
14 KiB
JSON
{"ast":null,"code":"import \"core-js/modules/es.function.name.js\";\nimport \"core-js/modules/es.array.map.js\";\nimport \"core-js/modules/es.object.to-string.js\";\nimport \"core-js/modules/web.dom-collections.for-each.js\";\nimport \"core-js/modules/es.number.to-fixed.js\";\nimport \"core-js/modules/es.number.constructor.js\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport * as echarts from \"echarts\";\nexport default {\n name: \"IncomeChart\",\n data: function data() {\n return {\n sumIncome: 0,\n categoryIncomes: [],\n categoryNames: [],\n incomes: [],\n activeName: \"bar\",\n totalAll: 0,\n totalWeek: 0,\n totalMonth: 0,\n total: 0\n };\n },\n methods: {\n handleClick: function handleClick(tab) {\n switch (tab.name) {\n case \"bar\":\n this.total = this.totalAll;\n break;\n\n case \"pie\":\n this.total = this.totalAll;\n break;\n\n case \"line1\":\n this.total = this.totalWeek;\n break;\n\n case \"line2\":\n this.total = this.totalMonth;\n break;\n }\n }\n },\n mounted: function mounted() {\n var _this = this;\n\n var barChart = echarts.init(document.getElementById(\"bar\"));\n var pieChart = echarts.init(document.getElementById(\"pie\"));\n var lineChart1 = echarts.init(document.getElementById(\"weekLine\"));\n var lineChart2 = echarts.init(document.getElementById(\"monthLine\"));\n var barOption = {\n tooltip: {\n trigger: \"item\"\n },\n title: {\n text: \"收入统计柱状图\",\n x: \"center\"\n },\n label: {\n show: true,\n //是否显示\n position: \"top\"\n },\n xAxis: {\n type: \"category\",\n data: []\n },\n yAxis: {\n type: \"value\"\n },\n series: [{\n data: [],\n type: \"bar\"\n }]\n };\n var pieOption = {\n tooltip: {\n trigger: \"item\"\n },\n title: {\n text: \"收入统计饼图\",\n x: \"center\"\n },\n series: [{\n type: \"pie\",\n data: []\n }]\n };\n var lineOption1 = {\n tooltip: {\n trigger: \"item\"\n },\n label: {\n show: true //是否显示\n\n },\n title: {\n text: \"本周收入\",\n x: \"center\"\n },\n xAxis: {\n type: \"category\",\n data: [\"周一\", \"周二\", \"周三\", \"周四\", \"周五\", \"周六\", \"周日\"]\n },\n yAxis: {\n type: \"value\"\n },\n series: [{\n data: [],\n type: \"line\"\n }]\n };\n var lineOption2 = {\n tooltip: {\n trigger: \"item\"\n },\n label: {\n show: true //是否显示\n\n },\n title: {\n text: \"本月收入\",\n x: \"center\"\n },\n xAxis: {\n type: \"category\",\n data: []\n },\n yAxis: {\n type: \"value\"\n },\n series: [{\n data: [],\n type: \"line\"\n }]\n }; //渲染柱状图和饼图\n\n this.request.get(\"/api/income/chart\").then(function (res) {\n if (res.code === \"200\") {\n var categoryIncomes = res.data.categoryIncomes;\n var categoryNames = categoryIncomes.map(function (item) {\n return item.categoryName;\n });\n var incomes = categoryIncomes.map(function (item) {\n return item.categoryIncome;\n });\n barOption.xAxis.data = categoryNames;\n barOption.series[0].data = incomes;\n barChart.setOption(barOption);\n\n for (var i = 0; i < categoryNames.length; i++) {\n var item = {\n value: incomes[i],\n name: categoryNames[i]\n };\n pieOption.series[0].data.push(item);\n }\n\n pieChart.setOption(pieOption); //计算总和\n\n var sum = 0;\n incomes.forEach(function (item) {\n sum += item;\n });\n _this.total = sum;\n _this.totalAll = sum;\n }\n }); //渲染本周折线图\n\n this.request.get(\"/api/income/week\").then(function (res) {\n if (res.code === \"200\") {\n // lineOption1.xAxis.data = res.data.weekDays;\n var weekIncome = res.data.weekIncome;\n lineOption1.series[0].data = weekIncome;\n lineChart1.setOption(lineOption1); //计算本周总营收\n\n var sum = 0;\n weekIncome.forEach(function (item) {\n sum += item;\n });\n _this.totalWeek = sum;\n }\n }); //渲染本月折线图\n\n this.request.get(\"/api/income/month\").then(function (res) {\n if (res.code === \"200\") {\n lineOption2.xAxis.data = res.data.monthDays;\n var monthIncome = res.data.monthIncome;\n lineOption2.series[0].data = monthIncome;\n lineChart2.setOption(lineOption2); //计算本月总营收\n\n var sum = 0;\n monthIncome.forEach(function (item) {\n sum += item;\n });\n _this.totalMonth = sum;\n }\n });\n },\n filters: {\n numFilter: function numFilter(value) {\n // 截取当前数据到小数点后两位\n var realVal = Number(value).toFixed(2); // num.toFixed(2)获取的是字符串\n\n return Number(realVal);\n }\n }\n};","map":{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA;AACA;AACAA,qBADA;AAEAC,MAFA,kBAEA;AACA;AACAC,kBADA;AAEAC,yBAFA;AAGAC,uBAHA;AAIAC,iBAJA;AAKAC,uBALA;AAMAC,iBANA;AAOAC,kBAPA;AAQAC,mBARA;AASAC;AATA;AAWA,GAdA;AAeAC;AACAC,eADA,uBACAC,GADA,EACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;AAZA;AAcA;AAhBA,GAfA;AAkCAC,SAlCA,qBAkCA;AAAA;;AACA;AACA;AACA;AACA;AACA;AACAC;AACAC;AADA,OADA;AAIAC;AACAC,uBADA;AAEAC;AAFA,OAJA;AAQAC;AACAC,kBADA;AACA;AACAC;AAFA,OARA;AAYAC;AACAC,wBADA;AAEAvB;AAFA,OAZA;AAgBAwB;AACAD;AADA,OAhBA;AAmBAE,eACA;AACAzB,gBADA;AAEAuB;AAFA,OADA;AAnBA;AA0BA;AACAT;AACAC;AADA,OADA;AAKAC;AACAC,sBADA;AAEAC;AAFA,OALA;AASAO,eACA;AACAF,mBADA;AAEAvB;AAFA,OADA;AATA;AAgBA;AACAc;AACAC;AADA,OADA;AAIAI;AACAC,kBADA,CACA;;AADA,OAJA;AAOAJ;AACAC,oBADA;AAEAC;AAFA,OAPA;AAWAI;AACAC,wBADA;AAEAvB;AAFA,OAXA;AAeAwB;AACAD;AADA,OAfA;AAkBAE,eACA;AACAzB,gBADA;AAEAuB;AAFA,OADA;AAlBA;AAyBA;AACAT;AACAC;AADA,OADA;AAIAI;AACAC,kBADA,CACA;;AADA,OAJA;AAOAJ;AACAC,oBADA;AAEAC;AAFA,OAPA;AAWAI;AACAC,wBADA;AAEAvB;AAFA,OAXA;AAeAwB;AACAD;AADA,OAfA;AAkBAE,eACA;AACAzB,gBADA;AAEAuB;AAFA,OADA;AAlBA,MAxEA,CAiGA;;AACA;AACA;AACA;AACA;AACA;AACA,SAFA;AAGA;AACA;AACA,SAFA;AAGAG;AACAA;AACAC;;AAEA;AACA;AAAAC;AAAA7B;AAAA;AACA8B;AACA;;AACAC,sCAhBA,CAiBA;;AACA;AACA1B;AACA2B;AACA,SAFA;AAGA;AACA;AACA;AACA,KA1BA,EAlGA,CA6HA;;AACA;AACA;AACA;AACA;AACAC;AACAC,0CAJA,CAKA;;AACA;AACAC;AACAH;AACA,SAFA;AAGA;AACA;AACA,KAbA,EA9HA,CA4IA;;AACA;AACA;AACAI;AACA;AACAA;AACAC,0CAJA,CAKA;;AACA;AACAC;AACAN;AACA,SAFA;AAGA;AACA;AACA,KAbA;AAcA,GA7LA;AA8LAO;AACAC,aADA,qBACAX,KADA,EACA;AACA;AAEA,6CAHA,CAKA;;AAEA;AACA;AATA;AA9LA","names":["name","data","sumIncome","categoryIncomes","categoryNames","incomes","activeName","totalAll","totalWeek","totalMonth","total","methods","handleClick","tab","mounted","tooltip","trigger","title","text","x","label","show","position","xAxis","type","yAxis","series","barOption","barChart","value","pieOption","pieChart","sum","lineOption1","lineChart1","weekIncome","lineOption2","lineChart2","monthIncome","filters","numFilter"],"sourceRoot":"src/views/manage/income","sources":["IncomeChart.vue"],"sourcesContent":["<template>\r\n <div>\r\n <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">\r\n <el-card\r\n style=\"\r\n display: inline-block;\r\n margin-left: 50px;\r\n margin-top: 30px;\r\n font-weight: bold;\r\n font-size: 22px;\r\n color: #ffb02a;\r\n \"\r\n ><i class=\"iconfont icon-r-right\" style=\"font-size: 26px;\"></i>￥总计：{{ total | numFilter }}</el-card\r\n >\r\n <!-- 柱状图-->\r\n <el-tab-pane label=\"各类收入柱状图\" name=\"bar\">\r\n <div\r\n id=\"bar\"\r\n style=\"width: 1200px; height: 500px; margin: auto auto\"\r\n ></div>\r\n </el-tab-pane>\r\n <!-- 饼图-->\r\n <el-tab-pane label=\"各类收入饼图\" name=\"pie\">\r\n <div\r\n id=\"pie\"\r\n style=\"width: 600px; height: 600px; margin: 10px auto\"\r\n ></div>\r\n </el-tab-pane>\r\n <!-- 本周收入折线图-->\r\n <el-tab-pane label=\"本周收入\" name=\"line1\">\r\n <div\r\n id=\"weekLine\"\r\n style=\"width: 900px; height: 500px; margin: 10px auto\"\r\n ></div>\r\n </el-tab-pane>\r\n <!-- 本月收入折线图-->\r\n <el-tab-pane label=\"本月收入\" name=\"line2\">\r\n <div\r\n id=\"monthLine\"\r\n style=\"width: 1500px; height: 500px; margin: 10px auto\"\r\n ></div>\r\n </el-tab-pane>\r\n </el-tabs>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport * as echarts from \"echarts\";\r\nexport default {\r\n name: \"IncomeChart\",\r\n data() {\r\n return {\r\n sumIncome: 0,\r\n categoryIncomes: [],\r\n categoryNames: [],\r\n incomes: [],\r\n activeName: \"bar\",\r\n totalAll: 0,\r\n totalWeek: 0,\r\n totalMonth: 0,\r\n total: 0,\r\n };\r\n },\r\n methods: {\r\n handleClick(tab) {\r\n switch (tab.name) {\r\n case \"bar\":\r\n this.total = this.totalAll;\r\n break;\r\n case \"pie\":\r\n this.total = this.totalAll;\r\n break;\r\n case \"line1\":\r\n this.total = this.totalWeek;\r\n break;\r\n case \"line2\":\r\n this.total = this.totalMonth;\r\n break;\r\n }\r\n },\r\n },\r\n\r\n mounted() {\r\n var barChart = echarts.init(document.getElementById(\"bar\"));\r\n var pieChart = echarts.init(document.getElementById(\"pie\"));\r\n var lineChart1 = echarts.init(document.getElementById(\"weekLine\"));\r\n var lineChart2 = echarts.init(document.getElementById(\"monthLine\"));\r\n var barOption = {\r\n tooltip: {\r\n trigger: \"item\",\r\n },\r\n title: {\r\n text: \"收入统计柱状图\",\r\n x: \"center\",\r\n },\r\n label: {\r\n show: true, //是否显示\r\n position: \"top\",\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n data: [],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n },\r\n series: [\r\n {\r\n data: [],\r\n type: \"bar\",\r\n },\r\n ],\r\n };\r\n var pieOption = {\r\n tooltip: {\r\n trigger: \"item\",\r\n },\r\n\r\n title: {\r\n text: \"收入统计饼图\",\r\n x: \"center\",\r\n },\r\n series: [\r\n {\r\n type: \"pie\",\r\n data: [],\r\n },\r\n ],\r\n };\r\n var lineOption1 = {\r\n tooltip: {\r\n trigger: \"item\",\r\n },\r\n label: {\r\n show: true, //是否显示\r\n },\r\n title: {\r\n text: \"本周收入\",\r\n x: \"center\",\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n data: [\"周一\", \"周二\", \"周三\", \"周四\", \"周五\", \"周六\", \"周日\"],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n },\r\n series: [\r\n {\r\n data: [],\r\n type: \"line\",\r\n },\r\n ],\r\n };\r\n var lineOption2 = {\r\n tooltip: {\r\n trigger: \"item\",\r\n },\r\n label: {\r\n show: true, //是否显示\r\n },\r\n title: {\r\n text: \"本月收入\",\r\n x: \"center\",\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n data: [],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n },\r\n series: [\r\n {\r\n data: [],\r\n type: \"line\",\r\n },\r\n ],\r\n };\r\n //渲染柱状图和饼图\r\n this.request.get(\"/api/income/chart\").then((res) => {\r\n if (res.code === \"200\") {\r\n let categoryIncomes = res.data.categoryIncomes;\r\n let categoryNames = categoryIncomes.map((item) => {\r\n return item.categoryName;\r\n });\r\n let incomes = categoryIncomes.map((item) => {\r\n return item.categoryIncome;\r\n });\r\n barOption.xAxis.data = categoryNames;\r\n barOption.series[0].data = incomes;\r\n barChart.setOption(barOption);\r\n\r\n for (let i = 0; i < categoryNames.length; i++) {\r\n let item = { value: incomes[i], name: categoryNames[i] };\r\n pieOption.series[0].data.push(item);\r\n }\r\n pieChart.setOption(pieOption);\r\n //计算总和\r\n let sum = 0;\r\n incomes.forEach((item) => {\r\n sum += item;\r\n });\r\n this.total = sum;\r\n this.totalAll = sum;\r\n }\r\n });\r\n //渲染本周折线图\r\n this.request.get(\"/api/income/week\").then((res) => {\r\n if (res.code === \"200\") {\r\n // lineOption1.xAxis.data = res.data.weekDays;\r\n let weekIncome = res.data.weekIncome;\r\n lineOption1.series[0].data = weekIncome;\r\n lineChart1.setOption(lineOption1);\r\n //计算本周总营收\r\n let sum = 0;\r\n weekIncome.forEach((item) => {\r\n sum += item;\r\n });\r\n this.totalWeek = sum;\r\n }\r\n });\r\n //渲染本月折线图\r\n this.request.get(\"/api/income/month\").then((res) => {\r\n if (res.code === \"200\") {\r\n lineOption2.xAxis.data = res.data.monthDays;\r\n let monthIncome = res.data.monthIncome;\r\n lineOption2.series[0].data = monthIncome;\r\n lineChart2.setOption(lineOption2);\r\n //计算本月总营收\r\n let sum = 0;\r\n monthIncome.forEach((item) => {\r\n sum += item;\r\n });\r\n this.totalMonth = sum;\r\n }\r\n });\r\n },\r\n filters: {\r\n numFilter(value) {\r\n // 截取当前数据到小数点后两位\r\n\r\n let realVal = Number(value).toFixed(2);\r\n\r\n // num.toFixed(2)获取的是字符串\r\n\r\n return Number(realVal);\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n</style>"]},"metadata":{},"sourceType":"module"} |