Vue中给canvas画布，获取div样式，设置动态宽高

项目需求：

　　需要使用echarts进行图表展示。由于div宽高是不固定的，因此需要先获取父级的宽高再把值赋予到图表的div中。

　　需要使用 this.$nextTick(() => {    });方法，在mounted中，保证DOM渲染完全后，在进行echarts初始化。

赋值操作：

        $("#chartLineBox").width($(".right").width());
        $("#chartLineBox").height($(".right").height())

echarts表格不发生变化：

        重新修改大小this.myChart.resize();

<template>
<div class="right">
  <div id="chartLineBox" class="content" ></div>
</div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: "upechart",
    props: ['linecontent', 'changeNumber'],
    data() {
      return {
        echartData: {
          rksj: [],
          install: [],
        },
        myChart: Object,
      }
    },
    methods: {
      drawEcharts() {
        this.myChart = echarts.init(document.getElementById('chartLineBox'))
        this.set()
      },
      set() {
        this.myChart.setOption({
          tooltip: {
            trigger: 'axis',   //显示提示框
          },
          legend: {
           
          },
          grid: {
            x: 50,
          },
          xAxis: {
            
          },
          yAxis: {
           
          },
          series: [
            
           
          ],
        }, true)

        this.myChart.resize()
      }
    },
    mounted() {
      this.echartData.rksj = this.linecontent.rksj
      this.echartData.install = this.linecontent.install
      this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕
        $("#chartLineBox").width($(".right").width());
        $("#chartLineBox").height($(".right").height());
      });
      this.drawEcharts()
      this.set()
    },
    watch: {

      
      },

      'changeNumber'(newVal, oldVal){
        
      }
    }
  }
</script>

<style scoped>

</style>