使用Vue3，循环输出echarts图表内容。

使用Vue3，循环输出echarts图表内容。

---

前言

假如我们使用的图表一样，数据不同，总不能吧它们分开写配置项，代码又多，还不方便维护，配置项还得重新写，非常麻烦，这时候我们就要用到循环了。

---

一、首先循环数组,给id类名加一个index，让他们的id分离，不一致。

            
{{ item.name }}
            

二、配置项

//函数
    const Access = () => {
      for (let i = 0; i < 8; i++) { //循环数组的长度，我这边是直接方便写死了
        let chartDom = document.getElementById("Access" + i);   给他们的dom加上i，分离

        let myChart = echarts.init(chartDom);        
        let option;
        option = {
          title: {
            top: "47%",
            text: [`${ArrAy.value[i].ok}/${ArrAy.value[i].all}`], //使用模板字符串，循环添加他们的数据
            left: "42%",
            textAlign: "center",
            textStyle: {
              color: "#ffffff",
              fontSize: "12",
              fontWeight: "bold",
            },
          },
          color: ["#00B7B4", "#0B3157"],
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "0%",
            left: "center",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["60%", "80%"],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              label: {
                show: false,
                position: "center",
                normal: {
                  show: true,
                  formatter: `${ArrAy.value[i].bfb}%\n{b}`,
                  position: "center",
                  lineHight: 30,
                  fontSize: "12",
                  color: "#00B7B4",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: `${ArrAy.value[i].ok}` },
                {
                  value: `${ArrAy.value[i].bfb}-${ArrAy.value[i].ok}`,
                },
              ],
            },
          ],
        };
        if (ArrAy.value[i].Stauts == "1") {
          console.log(123321123321);
          option.color = ["#00B7B4", "#0B3157"];
        } else {
          option.color = ["#DCBA12", "#DCBc12"];
        }
        option && myChart.setOption(option);
      }
    };

 

---