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的盒子（有大小的盒子！！！）
 

 

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、效果图