vue封裝echarts組件,數(shù)據(jù)動(dòng)態(tài)渲染方式

更新時(shí)間：2022年12月05日 09:19:46 作者：藍(lán)胖子的多啦A夢(mèng)

這篇文章主要介紹了vue封裝echarts組件,數(shù)據(jù)動(dòng)態(tài)渲染方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue封裝echarts組件,數(shù)據(jù)動(dòng)態(tài)渲染

需求：顯示默認(rèn)時(shí)間為當(dāng)前時(shí)間至7天之前時(shí)間去請(qǐng)求數(shù)據(jù)

實(shí)現(xiàn)效果：

在這里插入圖片描述

1.安裝Echarts

cnpm install echarts -S

2.在vue項(xiàng)目中使用Echarts

在這里插入圖片描述

父組件使用子組件的代碼

template區(qū)的使用

     <BarChart
        :labelList="chartData.labelList"
        :checkOutValueList="chartData.checkOutValueList"
        :putInValueList="chartData.putInValueList"
      />

數(shù)據(jù) （引入組件，注冊(cè)組件，定義圖表需要的數(shù)據(jù)）

在這里插入圖片描述

 data() {
    return {
     chartData: {}, //echart圖表數(shù)據(jù)
    };
  },

接口返回?cái)?shù)據(jù)

在這里插入圖片描述

  created() {
    this.getList();
  },
  methods: {
    getList() {
      let data = {
        updateDate: this.deviceFormData.time,
        pn: this.pn,
      };
      getInOutData(data).then((res) => {
        this.chartData = res;
        console.log(this.chartData, "子組件this.chartData");
      });
    },
  }

數(shù)據(jù)結(jié)構(gòu)：

在這里插入圖片描述

子組件頁(yè)面代碼（接收數(shù)據(jù)，并渲染）

<template>
  <div
    :class="className"
    :style="{ height: height, width: width }"
    id="myChart"
  />
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    //接受父組件傳遞來(lái)的數(shù)據(jù)
    labelList: Array,
    checkOutValueList: Array,
    putInValueList: Array,
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {};
  },
  watch: {
    labelList: function (newQuestion, oldQuestion) {
      this.initChart();
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 創(chuàng)建 echarts 實(shí)例。
      var myChartOne = echarts.init(document.getElementById("myChart"));
      myChartOne.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.labelList,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: "#fff", //坐標(biāo)值得具體的顏色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff", //坐標(biāo)值得具體的顏色
              },
            },
          },
        ],
        series: [
          {
            name: window.vm.$i18n.t("barChart.putQuantity"),
            type: "bar",
            data: this.checkOutValueList,
            itemStyle: {
              color: "#9B59B6",
            },
          },
          {
            name: window.vm.$i18n.t("barChart.outQuantity"),
            type: "bar",
            data: this.putInValueList,
            itemStyle: {
              color: "#DFBA49",
            },
          },
        ],
      });
    },
  },
};
</script>

vue動(dòng)態(tài)渲染echarts圖表

最近做項(xiàng)目遇到這樣一個(gè)場(chǎng)景，有一個(gè)標(biāo)簽選擇界面，選擇不同的標(biāo)簽需要展示不同的圖表有可能折線圖，有可能柱狀圖，也可能餅圖，圖表的類(lèi)型由后端返回，標(biāo)簽可以多選。這個(gè)時(shí)候就需要?jiǎng)討B(tài)來(lái)渲染不定數(shù)量和類(lèi)型的echarts圖表了。

第一步，選擇標(biāo)簽

將選擇的所有標(biāo)簽存儲(chǔ)到downloadCheckList數(shù)組中，再添加一個(gè)數(shù)組editableTabs用來(lái)存放需要展示的標(biāo)簽的相關(guān)信息。obj1代表發(fā)送請(qǐng)求時(shí)需要攜帶的參數(shù),obj也需要攜帶，處理數(shù)據(jù)會(huì)用到。同時(shí)初始化echarts圖表。

