文章目录

一、效果展示二、基本的布局三、背景四、代码布局中遇到的一些问题

一、效果展示

先看一下展示的效果，无论是尺寸多宽的屏幕，都会将内容显示完整，做到了正正的响应式。唯一不足的是图表中的样例，会随着图表的缩放而变换位置，窗口尺寸变化过快会反应不过来，好在有节流函数，可以让浏览器计算量没有那么大。本篇博客不会直接拿echarts图表下手，会先介绍一些这个大屏可视化的响应式布局。后面会出一个专门的博客介绍echarts的使用。

二、基本的布局

大致的布局如下，整体分为头部与body，头部有标题与时间两部分，body分为三个子标签，使用flex布局分别占3\5\3份，然后在占3份的标签内又分为三部分，占5份的标签内分为两部分。 写入样式之后就有了下面的样子 此时需要将前面封装的画图组件插入到指定的位置。得到下面的结果

三、背景

可以看出。这有一个在转的地球，地球有一个比较亮的描边，还有一些网格状的东西罩在上面。 地球与网状格格顺时针旋转，光边逆时针旋转，这种效果使用的是动画效果与过渡效果实现，样式代码如下： map1、map2、map3盒子的背景分别是地球、描边、网格。

.map1,

.map2,

.map3 {

position: absolute;

top: 50%;

left: 50%;

background-size: 100% 100%;

background-repeat: no-repeat;

transform: translate(-50%, -50%);

width: 6.475rem;

height: 6.475rem;

opacity: 0.3;

}

.map1 {

background-image: url(../../public/images/map.png);

animation: rotate 15s linear infinite;

}

.map2 {

width: 8.0375rem;

height: 8.0375rem;

background-image: url(../../public/images/lbx.png);

opacity: 0.8;

animation: rotate 5s linear infinite;

z-index: 2;

}

.map3 {

width: 7.075rem;

height: 7.075rem;

background-image: url(../../public/images/jt.png);

animation: rotate1 10s linear infinite;

}

@keyframes rotate {

from {

transform: translate(-50%, -50%) rotate(0deg);

}

to {

transform: translate(-50%, -50%) rotate(360deg);

}

}

@keyframes rotate1 {

from {

transform: translate(-50%, -50%) rotate(0deg);

}

to {

transform: translate(-50%, -50%) rotate(-360deg);

}

}

四、代码

//以下面一个panel作为例子进行讲解

mychart="echart1"

:option="chartsList[0]"

title="柱形图 - 就业形式"

>

//这个标签控制一个图表，mychart是图表将要挂载的ref，option是图表的配置项，title是图表的标题。

Mainbox.vue整体布局

Header.vue用于管理布局中的头部。

布局中遇到的一些问题

下面是在布局的时候遇到的一些问题，可以参考一下：

Echarts:There is a chart instance already initialized on the dom.//重复给一个dom元素画图 echarts警告：Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. …//没有给盒子宽高 Uncaught TypeError: Cannot read properties of undefined (reading ‘echarts’)//没有找到echarts中的china.js 将china.js文件放入echarts.js所在的目录 Error in mounted hook: “TypeError: this.dom.getContext is not a function” 一开始是使用jQuery获取dom，一直报上面的错误，后来改变用vue的ref获取就可以了 使用document.getelementById（）获取也会报错 ./src/components/Home.vue Module not found: Error: Can’t resolve ‘less-loader’ in 'C:\Users\123\Desk //使用了less语法，没有装less相关插件，执行npm install less-loader@5.0.0 -D

这篇博客是没有提到如何使用echarts画图的，接下来一篇将会告诉大家如何画图。以及对图表进行响应式布局。如果大家有好的想法或者想要源码欢迎评论区留言。

参考文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：