vue3 根据接口返回数据循环遍历出echarts图展示

这是给自己写的  记忆不太好

展示效果

 

 

视图代码

<div>    //按钮部分
  <div>分析维度：</div>
    <div class="margin-top">
      <div>
       <el-button
         v-for="(item, index) in buttons"
        :key="index"
        :disabled="item.disabled"
       @click="btn(item)"
       >{{ item.name }}</el-button
        >
     </div>
  </div>
</div>
// 图展示区域
<div class="flex" style="height: 25vh; overflow: auto">
    <div :class="areas.length == 0 ? 'meiyoushuju' : 'youshuju'">
              暂无数据
     </div>
     <div v-for="(item, index) in areas" :key="index">
       <div
          class="chartsis chart"
          @click="echarts(item, index)"
          :class="subscript == index ? 'background-color' : ''"
           ></div>
         <span class="span">{{ item.groupKeyDisplay }}</span>
     </div>
  </div>

引入对应的echarts

import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
} from "echarts/components";

功能部分

export default defineComponent({
    setup(){
    //  对应的点击按钮
    let buttons = ref([
      { name: "国际区域", disabled: false, groupName: 0 },
      { name: "国家", disabled: false, groupName: 1 },
      { name: "国内大区", disabled: false, groupName: 2 },
      { name: "省", disabled: false, groupName: 3 },
      { name: "品牌", disabled: false, groupName: 7 },
      { name: "产品类别", disabled: false, groupName: 8 },
      { name: "渠道", disabled: false, groupName: 5 },
      { name: "部门", disabled: false, groupName: 6 },
      { name: "业务员", disabled: false, groupName: 4 },
    ]);
    // 存储点击区域后的数据
    let areas = ref([]);
return{
buttons ,
areas 
}


methods:{
    // 点击对应区域显示该区域的信息图
    btn(item: any) {
      let datas = {
        groupWhere: "",
        groupName: item.groupName,
        month: this.TimeData.month,
        year: this.TimeData.year,
      };
      if (this.panduan == null) {
        ElMessage.error("请先选中查询日期");
      } else {
        this.textSize = item.name;
        item.disabled = true;
        this.lists.push(item.name);
        // 仪表盘
        groupreach(datas).then((res) => {
          this.areas = res.data;
          this.$nextTick(() => { //这里是页面加载完后进行数据处理 数据更新后会更新到视图上
            let roseCharts = document.getElementsByClassName("chartsis"); // 对应地使用ByClassName5
            echarts.use([
              TitleComponent,
              TooltipComponent,
              GridComponent,
              PieChart,
              LegendComponent,
              ToolboxComponent,
              CanvasRenderer,
            ]);
            for (let i = 0; i < this.areas.length; i++) {
              let myEchart = echarts.init(roseCharts[i]);
              myEchart.setOption({
                series: [
                  {
                    type: "gauge",
                    axisLine: {
                      lineStyle: {
                        width: 5,
                        color: [
                          [0.3, "#fd666d"],
                          [0.7, "#67e0e3"],
                          [1, "#37a2da"],
                        ],
                      },
                    },
                    pointer: {
                      itemStyle: {
                        color: "auto",
                      },
                    },
                    axisTick: {
                      distance: -5,
                      length: 5,
                      lineStyle: {
                        color: "#fff",
                        width: 2,
                      },
                    },
                    splitLine: {
                      distance: -5,
                      length: 5,
                      lineStyle: {
                        color: "#fff",
                        width: 4,
                      },
                    },
                    axisLabel: {
                      color: "auto",
                      distance: 7,
                      fontSize: 8,
                    },
                    detail: {
                      valueAnimation: true,
                      formatter:
                        "达成率" +
                        (res.data[i].completeRate != 0
                          ? (res.data[i].completeRate * 100).toFixed(3)
                          : res.data[i].completeRate) +
                        "%",
                      color: "auto",
                      fontSize: 8,
                    },
                    data: [
                      {
                        value:
                          res.data[i].completeRate != 0
                            ? (res.data[i].completeRate * 100).toFixed(3)
                            : res.data[i].completeRate,
                      },
                    ],
                  },
                ],
              });
            }
          });

          // console.log(this.areas, this.lists);
        });
      }
    },
}
})