Vue動態渲染echarts圖表

最近做專案遇到這樣一個場景，有一個標簽選擇界面，選擇不同的標簽需要展示不同的圖表有可能折線圖，有可能柱狀圖，也可能餅圖，圖表的型別由后端回傳，標簽可以多選，這個時候就需要動態來渲染不定數量和型別的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() 即可,同理如果需要其他圖表型別，則繼續添加對應處理方法即可，
最后附上效果圖，（新手一枚，如有錯誤還請指正！）