遍历echarts图

  1. 拿到接口返回的数据 遍历几个图,就组装成遍历的数据
    1. //比如 遍历两个图表
      
      this.seriesData = [
              {
                data: [
                  { value: 1048, name: "Search Engine" },
                  { value: 735, name: "Direct" },
                  { value: 580, name: "Email" },
                  { value: 484, name: "Union Ads" },
                  { value: 300, name: "Video Ads" },
                ],
              },
              {
                data: [
                  { value: 1048, name: "Search Engine" },
                  { value: 735, name: "Direct" },
                  { value: 580, name: "Email" },
                  { value: 484, name: "Union Ads" },
                  { value: 300, name: "Video Ads" },
                ],
              },
            ];

       

  2. 遍历创建echarts的dom元素
    1.   有几个数据生成几个dom元素
 <!-- 下面的柱状图 -->
          <div class="barList">
            <div class="bar" :id="`pie${i}`" v-for="(item,i) in seriesData" :key="i"></div>
          </div>

 

posted @ 2022-11-25 21:25  小成-  阅读(192)  评论(0)    收藏  举报