# 全屏容器 (基于dataV开始)
(基于dataV的修改，如果是只需要使用以下的组件可以只全局安装该分类组件，该文档与官方文档无异，只是后续会依据笔者和读者的需求逐渐修改和完善，如一下动态兼容性等)
```
import {useEchartView} from 'ts-vue-echarts/src/index'
Vue.use(useEchartView)
```
数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。<react-page-btn />

::: tip TIP
建议在全屏容器内使用**百分比**搭配**flex**进行布局，以便于在不同的分辨率下得到较为一致的展示效果。

使用前请注意将`body`的`margin`设为0，否则会引起计算误差，全屏后不能完全充满屏幕。
:::

```html
<dv-full-screen-container>content</dv-full-screen-container>
```

<click-to-copy :info="fullScreenContainerTag" />

<script>

export default {
  data () {
    return {
      fullScreenContainerTag: `<dv-full-screen-container>content</dv-full-screen-container>`
    }
  }
}
</script>
