豆包MarsCode IDE 是一个云端 AI IDE 平台，通过内置的 AI 编程助手，开箱即用的开发环境，可以帮助开发者更专注于各类项目的开发。

作为一名前端开发工程师，今天想尝试利用豆包MarsCode IDE，选择 Vue + Echarts 创建一个大屏项目：数智化线上车展数据分析平台。

进入 IDE 之后，注册登录进入主页。

当你选择创建一个 Vue 项目后，会初始化一个项目，点击 RUN 即可运行。

浏览 package.json 文件，发现默认创建的是 Vue3+Vite 构建的项目。虽然官方提供的模板是 Vue3 的，但如果你希望使用 Vue2 也可以通过 Github 导入项目。

画大屏必不可少的就是 ECharts，通过 npm 安装速度较慢，所以使用镜像及其命令 cnpm。因为豆包MarsCode IDE 内置了 AI 助手，提供代码自动补全与生成、问题修复、代码优化等能力，安装了 cnpm 后，IDE 猜到了我是在查看版本，在控制台输入 cnpm 之后就会自动补全 cnpm -v 来查看版本。

通过命令 cnpm install echarts --save 安装 ECharts，cnpm 的安装速度就很快了，差不多一分钟就可以搞定，在项目的 package.json 文件中也可以看到安装的版本5.5.1.

画大屏需要静态图片来装饰整个大屏，可以通过 upload 批量上传。

将模板默认生成的代码，简单删一下就变为一个空的项目，我们就可以正式开始大屏的制作了。

可视化数据大屏首先要解决的问题就是适配性，这是一个比较专业性的问题。豆包MarsCode 集成了 AI 功能，所以我们可以直接向 AI 助手提问：“想要可视化大屏适配任何多种分辨率的屏幕，前端该如何实现。”我们看一下它是怎么回答的。

我选择的解决方案是：通过 CSS 的 scale 属性，根据屏幕大小，对图表进行整体的等比缩放，从而达到自适应效果。

CSS 的 scale 属性用于指定元素的缩放比例。它是 transform 属性的一个值，可以使用 CSS 中的 transform 属性来设置元素的缩放比例。

scale 属性可以接受一个或两个参数。如果只提供一个参数，它将同时应用于元素的宽度和高度，导致元素在两个维度上按比例缩放。如果提供两个参数，第一个参数表示宽度的缩放比例，第二个参数表示高度的缩放比例。

scale 属性可以与其他 transform 属性值结合使用，比如 translate、rotate 等，以实现更复杂的变形效果。同时，scale 属性也可以用在 CSS 动画中，通过改变缩放比例来实现元素的动态缩放效果。 具体代码如下：

getScale（） 函数通常用于根据浏览器视口大小计算一个缩放因子。这个因子通常被用作 scale 属性的值，以确保 screen 元素可以根据屏幕大小自动调整大小。translate(-50%,-50%) 部分是用于将缩放后的元素居中显示的样式， transform-origin: left top 表示 transform 属性的原点位于元素的左上角。 这段代码提供了一种响应式的方式来调整页面元素的大小和位置，使得页面在不同大小的屏幕上都能够友好地显示。

先给大家展示下最终效果，我再来一步步演示大屏数据图表的生成。