Echarts图表在页面窗口大小改变下重新渲染

主要是监听窗口大小调用echarts提供的resize方法。

<template>
  <div class="main">
    <div id="pie"></div>
  </div>
</template>复制

data() {
    return {
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: '10'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            top: '25',
            data: [
              { value: 1048, name: 'A' },
              { value: 735, name: 'B' },
              { value: 580, name: 'C' },
              { value: 484, name: 'D' },
              { value: 300, name: 'E' },
              { value: 245, name: 'F' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    init() {
      let chartDom = document.getElementById('pie');
      let myChart = echarts.init(chartDom);
      this.option && myChart.setOption(this.option);
    },
    handleResize() {
      let chartDom = document.getElementById('pie');
      let myChart = echarts.init(chartDom);
        // 调用Echarts实例的resize方法，重新绘制图表
      myChart.resize()
    }
  },
  beforeDestroy() {
    // 在组件销毁前解绑resize事件
    window.removeEventListener('resize', this.handleResize);
  }复制

#pie{
    width: 100vw ;
    height: 100vh;
  }复制