for循环+echart渲染多个图（vue为例）

1、项目全局安装echarts

npm install echarts --save

2、在需要for循环渲染多个图表的.vue组件中引入echarts

import * as echarts from "echarts";

3、写一个用于装图表的盒子（需要有宽高，或者100%继承父盒子，如果不指定宽高，图表无法撑开这个盒子）

//devlist是我自己定义的一个数组，这个数组长度是2，那么里面的内容就渲染两次，
.echart_specific是一个大盒子，用于循环devlist里面的内容
.specificechart是用于装echart的盒子（有大小的盒子！！！）
<div class="echart_specific" v-for="(item, index) of devlist" :key="index">
      <div class="specificechart" ref="specific"></div>
</div>

4、用函数渲染echart图表（直接在函数里面画echart）

  //画图
            draw_specific() {
                var specificEchart = document.getElementsByClassName("specificechart");
                for (var i = 0; i < specificEchart.length; i++) {
                    var myChart = echarts.init(specificEchart[i]);
                    var option = {
                        title: {
                            text: "Referer of a Website",
                            subtext: "Fake Data",
                            left: "center",
                        },
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            left: "left",
                        },
                        series: [{
                            name: "Access From",
                            type: "pie",
                            radius: "50%",
                            data: [{
                                value: 1048,
                                name: "Search Engine",
                            }, {
                                value: 735,
                                name: "Direct",
                            }, {
                                value: 580,
                                name: "Email",
                            }, {
                                value: 484,
                                name: "Union Ads",
                            }, {
                                value: 300,
                                name: "Video Ads",
                            }, ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        }, ],
                    };

                    myChart.setOption(option);
                }
            },
        

5、调用渲染echart图表的函数

mounted() {
     this.draw_specific();
},

6、效果图