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">
        <div
            v-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 angle
        startAngle: 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 angle
        startAngle: 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 angle
        startAngle: 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 Monday
  state.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>

3.效果
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/566264.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

鸿蒙 harmonyos 线程 并发 总结 async promise Taskpool woker（三）多线程并发 Worker

鸿蒙 harmonyos 线程 并发 总结 async promise Taskpool woker（三）多线程并发 Worker

Worker Worker是与主线程并行的独立线程。创建Worker的线程称之为宿主线程&#xff0c;Worker自身的线程称之为Worker线程。创建Worker传入的url文件在Worker线程中执行&#xff0c;可以处理耗时操作但不可以直接操作UI。 Worker主要作用是为应用程序提供一个多线程的运行环境…
阅读更多...
C++：特殊成员函数

C++：特殊成员函数

构造函数、析构函数和拷贝构造函数是C类中的三种特殊成员函数&#xff0c;它们分别用于对象的初始化、清理和拷贝操作。 1.构造函数&#xff08;Constructor&#xff09;&#xff1a;构造函数在对象创建时自动调用&#xff0c;用于初始化对象的成员变量。它的名称与类名相同&a…
阅读更多...
Robbins-Monro(RM)算法【随机近似】

Robbins-Monro(RM)算法【随机近似】

强化学习笔记 主要基于b站西湖大学赵世钰老师的【强化学习的数学原理】课程&#xff0c;个人觉得赵老师的课件深入浅出&#xff0c;很适合入门. 第一章 强化学习基本概念 第二章 贝尔曼方程 第三章 贝尔曼最优方程 第四章 值迭代和策略迭代 第五章 强化学习实践—GridWorld 第…
阅读更多...
Unity3d的海盗王地图

Unity3d的海盗王地图

一直以来&#xff0c;都想将海盗王的地图搬到手游unity3d上面。 经过漫长时间的研究&#xff0c;终于实现了当初的想法。
阅读更多...
「最没存在感」港姐冠军入行10年不受捧，与相恋4年男友分手

「最没存在感」港姐冠军入行10年不受捧，与相恋4年男友分手

昨日&#xff08;4月21日&#xff09;一众歌手艺人齐集红馆举行《全港运动全城跃动第九届全港运动会开幕礼》录影&#xff0c;TVB亦派出不少的歌手艺人小花表演。其中一部分是邵珮诗与黄婧灵大跳拉丁舞&#xff0c;同属身材丰满的二人跳起上来视觉极夸张。 而平常经常露出姣好身…
阅读更多...
《庆余年》开发衍生短剧，阅文迈向短剧市场的一大步

《庆余年》开发衍生短剧，阅文迈向短剧市场的一大步

《庆余年》竟然也要拍短剧了。 据悉&#xff0c;《庆余年》衍生短剧《庆余年之少年风流》预计将于5月1日开机&#xff0c;等了五年都没等到《庆余年2》&#xff0c;没想到先等到了衍生短剧。 由组讯消息可知&#xff0c;《庆余年之少年风流》讲述的是少年庆帝李云潜“扮猪吃老…
阅读更多...
小游戏：贪吃蛇

小游戏：贪吃蛇

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;贪吃蛇 &#x1f337;追光的人&#xff0c;终会万丈光芒 目录 &#x1f3dd;1.头文件&#xff1a; &#x1f3dd;2.实现文件&#xff1a; &#x1f3dd;3.测试文件 &#xff1a; 前言&#…
阅读更多...
探索 去中心化的Web3.0

探索 去中心化的Web3.0

随着区块链技术的日益成熟和普及&#xff0c;Web3&#xff08;Web 3.0&#xff09;已经成为一个无法忽视的趋势。Web3不仅仅是一个技术概念&#xff0c;更是一个去中心化、透明、用户数据拥有权归还给用户的互联网新时代。在这篇文章中&#xff0c;我们将深入探讨Web3技术的核心…
阅读更多...
uniApp项目总结

uniApp项目总结

前言 大半年的时间&#xff0c;项目从秋天到春天&#xff0c;从管理后台到APP再到数据大屏&#xff0c;技术栈从vue3到uniApp再到nuxt3&#xff0c;需求不停的改&#xff0c;注释掉代码都快到项目总体的三分之一。 一&#xff0c;项目技术栈分析 1.1 项目框架 当前&#xf…
阅读更多...
30V-STM32设计项目

30V-STM32设计项目

30V-STM32设计 一、项目描述 (已验证) 基于STM32c8t6芯片设计的开发板&#xff0c;支持4-30V宽电压输入&#xff0c;串口模式自动下载功能&#xff0c;支持串口和STlink&#xff0c;方式下载程序 二、原理图介绍 电源电路采用了DCDCLDO电路&#xff0c;如果是外接DC头供电的话&…
阅读更多...
坚蛋运动新质生产力实践——“AI健康”战略引领产品和服务创新

