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

川长思鸟来 2023-07-13 03:56 18阅读 0赞

**项目需求：**

需要使用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>