echarts 双堆叠柱状图（数据整理）

1.后台返回的数据格式

{"code": "0000","message": "","messageCode": "操作成功","sign": null,"detail": null,"data": {"pieChart": [{"key": "产品问题","value": 32},{"key": "安装问题","value": 8},{"key": "其他","value": 1107},{"key": "远程服务","value": 1}],"list": null,"yearDimensionRespList": [{"month": 1,"lastYearPair": {"key": 2023,"value": [{"key": "安装问题","value": 1},{"key": "其他","value": 1031},{"key": "产品问题","value": 5}]},"currentYearPair": {"key": 2024,"value": [{"key": "其他","value": 1031},{"key": "产品问题","value": 5},{"key": "安装问题","value": 1}]}},{"month": 2,"lastYearPair": {"key": 2023,"value": [{"key": "安装问题","value": 1},{"key": "产品问题","value": 14},{"key": "其他","value": 53}]},"currentYearPair": {"key": 2024,"value": [{"key": "产品问题","value": 14},{"key": "安装问题","value": 1},{"key": "其他","value": 53}]}},{"month": 3,"lastYearPair": {"key": 2023,"value": [{"key": "产品问题","value": 5},{"key": "安装问题","value": 6},{"key": "其他","value": 17},{"key": "远程服务","value": 1}]},"currentYearPair": {"key": 2024,"value": [{"key": "其他","value": 17},{"key": "产品问题","value": 5},{"key": "安装问题","value": 6},{"key": "远程服务","value": 1}]}},{"month": 4,"lastYearPair": {"key": 2023,"value": [{"key": "其他","value": 15},{"key": "产品问题","value": 8}]},"currentYearPair": {"key": 2024,"value": [{"key": "其他","value": 6},{"key": "产品问题","value": 8}]}},{"month": 5,"lastYearPair": {"key": 2023,"value": [{"key": "产品问题","value": 2},{"key": "其他","value": 10}]},"currentYearPair": {"key": 2024,"value": []}},{"month": 6,"lastYearPair": {"key": 2023,"value": [{"key": "其他","value": 2},{"key": "产品问题","value": 1},{"key": "远程服务","value": 1}]},"currentYearPair": {"key": 2024,"value": []}},{"month": 7,"lastYearPair": {"key": 2023,"value": [{"key": "产品问题","value": 16},{"key": "远程服务","value": 4},{"key": "其他","value": 15}]},"currentYearPair": {"key": 2024,"value": []}},{"month": 8,"lastYearPair": {"key": 2023,"value": []},"currentYearPair": {"key": 2024,"value": []}},{"month": 9,"lastYearPair": {"key": 2023,"value": [{"key": "其他","value": 2},{"key": "产品问题","value": 5},{"key": "远程服务","value": 1}]},"currentYearPair": {"key": 2024,"value": []}},{"month": 10,"lastYearPair": {"key": 2023,"value": []},"currentYearPair": {"key": 2024,"value": []}},{"month": 11,"lastYearPair": {"key": 2023,"value": []},"currentYearPair": {"key": 2024,"value": []}},{"month": 12,"lastYearPair": {"key": 2023,"value": []},"currentYearPair": {"key": 2024,"value": []}}]},"success": true
}

2.代码 indexC optionC optionCYear