//選擇標(biāo)簽完成
     selecttrue(val) {
    	let that=this
    	// 每次選擇標(biāo)簽完成創(chuàng)建echarts實(shí)例，
    	 if(val==2){
	    	//遍歷整理信息
			 for (let i in that.downloadCheckList) {
		       let obj = {
		          title: that.downloadCheckList[i],//圖表名字
		          id: "chart" + i, //圖表id
		          chart: null, //用來(lái)存儲(chǔ)圖表實(shí)例
		          name: i,     //每個(gè)圖表對(duì)應(yīng)的順序
		        };
		        let obj1={
		          timeScope:"$timeScope"
		        }
		        obj1[that.downloadCheckList[i]]=`$${that.downloadCheckList[i]}`
		        that.editableTabs.push(obj);
		        //發(fā)送ajax請(qǐng)求
		        that.getDataFromLabel(obj1,that.Time[0], that.Time[1],obj);
		      }
		      	//分配初始化圖表
		        that.chartInit();
	        }else{
	           // 切換時(shí)間不需要執(zhí)行chartInit()創(chuàng)建echarts實(shí)例
		       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(() => {
	      //動(dòng)態(tài)獲取寬高
	        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數(shù)組代表需要展示的圖表。這里使用動(dòng)態(tài)寬高來(lái)適應(yīng)不同屏幕尺寸。

      <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>

第二步處理服務(wù)端返回的數(shù)據(jù)

請(qǐng)求完成后執(zhí)行 setdatalabel() 方法處理數(shù)據(jù)，data為服務(wù)端返回的數(shù)據(jù)，obj為請(qǐng)求時(shí)攜帶的標(biāo)簽信息，

    setdatalabel(data,obj) {
        let that=this
        //新建dataobj存儲(chǔ)總數(shù)據(jù)，dataArr用來(lái)存儲(chǔ)echarts的series屬性的數(shù)據(jù)，處理完成的數(shù)據(jù)放在這里即可
        let dataobj={
          sort:obj.name,  //當(dāng)前標(biāo)簽在數(shù)組editableTabs中的位置
          shapeType:"",  //存儲(chǔ)當(dāng)前標(biāo)簽需要展示的圖表類(lèi)型（bar line pie ）
          title:obj.title,  //當(dāng)前標(biāo)簽名稱(chēng)（echarts的title）
          dataArr:[]   //存放處理完成的series數(shù)據(jù)
        }
   		//將data包含的圖表類(lèi)型賦給dataobj.shapeType
        // 分辨展示類(lèi)型
        // 根據(jù)不同的圖表類(lèi)型執(zhí)行不同的的處理方法
        if(dataobj.shapeType=="pie"){
          that.setPieData(dataobj,data)
        }else if(dataobj.shapeType=="line"){
          that.setLineDate(dataobj,data)
        }
    },

第三步創(chuàng)建圖表數(shù)據(jù)

數(shù)據(jù)處理完成之后，將攜帶數(shù)據(jù)的dataobj傳遞給渲染圖表的方法,(這里折線圖和柱狀圖可以使用同一個(gè)方法，處理數(shù)據(jù)時(shí)動(dòng)態(tài)修改type即可)

   setLineDate(dataobj,data){
   		//處理數(shù)據(jù)的邏輯
   		//........
   		//.........
   		//處理完成之后創(chuàng)建圖表
   		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軸數(shù)據(jù)
            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(()=>{
      	//對(duì)對(duì)應(yīng)標(biāo)簽的echarts實(shí)例執(zhí)行setOption()
        this.editableTabs[Number(dataobj.sort)].chart.setOption(option, true);
        //由于設(shè)置了動(dòng)態(tài)寬高，所以需要resize()
        this.editableTabs[Number(dataobj.sort)].chart.resize()
      })
    },

如果是餅圖則執(zhí)行餅圖的處理數(shù)據(jù)方法并 setOption() 即可,同理如果需要其他圖表類(lèi)型，則繼續(xù)添加對(duì)應(yīng)處理方法即可。

最后附上效果圖，（新手一枚，如有錯(cuò)誤還請(qǐng)指正?。?/p>