{"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>￥总计：{{ 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"}