解决vue后台 侧边导航折叠时,echarts图表组件不会自适应页面宽度的问题及echart组件id重复问题

 前言

侧边导航栏折叠展开是echart不会自适应

使用了vuex配合watch监听侧边栏展开时重绘图表

echart组件重复使用，id重复问题

 echart 地址：Examples - Apache ECharts 

 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: []
          }
        ],
       }
      },