页面自适应

月下脆竹書閣

于 2021-10-27 11:08:53 发布

阅读量100

点赞数

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/c_x_m/article/details/120741829

版权

本文介绍了如何使用Echarts实现图表页面的自适应缩放，并在Vue中处理表格的高度自适应问题，包括窗口调整时的重置策略和实例代码。同时涵盖了柱状图宽度限制、Echarts配置和Vue表格的响应式设计技巧。

摘要由CSDN通过智能技术生成

Echars 页面放大缩小自适应

// 绘制图表
      this.pieChart.setOption(option, true);
      window.addEventListener('resize', () => {
        if (this.pieChart) {
          this.pieChart.resize()   // 不报错
        }
      })

获取当前Id的div宽度

const headerWidth = document.getElementById('header-bar')?.offsetWidth;

Echarts 柱状图宽度设定最大宽度,达到自适应

{
    data: items.data,
    type: 'bar',
    name: items.itemName,
    stack: '稼动率', //堆叠
    barMaxWidth: 20,
    itemStyle: {
      borderWidth: 3, //用border设置两个柱形图之间的间距
      borderColor: 'rgba(255, 255, 255, 0)', //同背景色一样
      barBorderRadius: 30
    }
  }

Vue 表格自适应 (window.onresize为什么会失效及解决方案)

在这里插入图片描述

 <Table :border="tableConfig.border" :highlight-row="tableConfig.highlightRow" :height="tableConfig.height" :loading="tableConfig.loading" :columns="columns" :data="data" @on-current-change="currentClick" @on-sort-change="sortChange"></Table>

 activated () {
    getButtonBoolean(this, this.btnData);
    this.autoSize();
    window.addEventListener('resize', () => this.autoSize());
  },
// 自动改变表格高度
  autoSize () {
    let height = document.body.clientHeight - 120;
    this.tableConfig.height = height - 60;
  },