博客摘录「 解决vue后台 侧边导航折叠时,echarts图表组件不会自适应页面宽度的问题及echart组件id重复问题」2024年1月12日

1、重点：echart 自定义写组件的时候 id重复

     <div ref="echart" :style="{'width':'100%','height':heightNum+'px'}"></div>
     
     this.myChart = echarts.init(this.$refs.echart)

 初始化的时候用这种方法可以避免id重复问题
2、侧边导航折叠展开echart不重绘

    import { mapState } from 'vuex'
     
     
    computed: {
        ...mapState({
          opened: state => state.app.sidebar.opened,
        }),
      },
     
      watch: {
        opened(val){
           setTimeout(() => {
              this.myChart.resize();
           }, 300)
       }
      },

3、完整组件代码

    <template>
      <div class="PieWarp">
          <div ref="echart" :style="{'width':'100%','height':heightNum+'px'}"></div>
      </div>
    </template>
     
    <script>
    import echarts from '@/utils/echartsUi'
    import { mapState } from 'vuex'
    export default {
      name: '',
      data() {
        return {
            myChart:null,
            initOpts:{
                id:'line',
                options : {
                }
            }
        }
      },
       computed: {
        ...mapState({
          opened: state => state.app.sidebar.opened,
        }),
      },
      props: {
          heightNum:{
              type:Number,
              default:() => {
     &