vue 단일 페이지에 여러 개의 echarts 도표가 있을 때의 공용 코드 쓰기

html에서:

  <div class="charts1"/>
  <div class="charts2"/>
  <div class="charts3"/>
  <div class="charts4"/>
  <div class="charts5"/>
  <div class="charts6"/>
  <div class="charts7"/>

데이터 처리는 말할 필요가 없다.응, 직접 그림을 그려:

//    
 drawLine() {
 //  
  this.dealEchartsData()
  var myChartsArr = []
  for (var i = 1; i <= 7; i++) {
  this.myCharts = this.$echarts.init(document.getElementsByClassName('charts' + i)[0])
  myChartsArr.push(this.myCharts)
  var option = this.commonOption(this.myCharts, this.adnormalTypeSummery[i - 1], this.destArrAll[i - 1])
  //  echarts  true  echarts ！！！
  this.myCharts.setOption(option, true)
  }
  window.onresize = function() { //  
  for (var j = 0; j < myChartsArr.length; j++) {
   if (myChartsArr[j].resize()) {
   myChartsArr[j].resize()
   }
  }
  }
 },

공통 섹션:

 // option  
 commonOption(myCharts, titleText, destData) {
  var option = {
  title: {
   text: titleText
  },
  tooltip: {
   trigger: 'axis',
   confine: true
  },
  legend: {
   type: 'scroll',
   width: '90%',
   top: '13%'
  },
  grid: {
   left: '3%',
   right: '4%',
   bottom: '2%',
   containLabel: true
  },
  toolbox: {
   right: '20',
   feature: {
   saveAsImage: {}
   }
  },
  xAxis: {
   type: 'category',
   boundaryGap: false,
   data: this.monthName
  },
  yAxis: {
   type: 'value'
  },
  series: destData
  }
  return option
 }

이 페이지를 떠날 때 파괴:

destroyed() {
 if (this.myCharts) {
  this.myCharts.clear()
  this.myCharts.dispose()
  window.onresize = null
 }

추가 정보: Vue + Echarts 차트 표시 및 동적 렌더링
준비 작업
echarts 의존 설치
npm install echarts --save-dev
끌어들이다

(main.js)
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

코드 훑기 시작

<template>
 <div class="peopleWrap">
 <h3>
  <i class="el-icon-position"></i>
   {{peopleSumTotal}}
 </h3>
 <div id="peopleSum" style="width: 180px;height: 270px"></div>
 </div>
</template>
<script>
export default {
//  【 props】
 props: ["peopleSumTotal"], 
 data() {
 return {
  peopleSumTotalArr: []
 };
 },
 watch: {
 //  
 peopleSumTotal: {
  handler(newVal, oldVal) {
  if (newVal != 0) {
   console.log(newVal);
   this.peopleSum(newVal);
  }
  }
 }
 },
 methods: {
 peopleSum(newVal) {
 //   echarts
  var echarts = require("echarts");
  let peopleSum = echarts.init(document.getElementById("peopleSum"));
  //echsrts 
  peopleSum.on("click", function(param) {
  console.log(param);
  console.log(param.data.name);
  console.log(param.data.value);
  console.log(param.data.userDefined);
  //$emit ，  【  this.$emit】
  _this.$emit("peopleSumtoparent", param.data); 
  });

//  this.$nextTick(()=>{}) 
  this.$nextTick(() => {
  let obj = {};
  obj.value = newVal;
  obj.name = newVal;
  this.peopleSumTotalArr.push(obj);

  let option = {
   legend: {
   orient: "vertical",
   left: 10,
   data: [""]
   },
   series: [
   {
    type: "pie",
    radius: ["50%", "70%"],
    avoidLabelOverlap: false,
    itemStyle: {
    //  。
    normal: {
     //  。
     color: "#6998f7"
    },
    //  。
    emphasis: {
     //  。
     color: "#6998f7"
    }
    },
    label: {
    normal: {
     show: true,
     position: "center",
     textStyle: {
     fontSize: "20"
     }
    }
    },
    labelLine: {
    normal: {
     show: false
    }
    },
    data: this.peopleSumTotalArr // 
   }
   ]
  };
  console.log("option", option);
  peopleSum.setOption(option);
  });
 }
 },
 mounted() {}
};
</script>
<style lang="scss" scoped>
</style>

이상의 이 간단한 vue 단일 페이지에 여러 개의 echarts 도표가 있을 때의 공용 코드 작성법은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.