在vue项目中循环渲染echarts图表并判断类型

main.js文件中的配置

// 导入echars 并挂载在原型上
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

这样设置我们就可以直接用this.$echarts了

组件

<template>
  <div class="test">
    <div v-for="(item, index) in dataList" :key="item.title" class="echarts">
      <div
        class="echartsBox"
        :id="'echartsBox' + index"
        style="width: 300px; height: 300px"
      >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dataList: [
        {
          title: "A",
          echarts: {
            type: "bar",
            data: [62, 56, 53, 52, 73, 48, 62, 74],
            xAxis_data: [
              "2",
              "",
              "",
              "",
              "",
              "",
              "",
              "98",
            ],
          },
        },
        {
          title: "B",
          echarts: {
            type: "bar",
            data: [56, 68, 61, 51, 70, 56, 69, 69],
            xAxis_data: ["0", "", "", "", "", "", "", "99"],
          },
        },
        {
          title: "D",
          echarts: {
            type: "bar",
            data: [29, 64, 73, 67, 82, 90, 57, 18],
            xAxis_data: [
              "-0.13686367902143",
              "",
              "",
              "",
              "",
              "",
              "",
              "1.17654616010319",
            ],
          },
        },
        {
          title: "target",
          echarts: {
            type: "pie",
            data: [
              { name: 0, value: 252 },
              { name: 1, value: 248 },
            ],
          },
        },
      ],
    };
  },
  mounted() {
    this.echartsTest();
  },
  methods: {
    echartsTest() {
    // 这里一定要用 nextTick 包一下
      this.$nextTick(() => {
        for (var i = 0; i < this.dataList.length; i++) {
          if (this.dataList[i].echarts.type == "pie") {
            let arr = [];
            this.dataList[i].echarts.data?.forEach((item) => {
              // console.log(item);
              // console.log(this.dataList[i].echarts.data);
              arr.push({
                value: item.value,
                name: item.name,
              });
            });
            var chartDom = document.getElementById("echartsBox" + i);
            var option, myChart;

            myChart = this.$echarts.init(chartDom);
            option = {
              legend: {
                top: "5%",
                left: "center",
              },
              series: [
                {
                  name: "",
                  type: "pie",
                  radius: "50%",
                  data: arr,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            };
            myChart.setOption(option);
          } else if (this.dataList[i].echarts.type == "bar") {
            let arr = [];
            this.dataList?.forEach((item) => {
              // console.log(item.echarts.data);
              arr.push({
                data: item.echarts.data,
              });
            });
            // console.log(arr[i].data);

            let xAxis_data = [];
            this.dataList?.forEach((item) => {
              // console.log(item.echarts.xAxis_data);
              xAxis_data.push({
                data: item.echarts.xAxis_data,
              });
            });
            console.log(xAxis_data[i].data);
            var chartDom = document.getElementById("echartsBox" + i);
            var option, myChart;

            myChart = this.$echarts.init(chartDom);
            option = {
              xAxis: {
                type: "category",
                data: xAxis_data[i].data,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: arr[i].data,
                  type: "bar",
                  showBackground: true,
                  backgroundStyle: {
                    color: "rgba(180, 180, 180, 0.2)",
                  },
                },
              ],
            };
			
            myChart.setOption(option);
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.main {
  width: 350px;
  margin: 30px 0;
  height: 200px;
  margin-left: 70px;
  background-color: #ffffff;
}
</style>

最后自己在index.js中配置一下路由