1 line
13 KiB
JSON
1 line
13 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\";\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};","map":{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;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;AAAA;AAAA;;AACA;AAAA;AAAA;;AACA;AAAA;AAAA;;AACA;AAAA;AAAA;AAJA;AAMA;AARA,GAfA;AA0BAC,SA1BA,qBA0BA;AAAA;;AAEA;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;AAgBAwB;AACAD;AADA,OAhBA;AAmBAE,eACA;AACAzB,gBADA;AAEAuB;AAFA,OADA;AAnBA;AA0BA;AACAT;AACAC;AADA,OADA;AAIAI;AACAC,kBADA,CACA;;AADA,OAJA;AAOAJ;AACAC,oBADA;AAEAC;AAFA,OAPA;AAWAI;AACAC,wBADA;AAEAvB;AAFA,OAXA;AAgBAwB;AACAD;AADA,OAhBA;AAmBAE,eACA;AACAzB,gBADA;AAEAuB;AAFA,OADA;AAnBA,MA1EA,CAoGA;;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,EArGA,CAgIA;;AACA;AACA;AACA;AACA;AACAC;AACAC,0CAJA,CAKA;;AACA;AACAC;AACAH;AACA,SAFA;AAGA;AACA;AACA,KAbA,EAjIA,CA+IA;;AACA;AACA;AACAI;AACA;AACAA;AACAC,0CAJA,CAKA;;AACA;AACAC;AACAN;AACA,SAFA;AAGA;AACA;AACA,KAbA;AAcA;AAxLA","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"],"sourceRoot":"src/views/manage/income","sources":["IncomeChart.vue"],"sourcesContent":["<template>\r\n <div>\r\n\r\n <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">\r\n <el-card style=\"display: inline-block;margin-left: 50px;margin-top:30px;font-weight: bold;font-size:22px;color: #ffb02a\">￥总计：{{total}}</el-card>\r\n<!-- 柱状图-->\r\n <el-tab-pane label=\"各类收入柱状图\" name=\"bar\">\r\n <div id=\"bar\" style=\"width: 1200px;height: 500px;margin:auto auto\"></div>\r\n </el-tab-pane>\r\n<!-- 饼图-->\r\n <el-tab-pane label=\"各类收入饼图\" name=\"pie\" >\r\n <div id=\"pie\" style=\"width: 600px;height:600px;margin: 10px auto\"></div>\r\n </el-tab-pane>\r\n<!-- 本周收入折线图-->\r\n <el-tab-pane label=\"本周收入\" name=\"line1\">\r\n <div id=\"weekLine\" style=\"width: 900px;height: 500px;margin: 10px auto\"></div>\r\n </el-tab-pane>\r\n<!-- 本月收入折线图-->\r\n <el-tab-pane label=\"本月收入\" name=\"line2\">\r\n <div id=\"monthLine\" style=\"width: 1500px;height: 500px;margin: 10px auto\"></div>\r\n </el-tab-pane>\r\n </el-tabs>\r\n\r\n </div>\r\n\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': this.total = this.totalAll;break;\r\n case 'pie': this.total = this.totalAll;break;\r\n case 'line1': this.total = this.totalWeek;break;\r\n case 'line2': this.total = this.totalMonth;break;\r\n }\r\n }\r\n },\r\n\r\n mounted() {\r\n\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 },\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 },\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}\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>"]},"metadata":{},"sourceType":"module"} |