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

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

    

     
     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、完整组件代码

   
     
   
     
   

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 + '  ' + ele.data + '%
'
                  })
                }
                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