坚蛋运动新质生产力实践——“AI健康”战略引领产品和服务创新

进入AI时代&#xff0c;全球互联网企业均开启了以大模型及其应用为代表的第四次工业革命的激烈竞赛。坚蛋运动已在全国范围内布局300门店&#xff0c;预计实现2024年500、2025年1000门店&#xff0c;作为国内运动健康产业的头部品牌&#xff0c;坚蛋运动率先提出并推动“AI健康…
阅读更多...
广州大学《软件工程》实验报告三软件设计

广州大学《软件工程》实验报告三软件设计

广州大学学生实验报告&#xff08;三&#xff09; 开课学院及实验室&#xff1a; 学院 年级/专业/班 姓名 学号 实验课程名称 软件工程导论实验 成绩 实验项目名称 软件设计 指导老师 一、实验目的 掌握软件设计建模技术&#xff0c;能够撰写软件设计文…
阅读更多...
判断经济形势最常用的统计指标有哪些

判断经济形势最常用的统计指标有哪些

分析判断经济形势常常围绕以下四大目标进行&#xff1a;经济增长、充分就业、物价稳定、国际收支平衡。这四大目标相互联系、相互影响、相互制约&#xff0c;宏观调控的目的在于恰当处理这四方面的关系&#xff0c;寻求一个最佳平衡点。通过全面观察这四大指标&#xff0c;可以…
阅读更多...
postCss基本介绍

postCss基本介绍

&#x1f31f;什么是postCss&#xff1f; 我个人的理解postCss就是css界的babel&#xff0c;它提供一个过程&#xff0c;而在这个过程中&#xff0c;去干什么就是你自己的事情&#xff0c;所以很多人写插件&#xff0c;去做代码转换&#xff0c;或者兼容等等。 babel 提供过程 …
阅读更多...
新的全息技术突破计算障碍

新的全息技术突破计算障碍

一种突破性的方法利用基于Lohmann透镜的衍射模型实时创建计算机生成全息图&#xff08;CGH&#xff09;&#xff0c;在保持3D可视化质量的同时&#xff0c;大大降低了计算负荷要求。 全息显示为制作逼真的三维图像提供了一条令人兴奋的途径&#xff0c;这种图像给人以连续深度…
阅读更多...
Pytest精通指南（26）钩子函数-依赖执行（pytest-dependency）

Pytest精通指南（26）钩子函数-依赖执行（pytest-dependency）

文章目录 前言应用场景插件安装注意事项参数分析函数名称依赖实现方式类下函数路径实现方式通过设置别名指定依赖定义依赖范围作用于类作用于模块作用于包作用于会话拓展-非常重要 前言 pytest-dependency的主要用途是确保测试用例按照指定的依赖关系顺序执行。 在一个复杂的测…
阅读更多...
R语言绘制动态网络图Network教程WGCNA

R语言绘制动态网络图Network教程WGCNA

今天分享的笔记是使用NetworkD3对WGCNA的共表达网络进行可视化&#xff0c;创建交互式动态网络图&#xff0c;展示基因之间的相互关系&#xff0c;可以用于转录组或者其他调控网络展示。 加权基因共表达网络分析 (WGCNA, Weighted correlation network analysis)是用来描述不同…
阅读更多...
数值分析复习：Richardson外推和Romberg算法

数值分析复习：Richardson外推和Romberg算法

文章目录 Richardson外推Romberg&#xff08;龙贝格&#xff09;算法 本篇文章适合个人复习翻阅&#xff0c;不建议新手入门使用 本专栏&#xff1a;数值分析复习 的前置知识主要有&#xff1a;数学分析、高等代数、泛函分析 本节继续考虑数值积分问题 Richardson外推 命题&a…
阅读更多...
Python环境找不到解决方法

Python环境找不到解决方法

Python环境找不到 打开设置&#xff1a;Ctrl Alt S 添加Local Interpreter... 打开System Interpreter&#xff0c;找到本地安装的Python.exe路径&#xff0c;然后一路点OK Trust Project 如果打开工程时&#xff0c;出现如下对话框&#xff0c;请勾选 Trust projects in ...&…
阅读更多...
CDN技术：全球化的数字内容快速分发系统

CDN技术：全球化的数字内容快速分发系统

CDN技术&#xff1a;全球化的数字内容快速分发系统 在今天的互联网世界中&#xff0c;内容分发网络&#xff08;CDN&#xff09;技术起着至关重要的作用。它通过全球分布的服务器网络&#xff0c;快速、安全地将内容送达世界各地的用户&#xff0c;极大地提升了网页加载速度和…
阅读更多...
最新文章

Copyright @ 2022~2023