Vue大屏实战五：中间地图的实现

博主逸尘

已于 2024-09-12 19:38:39 修改

阅读量3k

点赞数

分类专栏： Vue大屏文章标签： vue大屏地图

于 2023-02-16 16:48:30 首次发布

本文链接：https://blog.csdn.net/qq_16497617/article/details/129065024

版权

8 篇文章 43 订阅 ¥9.90 ¥99.00

订阅专栏

本文介绍如何在Vue大屏项目中实现中间地图的布局和展示。通过调整左右两侧布局，设置合适的宽度和高度，然后引入地图组件和对应的json数据文件，最后在main.js中引入封装好的ECharts组件，成功展示了山东省的地图效果。地图数据来源于阿里DataV，可按需更换其他省市的json文件。

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

1.静态数据效果图

<div class="contetn_center">
        <CenterMap class="contetn_center_top" />
        <div>
          //地图底部布局
        </div>

      </div>

我们对左右两侧的宽度及高度调整后即可实现效果图中左右两行一列echart图效果，在Vue大屏实战二：页面三分实现左中右布局中默认配置的宽度是270px改为520px即可，高度三行echart的默认高度是300px,改为2行则高度改为450px即可，中间地图保持或者调整下高度适配地图底部模块的展示。

主页面

import CenterMap from './center-map.vue'
components: {

了解本专栏

关注

专栏目录