最近做项目遇到这样一个场景，有一个标签选择界面，选择不同的标签需要展示不同的图表有可能折线图，有可能柱状图，也可能饼图，图表的类型由后端返回，标签可以多选。这个时候就需要动态来渲染不定数量和类型的echarts图表了。

第一步，选择标签

将选择的所有标签存储到downloadCheckList数组中，再添加一个数组editableTabs用来存放需要展示的标签的相关信息。obj1代表发送请求时需要携带的参数,obj也需要携带，处理数据会用到。同时初始化echarts图表。

//选择标签完成
     selecttrue(val) {
    	let that=this
    	// 每次选择标签完成创建echarts实例，
    	 if(val==2){
	    	//遍历整理信息
			 for (let i in that.downloadCheckList) {
		       let obj = {
		          title: that.downloadCheckList[i],//图表名字
		          id: "chart" + i, //图表id
		          chart: null, //用来存储图表实例
		          name: i,     //每个图表对应的顺序
		        };
		        let obj1={
		          timeScope:"$timeScope"
		        }
		        obj1[that.downloadCheckList[i]]=`$${that.downloadCheckList[i]}`
		        that.editableTabs.push(obj);
		        //发送ajax请求
		        that.getDataFromLabel(obj1,that.Time[0], that.Time[1],obj);
		      }
		      	//分配初始化图表
		        that.chartInit();
	        }else{
	           // 切换时间不需要执行chartInit()创建echarts实例
		       for (let i in that.editableTabs) {
		          let obj = that.editableTabs[i]
		          let obj1={
		            timeScope:"$timeScope"
		          }
		          obj1[that.editableTabs[i].title]=`$${that.editableTabs[i].title}`
		          that.getDataFromLabel(obj1, that.Time[0], that.Time[1],obj);
		        }
	        }
     }

    // 分配初始化图表
	  chartInit() {
	      let that = this;
	      this.$nextTick(() => {
	      //动态获取宽高
	        let WH=document.getElementById('WH').childNodes[0]
	        for (let i in that.editableTabs) {
	          that.editableTabs[i].chart = that.$echarts.init(document.getElementById(that.editableTabs[i].id));
	        }
	        that.width =parseInt(window.getComputedStyle(WH,null).width)-14+'px'
	        that.height =parseInt(window.getComputedStyle(WH,null).height)-10+'px'
	      });
	    },

HTML部分使用v-for 遍历 editableTabs数组代表需要展示的图表。这里使用动态宽高来适应不同屏幕尺寸。

      <div v-for="item in editableTabs" id='WH' :key="item.id">
        <div :style="{width:width,height:height}" :id="item.id" :ref="item.id">{{item.title}}</div>
        </div>
      </div>

第二步 处理服务端返回的数据

请求完成后执行 setdatalabel() 方法处理数据，data为服务端返回的数据，obj为请求时携带的标签信息，

    setdatalabel(data,obj) {
        let that=this
        //新建dataobj存储总数据，dataArr用来存储echarts的series属性的数据，处理完成的数据放在这里即可
        let dataobj={
          sort:obj.name,  //当前标签在数组editableTabs中的位置
          shapeType:"",  //存储当前标签需要展示的图表类型（bar line pie ）
          title:obj.title,  //当前标签名称（echarts的title）
          dataArr:[]   //存放处理完成的series数据
        }
   		//将data包含的图表类型赋给dataobj.shapeType
        // 分辨展示类型
        // 根据不同的图表类型执行不同的的处理方法
        if(dataobj.shapeType=="pie"){
          that.setPieData(dataobj,data)
        }else if(dataobj.shapeType=="line"){
          that.setLineDate(dataobj,data)
        }
    },

第三步 创建图表数据

数据处理完成之后，将携带数据的dataobj传递给渲染图表的方法,(这里折线图和柱状图可以使用同一个方法，处理数据时动态修改type即可)

   setLineDate(dataobj,data){
   		//处理数据的逻辑
   		//........
   		//.........
   		//处理完成之后创建图表
   		this.createlinechart(dataobj)
	}
	
   createlinechart(dataobj) {
      let that = this;
      let option = (option = {
        title: {
          text: dataobj.title,
          textStyle: {
            fontSize: 14,
            color: "#626262",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "",
          },
          backgroundColor: "white",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderColor: "#ECECEC",
          textStyle: {
            //字体样式
            color: "#979797",
            align: "left",
          },
          confine: true,
        },
        legend: {
          icon: dataobj.shapeType=='bar'?'':'circle',
          x: "right",
          y: "0%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.chartXisArr,   //x轴数据
            axisPointer: {
              type: "",
            },
            axisLabel: {
              color: "#E1E1E1",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#E1E1E1",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: true,
            axisLabel: {
              formatter: "{value} /人次",
              color: "#E1E1E1",
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
          },
        ],
        series: dataobj.dataArr,
      });
      this.$nextTick(()=>{
      	//对对应标签的echarts实例执行setOption()
        this.editableTabs[Number(dataobj.sort)].chart.setOption(option, true);
        //由于设置了动态宽高，所以需要resize()
        this.editableTabs[Number(dataobj.sort)].chart.resize()
      })
    },

如果是饼图则执行饼图的处理数据方法并 setOption() 即可,同理如果需要其他图表类型，则继续添加对应处理方法即可。
最后附上效果图，（新手一枚，如有错误还请指正！）