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

最新推荐文章于 2024-05-20 16:39:00 发布

甘粟

最新推荐文章于 2024-05-20 16:39:00 发布

阅读量1.8k

点赞数 4

分类专栏： Vue 文章标签：大数据 vue

本文链接：https://blog.csdn.net/gansu12/article/details/125478231

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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

前言

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

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

<div
            style="width: 20%; height: 100%"
            v-for="(item, index) in ArrAy"
            :key="item.id"
          >
            <div class="place">{{ item.name }}</div>
            <div :id="'Access' + index" style="width: 100%; height: 90%"></div>
</div>

二、配置项

//函数
    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);
      }
    };