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

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:() => {
                  return 160
              }
          },
          opt:{
              type:Object,
              default:() => {
                  return {}
              }
          },
      },
      components:{
      },
      watch: {
        opt: {
          handler(val) {
            if (val && Object.keys(val).length > 0) {
              this.myChart.setOption(val.options)
            }
          },
          deep: true
        },
        opened(val){
           setTimeout(() => {
              this.myChart.resize();
           }, 300)
       }
      },
      created(){
        //   this.initOpts = Object.assign(this.initOpts,this.opt)
          this.initOpts = { ...this.opt }
      },
        mounted(){
            this.init()
        },
        methods: {
            init(){
                // window.setTimeout(() => {
                    this.initPieDate0()
                // },1000)
            },
            // 项目数据
            initPieDate0(){
                // var chartDom = document.getElementById('gauge1');
                this.myChart = echarts.init(this.$refs.echart)
                // this.initOpts.options.series[0].data = this.opt.options.series[0].data
                window.setTimeout(()=> {
                     this.myChart.setOption(this.initOpts.options)
                })
                if(this.initOpts.resize){
                    window.addEventListener("resize", () => {
                         this.myChart.resize();
                    })
                }
            }
      },
     }
    </script>
     
    <style scoped>
    </style>

4、参数按照echart组件的传递就可以 （仅供参考）

          // 堆叠柱状图
          columnarOption: {
          id:'columnar',
          resize:true,
          options : {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function(data) {
                let tip = ''
                if (data !== null && data.length > 0) {
                  data.forEach(ele => {
                    tip += ele.seriesName + '&nbsp&nbsp' + ele.data + '%<br>'
                  })
                }
                return tip
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisLabel: {
                  interval: 0,
                },
                data: []
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLabel: {
                  formatter: '{value}%'
                }
              }
            ],
            legend:{
              right: '5%',
            },
            series: [
                  {
                    name: '1',
                    type: 'bar',
                    barWidth: '60%',
                    color: '#1890ff',
                    barGap: '-100%',
                    // barWidth: '30%',
                    emphasis: {
                      focus: 'series'
                    },
                    data: []
              },
              {
                name: '2',
                type: 'bar',
                barWidth: '60%',
                color: '#e62679',
                // barWidth: '30%',
                emphasis: {
                    focus: 'series'
                  },
                label:{
                  show:true,
                  formatter: "{c}%",
                },
                data: []
              }
            ],
           }
          },
————————————————
版权声明：本文为CSDN博主「小任同学`」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_55969466/article/details/128548807