Echarts 自适应宽高 vue

思路

1.将图表包括在一个div中(该div设置了固定的宽高，可为百分比)

<div style="height:80%;width:100%" ref="elBox">
       <div id="chart" style="width: 100%;"></div>
</div>

2.由于不能直接设置rem进行适配,需要动态计算出'id = chart'的高度

setChartHeight() {
      //根据自己需要调节图形大小,我的图形是放在<div class="main">中
      let mainHeight = this.$refs.elBox.offsetHeight
      $("#chart").css("height", mainHeight + "px");
 }
//在mounted中调用
mounted() {
     setTimeout(() => {
          this.setChartHeight()
          this.$nextTick(() => {
                  //画图
          })
    })

注意:如果直接调用不加定时器的话，获取的高度与实际不符，需要加一个定时器，才能获取到正确的高度
3.如果屏幕的宽高改变的话，需要重新加载表格

data() {
    return {
        screenWidth:document.body.clientWidth,
        pie_chart:''
    }
}
 mounted() {
            const self = this
            window.onresize = () => {
                this.setChartHeight()
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    self.screenWidth = window.screenWidth
                })()
            }
},
watch: {
            screenWidth(val) {
                this.screenWidth = val;
                this.chart.resize()
            },
},
methods: {
  drawChart() {
    this.chart = echarts.init(document.getElementById('chart-ranking'))
    this.chart.setOption({
        //options配置
    })
  }
}