vue可视化大屏_自适应

布局采用flex + vw/vh

数值单位全部使用vw、vh实现，

首先去除所有默认，这里使用的是 KISSY CSS Reset 去掉默认，自己再重写部分把px改写

使用sass计算 px转换为vh、vw
$Width:1920;
$Height:1080;
@function h($height) {
  @return ($height*100/$height)+vh;
}

@function w($width) {
  @return ($width*100/$width)+vw;
}

Echarts图表适配

图表字体、间距等尺寸自适应

// 获取窗口可视区高度 
const getClientHeight = () => {
    let clientHeight = 0;
    if(document.body.clientHeight && document.documentElement.clientHeight){
        clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }
    else{
         clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }
        return clientHeight;
    }
    // 获取当前窗口可视区/1080的比例 
    export const getHeightRate = () => { const height = getClientHeight(); return height / 1080; }

​​参考这篇文章​​

不过有个问题就是必须刷新才会改变字体大小

页面宽高变化图表resize

使用 element-resize-detector 监听页面变化

​​(方式一)​​ 使用 监听调用 Echarts.resize()

addChartResizeListener() {
  const instance = ResizeListener({
    strategy: "scroll",
    callOnAdd: true,
  });

  instance.listenTo(this.$el, () => {
    if (!this.myChart) return;
    this.myChart.resize();
  });
},

handleWindowResize() {
  if (!this.myChart) return;
  this.myChart.resize();
},

​​一定记得要销毁啊！​​

beforeDestroy() {
  window.removeEventListener("resize", this.handleWindowResize);
},

当页面宽高发生变化，就会resize

​​(方式二)​​​ 给echarts组件绑定一个​​​key​​然后监听改变key组件就会重新渲染

<driverLinearGradient :eChartsData="eChartsData"  :key="eChartsKey" />

​​下拉框和分页使用的ant-design-vue 这里怎么处理呢，它不受我控制啊​​有什么解决方式吗