用豆包MarsCode IDE，从0到1画出精美数据大屏！

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

• /* 元素整体缩放为原来的 50% */transform: scale(0.5); /* 元素宽度缩放为原来的 75%，高度缩放为原来的 120% */transform: scale(0.75, 1.2);

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

let screen = ref()
// 挂载时首先去获取视口的宽高

onMounted(() => {
  
  

 // 使用ref获取到的dom对象调用时都需要带.value

 screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`

 console.log(`scale(${getScale()}) translate(-50%,-50%)`,'666')

})

// 创建函数

function getScale(w = 1920, h = 1080) {
  
  

 let ww = window.innerWidth / w

 let wh = window.innerHeight / h

 // 按照变化较小者的比例去进行缩放

 return ww < wh ? ww : wh

}

// 视口发生变化时

window.onresize = () => {
  
  

 screen.value.style.tra