Vue 使用eCharts自适应大小

npm install echarts --save

<template>
    <div id="annulars" class="annular"></div>
    <div class="linechart" id="line_chart"></div>
    <div class="scatter" id="drawScatter"></div>
</template>
<script>
    import echarts from "echarts"
export default {
    data() {
        return {
            draw_scatter: "",
            line_chart: "",
            pei_chart: "",
            screenWidth: document.body.clientWidth
        }
    }
    mounted() {
        const self = this
        // 基于准备好的dom，初始化echarts实例
         window.onresize = () => {
              return (() => {
                  window.screenWidth = document.body.clientWidth
                  self.screenWidth = window.screenWidth
              })()
          }
        this.drawPie();
        this.drawScatter();
        this.drawLine()
    },
    watch: {
        screenWidth(val) {
            this.screenWidth = val;
            this.draw_scatter.resize()
            this.line_chart.resize()
            this.pei_chart.resize()
        }
      },
     methods: {
          drawPie(value) {
              this.pei_chart = echarts.init(document.getElementById("annulars"));
              this.pei_chart.setOption({
                     // 图表数据设置
                      ...
                })
           },
           drawLine() {
                this.line_chart = echarts.init(document.getElementById("line_chart"));
                this.line_chart.setOption({
                     // 图表数据设置
                      ...
                })
            },
            drawScatter(x_data, y_data) {
                  this.draw_scatter = echarts.init(document.getElementById("drawScatter"));
                  this.draw_scatter.setOption({
                     // 图表数据设置
                      ...
                })
            }
      }
}
</script>
<style scoped>
//  给图表设置宽高
</style>