ECharts图的适配

ECharts图的适配

一、如果页面没有侧边栏的展开和折叠

1. mounted钩子函数中,对窗口大小变化的事件进行监听
   destroyed钩子函数中,组件销毁取消事件监听
2. 调用echarts提供的API resize方法

mounted() {
	...
    window.addEventListener('resize', this.screenAdapter)
},
destroyed() {
    ...
    window.removeEventListener('resize', this.screenAdapter)
},
screenAdapter() { 
	//标题一类或者宽高一类的大小需要做修改的可以在这里处理,不需要的可以删除
    ------------------------------------------------------------
      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
      // 和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize
            }
          }
        },
        series: [
          {
            barwidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0,titleFontSize / 2,titleFontSize / 2,0]
            }
          }
        ]
      }
      this.chartsInstance.setOption(adapterOption)
    ----------------------------------------------------------------
      // 手动调用图表对象的resize才能产生效果
      this.chartsInstance.resize()
    }

二、如果页面有侧边栏的展开和折叠

由于侧边栏的展开和折叠不会触发浏览器的resize方法,这里引入了第三方插件

1. 安装依赖npm install element-resize-detector

2. 将依赖引入并设置全局方法

3. 监听dom

//main.js文件引入
import ElementResizeDetectorMaker from 'element-resize-detector'
Vue.prototype.$erd = ElementResizeDetectorMaker()
//组件中使用
mounted() {
    ...
    this.$erd.listenTo(this.$refs.seller_ref,() => {//this.$refs.seller_ref 代表dom容器
      this.$nextTick(()=> {
        this.chartsInstance.resize()
      })
    })
  },