echarts绑定数据

后端返回的数据格式是这样的：

 全都是数组，而我直接绑定柱状图就会默认从一月份开始，绑不到现在的四月份

请教了别人才知道，这种情况需要前端去处理数据，但是这个处理数据的过程比较复杂，我这里就先放一个demo演示一下吧

let date = [4,8,12],accuracy=[42,20,19],complianceRate=[10,20,30] ； // 模拟后端返回的类型

let dateReset = [],accuracyReset=[],complianceRateReset=[]； //自己处理后的数据
 for(let i=1;i<=12;i++){
     let flag = false
     let index //获取date中匹配时下标
     for(let j=0;j<date.length;j++){
       if(i==date[j]){
          flag=true
          index=j
       }
     }
     if(flag){
        // 匹配到 拿后端返回的数据
        dateReset.push(date[index])
        accuracyReset.push(accuracy[index])
        complianceRateReset.push(complianceRate[index])
     }else{
        // 匹配不到 塞0进去
        dateReset.push(i)
        accuracyReset.push(0)
        complianceRateReset.push(0)
      }
 }

具体的代码演示：

<!-- 手卫生情况 -->
     <div class="section-item section-item-2" style="margin-top: 30px">
          <div class="headImg">
               <div class="d-flex pt-2 pl-2">
                    <span style="color: #5cd9e8"></span>
                    <div class="d-flex">
                         <span class="fs-xl text mx-2" style=" font-size: 17px; margin-top: 4px; margin-left: 20px; ">手部卫生执行</span>
                         <dv-decoration-1 style=" width: 1.25rem; height: 0.25rem; position: relative; top: -0.0375rem; " />
                    </div>
               </div>
            </div>
            <div class="section-item-sub-title">
                <span>依从率/正确率情况</span>
            </div>
            <div class="section-item-content">
                <span v-if="handHygiene.loading" class="loader"></span>
                <div v-else class="div-echarts" ref="chartHygienismDetail" style="height: 200px; width: 100%; margin: auto"></div>
                <el-dialog v-model="handleCompVisible" width="90%" :before-close="handleClose" :center="false" top="1vh" :append-to-body="true" :destroy-on-close="true">
                  <!-- 在弹框中展示的内容 -->
                  <HandCompliance :handData="handleCompData"></HandCompliance>
                </el-dialog>
           </div>
     </div>

import HandCompliance from "@/views/Basic/HandCompliance.vue";

export default {
    data (){
        return {
            handHygiene: {
                loading: true,
                data: {
                  accuracy: [], // 正确率
                  complianceRate: [], // 依从率
                },
             },
             handleCompVisible: false,
             handleCompData: "", //保存查询条件
        }
    },
    components: { HandCompliance},
    mounted () {
        this.BindHandHygiene();
    },
    methods:{
     /**
     * 手卫生情况
     */
        async BindHandHygiene() {
          Req.GetHandHygiene({}).then((res) => {
            if (res?.data) {
              this.handHygiene.loading = false;
              this.handHygiene.data = res.data;
              let date = this.handHygiene.data.date;
              let accuracy = this.handHygiene.data.accuracy;
              let complianceRate = this.handHygiene.data.complianceRate;
              let dateReset = [], accuracyReset = [], complianceRateReset = [] //自己处理后的数据
              for (let i = 1; i <= 12; i++) {
                let flag = false
                let index //获取date中匹配时下标
                for (let j = 0; j < date.length; j++) {
                  if (i == date[j]) {
                    flag = true
                    index = j
                  }
                }
                if (flag) {
                  // 匹配到 拿后端返回的数据
                  dateReset.push(date[index])
                  accuracyReset.push(accuracy[index])
                  complianceRateReset.push(complianceRate[index])
                } else {
                  // 匹配不到 塞0进去
                  dateReset.push(i)
                  accuracyReset.push('')
                  complianceRateReset.push('')
                }
              }
              this.handHygiene.data.date = dateReset;
              this.handHygiene.data.accuracy = accuracyReset;
              this.handHygiene.data.complianceRate = complianceRateReset;
         
              setTimeout(() => {
                let legendData = ["依从率", "正确率"];
                let xAxisData = ["一","二","三","四","五","六", "七","八","九", "十", "十一","十二"];
                let seriesData = [
                  {
                    name: "依从率",
                    type: "bar",
                    barWidth: 7,
                    itemStyle: {
                      normal: {
                        color: "#C22C77",
                      },
                    },
                    label: {
                      show: true,
                      position: "top",
                      textStyle: {
                        fontSize: "10px",
                        color: "#7DE8FF",
                      },
                      formatter: function (data) {
                        return Math.round(data.value);
                      },
                    },
                    tooltip: {
                      valueFormatter: function (value) {
                        return value;
                      },
                    },
                    data: res.data.complianceRate,
                  },
                  {
                    name: "正确率",
                    type: "bar",
                    barWidth: 7,
                    itemStyle: {
                      normal: {
                        color: "#A6DB1B",
                      },
                    },

                    label: {
                      show: true,
                      position: "top",
                      textStyle: {
                        fontSize: "10px",
                        color: "#7DE8FF",
                      },
                      formatter: function (data) {
                        return Math.round(data.value);
                      },
                    },
                    tooltip: {
                      valueFormatter: function (value) {
                        return value;
                      },
                    },
                    data: res.data.accuracy,
                  },
                ];
                const chartHandComp = echarts.init(this.$refs.chartHygienismDetail);
                chartHandComp.on("click", (params) => {
                  console.log(params);
                  this.handleCompVisible = true;
                  let handObj = {};
                  handObj.seriesName = params.seriesName;
                  let num = Math.round(params.value);
                  handObj.value = num;
                  console.log(handObj);
                  this.handleCompData = handObj;
                });
                mainEchart.LoadBarRate(
                  this.$refs.chartHygienismDetail,
                  legendData,
                  xAxisData,
                  seriesData
                );
              }, 1000);
            }
          });
        },
        }
    }

完~