<template><!-- 售后服务工单 --><div class="production-box"><!-- 顶部时间切换 --><TopTab @handleClickDateTab="handleClickDateTab" /><!-- 主体内容 --><div class="content"><!-- !!!!售后工单渠道占比!!!!!! --><div class="sales"><!-- 顶部标题 --><div class="top-title"><div><div>售后工单渠道占比</div><div @click="showDialogs(0)"></div></div><div v-if="0">详情</div></div><!-- 中部标题 --><div class="middle-title"><div class="hardware-bg"></div><div>{{ state.titleA }}</div></div><!-- echarts图表环形 --><div class="chart-info"><EChart:option="state.circleOptionA":width="state.width":height="state.height"isClick/></div><!-- 底部标题 --><div class="bottom-title"><div><div class="data-bg"></div><div class="bottom-title_bold">{{ state.subtitleA }}</div></div><div><div style="width: 18px"></div><div class="bottom-title_think">{{ state.timeRangA }}</div></div></div><!-- echarts图表 --><div class="chart-info"><EChart:option="state.queryType != 'year' ? state.optionA : state.optionAYear":width="state.width":height="state.height"isClick/></div></div><!-- !!!!售后问题统计!!!!!! --><div class="sales"><!-- 顶部标题 --><div class="top-title"><div><div>售后问题统计</div><div @click="showDialogs(1)"></div></div><div  @click="handleClickDetailB">详情</div></div><!-- 中部标题 --><div class="middle-title"><div class="hardware-bg"></div><div>{{ state.titleB }}</div></div><!-- echarts图表环形 --><div class="chart-info"><EChart:option="state.circleOptionB":width="state.width":height="state.height"isClick/></div><!-- 底部标题 --><div class="bottom-title"><div><div class="data-bg"></div><div class="bottom-title_bold">{{ state.subtitleB }}</div></div><div><div style="width: 18px"></div><div class="bottom-title_think">{{ state.timeRangB }}</div></div></div><!-- echarts图表 --><div class="chart-info"><EChart:option="state.queryType != 'year' ? state.optionB : state.optionBYear":width="state.width":height="state.height"isClick/></div></div><!-- !!!!售后工单数统计!!!!!! --><div class="sales"><!-- 顶部标题 --><div class="top-title"><div><div>售后工单数统计</div><div @click="showDialogs(2)"></div></div><div @click="handleClickDetailC">详情</div></div><!-- 中部标题 --><div class="middle-title"><div class="hardware-bg"></div><div>{{ state.titleC }}</div></div><!-- echarts图表环形 --><div class="chart-info"><EChart:option="state.circleOptionC":width="state.width":height="state.height"isClick/></div><!-- 底部标题 --><div class="bottom-title"><div><div class="data-bg"></div><div class="bottom-title_bold">{{ state.subtitleC }}</div></div><div><div style="width: 18px"></div><div class="bottom-title_think">{{ state.timeRangC }}</div></div></div><!-- echarts图表 --><div class="chart-info"><EChart:option="state.queryType != 'year' ? state.optionC : state.optionCYear":width="state.width":height="state.height"isClick/></div></div><div class="up-time">数据更新时间：{{ store.state.updateTime }}</div></div><van-dialog v-model:show="state.show" title="" confirmButtonText="知道了"><div class="dialog-content"><divv-for="(item, index) in state.currentTipList":key="index"class="dia-cent">{{ item }}</div></div></van-dialog></div>
</template><script setup>
import { getCurrentInstance, onMounted, reactive, inject, ref } from "vue";
import TopTab from "../../component/top-tab.vue";
import EChart from "@/component/charts.vue";
import moment from "moment";
import {useRouter} from "vue-router";
import store from '@/store/index';// echart 初始化
const echarts = inject("ec");
const { proxy } = getCurrentInstance();
const router = useRouter();const tips = ref([{title: "售后工单渠道占比",list: ["「售后工单渠道占比」数据取自主服系统中售后服务工单表；","时间维度为分别为日（当日）、周（本周周一至当日）、月（本月1日至当日）、年（当年1月1日至当日）的出货总数量；","区分售后工单来源渠道，分别为车企、电商新零售、海外、公共配套；","饼状图统计各渠道同一时间维度下数量及占比情况；","柱状图统计各渠道同一时间维度下数量变化的趋势情况；",],},{title: "售后问题统计",list: ["「售后问题统计」数据取自主服系统售后服务工单表中状态为已完成的数据；","时间维度为分别为日（当日）、周（本周周一至当日）、月（本月1日至当日）、年（当年1月1日至当日）的工单总数量；","根据售后问题解决方案区分售后工单问题，分别为产品问题、安装问题、远程服务、检测无故障、其他；","工单问题类型为其他的表示该工单为填写解决方案；","饼状图统计各渠道同一时间维度下问题数量及占比情况；","柱状图统计各渠道同一时间维度下问题数量变化的趋势情况；",],},{title: "售后工单数统计",list: ["「售后工单数统计」数据取自主服系统售后服务工单表中状态为已完成的数据；","时间维度为分别为日（当日）、周（本周周一至当日）、月（本月1日至当日）、年（当年1月1日至当日）的工单总数量；","饼状图统计各渠道同一时间维度下售后工单数量在全部工单的占比情况；","柱状图统计各渠道同一时间维度下售后工单在全部工单的占比数量变化的趋势情况；",],},
]);const state = reactive({show: false,currentTipList: [],width: "100%",height: "240px",queryType: "day",eightWeek: {startTime: "",endTime: "",},currentYear: "",lastYear: "",year: moment().format("YYYY"),indexA: 0,indexB: 0,indexC: 0,titleA: "",subtitleA: "",timeRangA: "",titleB: "",subtitleB: "",timeRangB: "",titleC: "",subtitleC: "",timeRangC: "",optionA: {//日月周grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},tooltip: {trigger: "axis",confine: true,},legend: {x: "center",y: "bottom",// width: 60,itemWidth: 18, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 12,},selectedMode: true,},xAxis: [{type: "category",data: [],axisPointer: {type: "shadow",},axisTick: {show: false, // 隐藏刻度线},axisLine: {show: false,lineStyle: {color: "#A4A4A4", // 设置轴线的颜色，这里以红色为例},},axisLabel: {rotate: 35,interval: 0,textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],yAxis: [{type: "value",min: 0,// max: 10000,// interval: 2000,axisLabel: {formatter: "{value} ",textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],series: [],},optionAYear: {//年grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},tooltip: {trigger: "axis",confine: true,formatter: function (params) {console.log("state.currentYear=" + params.length);var res ="<div>时间：" +params[0].name +"</div><hr><div>" +state.lastYear +"：</div>";for (var i = 0; i < params.length; i++) {res +="<div>" +params[i].marker +params[i].seriesName +":" +params[i].data +"</div>";if (i == state.indexA) {res += "<hr><div>" + state.currentYear + "：</div>";}}return res;},},legend: {x: "center",y: "bottom",// width: 60,itemWidth: 18, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 12,},selectedMode: false,},xAxis: [{type: "category",data: [],axisPointer: {type: "shadow",},axisTick: {show: false, // 隐藏刻度线},axisLine: {show: false,lineStyle: {color: "#A4A4A4", // 设置轴线的颜色，这里以红色为例},},axisLabel: {rotate: 35,interval: 0,textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],yAxis: [{type: "value",min: 0,// max: 10000,// interval: 2000,axisLabel: {formatter: "{value} ",textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],series: [],},optionB: {//日月周grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},tooltip: {trigger: "axis",confine: true,},legend: {x: "center",y: "bottom",// width: 60,itemWidth: 18, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 12,},selectedMode: true,},xAxis: [{type: "category",data: [],axisPointer: {type: "shadow",},axisTick: {show: false, // 隐藏刻度线},axisLine: {show: false,lineStyle: {color: "#A4A4A4", // 设置轴线的颜色，这里以红色为例},},axisLabel: {rotate: 35,interval: 0,textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],yAxis: [{type: "value",min: 0,// max: 10000,// interval: 2000,axisLabel: {formatter: "{value} ",textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],series: [],},optionBYear: {//年grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},tooltip: {trigger: "axis",confine: true,formatter: function (params) {console.log("state.currentYear=" + params.length);var res ="<div>时间：" +params[0].name +"</div><hr><div>" +state.lastYear +"：</div>";for (var i = 0; i < params.length; i++) {res +="<div>" +params[i].marker +params[i].seriesName +":" +params[i].data +"</div>";if (i == state.indexB) {res += "<hr><div>" + state.currentYear + "：</div>";}}return res;},},legend: {x: "center",y: "bottom",// width: 60,itemWidth: 18, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 12,},selectedMode: false,},xAxis: [{type: "category",data: [],axisPointer: {type: "shadow",},axisTick: {show: false, // 隐藏刻度线},axisLine: {show: false,lineStyle: {color: "#A4A4A4", // 设置轴线的颜色，这里以红色为例},},axisLabel: {rotate: 35,interval: 0,textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],yAxis: [{type: "value",min: 0,// max: 10000,// interval: 2000,axisLabel: {formatter: "{value} ",textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],series: [],},optionC: {//日月周grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},tooltip: {trigger: "axis",confine: true,},legend: {x: "center",y: "bottom",// width: 60,itemWidth: 18, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 12,},selectedMode: true,},xAxis: [{type: "category",data: [],axisPointer: {type: "shadow",},axisTick: {show: false, // 隐藏刻度线},axisLine: {show: false,lineStyle: {color: "#A4A4A4", // 设置轴线的颜色，这里以红色为例},},axisLabel: {rotate: 35,interval: 0,textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],yAxis: [{type: "value",min: 0,// max: 10000,// interval: 2000,axisLabel: {formatter: "{value} ",textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],series: [],},optionCYear: {//年grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},tooltip: {trigger: "axis",confine: true,formatter: function (params) {console.log("state.currentYear=" + params.length);var res ="<div>时间：" +params[0].name +"</div><hr><div>" +state.lastYear +"：</div>";for (var i = 0; i < params.length; i++) {res +="<div>" +params[i].marker +params[i].seriesName +":" +params[i].data +"</div>";if (i == state.indexC) {res += "<hr><div>" + state.currentYear + "：</div>";}}return res;},},legend: {x: "center",y: "bottom",// width: 60,itemWidth: 18, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 12,},selectedMode: false,},xAxis: [{type: "category",data: [],axisPointer: {type: "shadow",},axisTick: {show: false, // 隐藏刻度线},axisLine: {show: false,lineStyle: {color: "#A4A4A4", // 设置轴线的颜色，这里以红色为例},},axisLabel: {rotate: 35,interval: 0,textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],yAxis: [{type: "value",min: 0,// max: 10000,// interval: 2000,axisLabel: {formatter: "{value} ",textStyle: {color: "#A4A4A4", // 文本颜色fontSize: 8, // 文本大小},},},],series: [],},circleOptionA: {tooltip: {trigger: "item",confine: true,},grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},legend: {top: "80%",left: "center",// width: 60,itemWidth: 17, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 10,},},series: [{name: "",type: "pie",radius: ["40%", "55%"], //环形图的大小center: ["50%", "40%"], //环形图位置// adjust the start and end anglestartAngle: 180,endAngle: 360,data: [],},],},circleOptionB: {tooltip: {trigger: "item",confine: true,},grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},legend: {top: "80%",left: "center",// width: 60,itemWidth: 17, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 10,},},series: [{name: "",type: "pie",radius: ["40%", "55%"], //环形图的大小center: ["50%", "40%"], //环形图位置// adjust the start and end anglestartAngle: 180,endAngle: 360,data: [],},],},circleOptionC: {tooltip: {trigger: "item",confine: true,},grid: {top: "16px",left: "16px",right: "16px",bottom: "32px",containLabel: true,},legend: {top: "80%",left: "center",// width: 60,itemWidth: 17, //图例长度itemHeight: 6, //图例宽度icon: "roundRect",textStyle: {//图例文字color: "#000000",fontSize: 10,},},series: [{name: "",type: "pie",radius: ["40%", "55%"], //环形图的大小center: ["50%", "40%"], //环形图位置// adjust the start and end anglestartAngle: 180,endAngle: 360,data: [],},],},
});// 问号弹出框
const showDialogs = (val) => {state.show = true;state.currentTipList = tips.value[val].list;
};const handleClickDateTab = (row) => {console.log(row);state.queryType = row.value;init();
};// 售后工单渠道占比
const getaftersaleChannelNum = () => {proxy.$H.post(proxy, proxy.$A.aftersaleChannelNum, {accessType: "web",data: state.queryType,}).then((res) => {if (state.queryType != "year") {//饼状图数据if (res.data.data.pieChart.length > 0) {state.circleOptionA.series[0].data = res.data.data.pieChart.map((item) => {return {name: item.key,value: item.value,};});}//柱状堆叠图//X轴数据if (res.data.data.list.length > 0) {state.optionA.xAxis[0].data = res.data.data.list.map((item) => {return item.date;});//serios的name集合let seriosNameList = [];state.optionA.series = [];for (let item of res.data.data.list) {for (let ite of item.channelList) {if (!seriosNameList.includes(ite.key)) {seriosNameList.push(ite.key);}}}console.log("长度为：" + seriosNameList.length);seriosNameList.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: "total",data: [],barWidth: "50%",// itemStyle: {//   normal: {//     color: {//       type: "linear",//       x: 0,//       y: 0,//       x2: 0,//       y2: 1,//       colorStops: [//         {//           offset: 0,//           color: "rgba(253,148,12,0.54)", // 柱子上部颜色//         },//         {//           offset: 1,//           color: "rgba(254,71,1,0.54)", // 柱子下部颜色//         },//       ],//       globalCoord: false, // 缺省值false//     },//   },// },};console.log(index);console.log("name=" + element);seriesObj.name = element;state.optionA.series.push(seriesObj);console.log(state.optionA.series);for (let item of res.data.data.list) {if (item.channelList.length > 0) {if (item.channelList.some((ite) => ite.key == element)) {for (let it of item.channelList) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});}} else {//年的数据//饼状图数据if (res.data.data.pieChart.length > 0) {state.circleOptionA.series[0].data = res.data.data.pieChart.map((item) => {return {name: item.key,value: item.value,};});}//serios的name集合let seriosNameListA = []; //去年的let seriosNameListB = []; //今年的state.optionAYear.series = [];//柱状堆叠图//X轴数据if (res.data.data.yearDimensionRespList.length > 0) {state.optionAYear.xAxis[0].data = res.data.data.yearDimensionRespList.map((item) => {return item.month + "月";});for (let item of res.data.data.yearDimensionRespList) {state.currentYear = item.currentYearPair.key;state.lastYear = item.lastYearPair.key;for (let ite of item.lastYearPair.value) {if (!seriosNameListA.includes(ite.key)) {seriosNameListA.push(ite.key);}}for (let ite of item.currentYearPair.value) {if (!seriosNameListB.includes(ite.key)) {seriosNameListB.push(ite.key);}}}console.log(seriosNameListA);console.log(seriosNameListB);//去年堆叠图state.indexA = seriosNameListA.length - 1; //tooltip 转换的下标seriosNameListA.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: state.lastYear,data: [],// barWidth: "50%",};console.log(index);console.log("name=" + element);seriesObj.name = element;state.optionAYear.series.push(seriesObj);console.log(state.optionAYear.series);for (let item of res.data.data.yearDimensionRespList) {if (item.lastYearPair.value.length > 0) {if (item.lastYearPair.value.some((ite) => ite.key == element)) {for (let it of item.lastYearPair.value) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});//今年堆叠图seriosNameListB.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: state.currentYear,data: [],// barWidth: "50%",// itemStyle: {//   normal: {//     color: {//       type: "linear",//       x: 0,//       y: 0,//       x2: 0,//       y2: 1,//       colorStops: [//         {//           offset: 0,//           color: "rgba(253,148,12,0.54)", // 柱子上部颜色//         },//         {//           offset: 1,//           color: "rgba(254,71,1,0.54)", // 柱子下部颜色//         },//       ],//       globalCoord: false, // 缺省值false//     },//   },// },};console.log(index);console.log("name=" + element);seriesObj.name = element;state.optionAYear.series.push(seriesObj);console.log(state.optionAYear.series);for (let item of res.data.data.yearDimensionRespList) {if (item.currentYearPair.value.length > 0) {if (item.currentYearPair.value.some((ite) => ite.key == element)) {for (let it of item.currentYearPair.value) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});}}//标题变更const today = moment();let startDate = "";let endDate = "";if (state.queryType == "day") {state.titleA = `${moment().subtract(1, "days").format("YYYY-MM-DD")}售后工单渠道数量及占比`;state.subtitleA = `近7日售后工单渠道数量变化`;startDate = res.data.data.list[0].date;endDate = res.data.data.list[res.data.data.list.length - 1].date;state.timeRangA = `(${startDate}~${endDate})`;} else if (state.queryType == "week") {state.titleA = `本周(${res.data.data.list[res.data.data.list.length - 1].date})售后工单渠道数量及占比`;state.subtitleA = `近8周售后工单渠道数量变化`;state.timeRangA = `(${state.eightWeek.startTime}~${state.eightWeek.endTime})`;} else if (state.queryType == "month") {state.titleA = `售后工单渠道数量及占比`;state.subtitleA = `近6个售后工单渠道数量变化`;startDate = res.data.data.list[0].date;endDate = res.data.data.list[res.data.data.list.length - 1].date;state.timeRangA = `(${startDate}~${endDate})`;} else {state.titleA = `${state.year}售后工单渠道数量及占比`;state.subtitleA = "售后工单渠道数量对比变化";}});
};
// 售后问题统计
const getaftersaleFaultNum = () => {proxy.$H.post(proxy, proxy.$A.aftersaleFaultNum, {accessType: "web",data: state.queryType,}).then((res) => {if (state.queryType != "year") {//饼状图数据if (res.data.data.pieChart.length > 0) {state.circleOptionB.series[0].data = res.data.data.pieChart.map((item) => {return {name: item.key,value: item.value,};});}//柱状堆叠图//X轴数据if (res.data.data.list.length > 0) {state.optionB.xAxis[0].data = res.data.data.list.map((item) => {return item.date;});//serios的name集合let seriosNameList = [];state.optionB.series = [];for (let item of res.data.data.list) {for (let ite of item.channelList) {if (!seriosNameList.includes(ite.key)) {seriosNameList.push(ite.key);}}}console.log("长度为：" + seriosNameList.length);seriosNameList.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: "total",data: [],barWidth: "50%",// itemStyle: {//   normal: {//     color: {//       type: "linear",//       x: 0,//       y: 0,//       x2: 0,//       y2: 1,//       colorStops: [//         {//           offset: 0,//           color: "rgba(253,148,12,0.54)", // 柱子上部颜色//         },//         {//           offset: 1,//           color: "rgba(254,71,1,0.54)", // 柱子下部颜色//         },//       ],//       globalCoord: false, // 缺省值false//     },//   },// },};console.log(index);console.log("name=" + element);seriesObj.name = element;state.optionB.series.push(seriesObj);console.log(state.optionB.series);for (let item of res.data.data.list) {if (item.channelList.length > 0) {if (item.channelList.some((ite) => ite.key == element)) {for (let it of item.channelList) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});}} else {//年的数据//饼状图数据if (res.data.data.pieChart.length > 0) {state.circleOptionB.series[0].data = res.data.data.pieChart.map((item) => {return {name: item.key,value: item.value,};});}//serios的name集合let seriosNameListA = []; //去年的let seriosNameListB = []; //今年的state.optionBYear.series = [];//柱状堆叠图//X轴数据if (res.data.data.yearDimensionRespList.length > 0) {state.optionBYear.xAxis[0].data = res.data.data.yearDimensionRespList.map((item) => {return item.month + "月";});for (let item of res.data.data.yearDimensionRespList) {state.currentYear = item.currentYearPair.key;state.lastYear = item.lastYearPair.key;for (let ite of item.lastYearPair.value) {if (!seriosNameListA.includes(ite.key)) {seriosNameListA.push(ite.key);}}for (let ite of item.currentYearPair.value) {if (!seriosNameListB.includes(ite.key)) {seriosNameListB.push(ite.key);}}}console.log(seriosNameListA);console.log(seriosNameListB);//去年堆叠图state.indexB = seriosNameListA.length - 1; //tooltip 转换的下标seriosNameListA.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: state.lastYear,data: [],// barWidth: "50%",};console.log(index);console.log("name=" + element);seriesObj.name = element;state.optionBYear.series.push(seriesObj);console.log(state.optionBYear.series);for (let item of res.data.data.yearDimensionRespList) {if (item.lastYearPair.value.length > 0) {if (item.lastYearPair.value.some((ite) => ite.key == element)) {for (let it of item.lastYearPair.value) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});//今年堆叠图seriosNameListB.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: state.currentYear,data: [],// barWidth: "50%",// itemStyle: {//   normal: {//     color: {//       type: "linear",//       x: 0,//       y: 0,//       x2: 0,//       y2: 1,//       colorStops: [//         {//           offset: 0,//           color: "rgba(253,148,12,0.54)", // 柱子上部颜色//         },//         {//           offset: 1,//           color: "rgba(254,71,1,0.54)", // 柱子下部颜色//         },//       ],//       globalCoord: false, // 缺省值false//     },//   },// },};console.log(index);console.log("name=" + element);seriesObj.name = element;state.optionBYear.series.push(seriesObj);console.log(state.optionBYear.series);for (let item of res.data.data.yearDimensionRespList) {if (item.currentYearPair.value.length > 0) {if (item.currentYearPair.value.some((ite) => ite.key == element)) {for (let it of item.currentYearPair.value) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});}}//标题变更const today = moment();let startDate = "";let endDate = "";if (state.queryType == "day") {state.titleB = `${moment().subtract(1, "days").format("YYYY-MM-DD")}售后问题数量及占比`;state.subtitleB = `近7日售后问题数量变化`;startDate = res.data.data.list[0].date;endDate = res.data.data.list[res.data.data.list.length - 1].date;state.timeRangB = `(${startDate}~${endDate})`;} else if (state.queryType == "week") {state.titleB = `本周(${res.data.data.list[res.data.data.list.length - 1].date})售后问题数量及占比`;state.subtitleB = `近8周售后问题数量变化`;state.timeRangB = `(${state.eightWeek.startTime}~${state.eightWeek.endTime})`;} else if (state.queryType == "month") {state.titleB = `本月售后问题数量及占比`;state.subtitleB = `近6个售后问题数量变化`;startDate = res.data.data.list[0].date;endDate = res.data.data.list[res.data.data.list.length - 1].date;state.timeRangB = `(${startDate}~${endDate})`;} else {state.titleB = `${state.year}售后问题数量及占比`;state.subtitleB = "售后问题数量对比变化";}});
};
// 售后工单数统计
const getaftersaleAndInstallOrderNum = () => {proxy.$H.post(proxy, proxy.$A.aftersaleAndInstallOrderNum, {accessType: "web",data: state.queryType,}).then((res) => {if (state.queryType != "year") {//饼状图数据if (res.data.data.pieChart.length > 0) {state.circleOptionC.series[0].data = res.data.data.pieChart.map((item) => {return {name: item.key,value: item.value,};});}//柱状堆叠图//X轴数据if (res.data.data.list.length > 0) {state.optionC.xAxis[0].data = res.data.data.list.map((item) => {return item.date;});//serios的name集合let seriosNameList = [];state.optionC.series = [];for (let item of res.data.data.list) {for (let ite of item.channelList) {if (!seriosNameList.includes(ite.key)) {seriosNameList.push(ite.key);}}}console.log("长度为：" + seriosNameList.length);seriosNameList.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: "total",data: [],barWidth: "50%",// itemStyle: {//   normal: {//     color: {//       type: "linear",//       x: 0,//       y: 0,//       x2: 0,//       y2: 1,//       colorStops: [//         {//           offset: 0,//           color: "rgba(253,148,12,0.54)", // 柱子上部颜色//         },//         {//           offset: 1,//           color: "rgba(254,71,1,0.54)", // 柱子下部颜色//         },//       ],//       globalCoord: false, // 缺省值false//     },//   },// },};console.log(index);console.log("name=" + element);seriesObj.name = element;state.optionC.series.push(seriesObj);console.log(state.optionC.series);for (let item of res.data.data.list) {if (item.channelList.length > 0) {if (item.channelList.some((ite) => ite.key == element)) {for (let it of item.channelList) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});}} else {//年的数据//饼状图数据if (res.data.data.pieChart.length > 0) {state.circleOptionC.series[0].data = res.data.data.pieChart.map((item) => {return {name: item.key,value: item.value,};});}//serios的name集合let seriosNameListA = []; //去年的let seriosNameListB = []; //今年的state.optionCYear.series = [];//柱状堆叠图//X轴数据if (res.data.data.yearDimensionRespList.length > 0) {state.optionCYear.xAxis[0].data = res.data.data.yearDimensionRespList.map((item) => {return item.month + "月";});for (let item of res.data.data.yearDimensionRespList) {state.currentYear = item.currentYearPair.key;state.lastYear = item.lastYearPair.key;for (let ite of item.lastYearPair.value) {if (!seriosNameListA.includes(ite.key)) {seriosNameListA.push(ite.key);}}for (let ite of item.currentYearPair.value) {if (!seriosNameListB.includes(ite.key)) {seriosNameListB.push(ite.key);}}}console.log(seriosNameListA);console.log(seriosNameListB);//去年堆叠图state.indexC = seriosNameListA.length - 1; //tooltip 转换的下标seriosNameListA.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: state.lastYear,data: [],// barWidth: "50%",};console.log(index);console.log("name=" + element);seriesObj.name = element;state.optionCYear.series.push(seriesObj);console.log(state.optionCYear.series);for (let item of res.data.data.yearDimensionRespList) {if (item.lastYearPair.value.length > 0) {if (item.lastYearPair.value.some((ite) => ite.key == element)) {for (let it of item.lastYearPair.value) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});//今年堆叠图seriosNameListB.forEach((element, index) => {let seriesObj = {name: "",type: "bar",stack: state.currentYear,data: [],// barWidth: "50%",// itemStyle: {//   normal: {//     color: {//       type: "linear",//       x: 0,//       y: 0,//       x2: 0,//       y2: 1,//       colorStops: [//         {//           offset: 0,//           color: "rgba(253,148,12,0.54)", // 柱子上部颜色//         },//         {//           offset: 1,//           color: "rgba(254,71,1,0.54)", // 柱子下部颜色//         },//       ],//       globalCoord: false, // 缺省值false//     },//   },// },};console.log(state.indexC);console.log("name=" + element);seriesObj.name = element;state.optionCYear.series.push(seriesObj);console.log(state.optionCYear.series);for (let item of res.data.data.yearDimensionRespList) {if (item.currentYearPair.value.length > 0) {if (item.currentYearPair.value.some((ite) => ite.key == element)) {for (let it of item.currentYearPair.value) {if (it.key == element) {seriesObj.data.push(it.value);}}} else {seriesObj.data.push(0);}} else {seriesObj.data.push(0);}}});}}// 标题变更const today = moment();let startDate = "";let endDate = "";if (state.queryType == "day") {state.titleC = `${moment().subtract(1, "days").format("YYYY-MM-DD")}售后上门工单数及占比`;state.subtitleC = `近7日售后上门工单数量变化`;startDate = res.data.data.list[0].date;endDate = res.data.data.list[res.data.data.list.length - 1].date;state.timeRangC = `(${startDate}~${endDate})`;} else if (state.queryType == "week") {state.titleC = `本周(${res.data.data.list[res.data.data.list.length - 1].date})售后上门工单数及占比`;state.subtitleC = `近8周售后上门工单数量变化`;state.timeRangC = `(${state.eightWeek.startTime}~${state.eightWeek.endTime})`;} else if (state.queryType == "month") {state.titleC = `本月售后上门工单数及占比`;state.subtitleC = `近6个售后上门工单数量变化`;startDate = res.data.data.list[0].date;endDate = res.data.data.list[res.data.data.list.length - 1].date;state.timeRangC = `(${startDate}~${endDate})`;} else {state.titleC = `${state.year}售后上门工单数及占比`;state.subtitleC = "售后上门工单数量对比变化";}});
};
// 售后问题统计
const handleClickDetailB = () => {router.push({ name: "problem-statistics" });
};
// 售后工单数统计
const handleClickDetailC = () => {router.push({ name: "visit-statistics" });
};
// 初始化
const init = () => {getaftersaleChannelNum();getaftersaleFaultNum();getaftersaleAndInstallOrderNum();
};
onMounted(() => {const today = moment();// 计算前八周的周一的日期const eightWeeksAgo = today.clone().subtract(7, "weeks");const mondayOfEightWeeksAgo = eightWeeksAgo.day(1); // 1 represents Mondaystate.eightWeek.startTime = mondayOfEightWeeksAgo.format("MM/DD");state.eightWeek.endTime = today.format("MM/DD");init();
});
</script><style lang="less" scoped>
@import "./index.less";
.dialog-content {max-height: 60vh;overflow-y:scroll;padding: 20px;.dia-cent {margin-bottom: 3px;}
}
</style>