用豆包MarsCode IDE打造精美數(shù)據(jù)大屏：從零開始的指南

來源: 豆包MarsCode 2025-01-07 17:39:47 瀏覽數(shù) (119)

反饋

原標(biāo)題：用豆包MarsCode IDE，從0到1畫出精美數(shù)據(jù)大屏！

豆包MarsCode IDE 是一個云端 AI IDE 平臺，通過內(nèi)置的 AI 編程助手，開箱即用的開發(fā)環(huán)境，可以幫助開發(fā)者更專注于各類項目的開發(fā)。

作為一名前端開發(fā)工程師，今天想嘗試?yán)枚拱麺arsCode IDE，選擇 Vue + Echarts 創(chuàng)建一個大屏項目：數(shù)智化線上車展數(shù)據(jù)分析平臺。

前置知識

在學(xué)習(xí)本教程前你需要具備以下編程基礎(chǔ)和技能：

前端開發(fā)基礎(chǔ)

HTML 和 CSS：了解基本的 HTML 結(jié)構(gòu)和 CSS 樣式化技巧，以便理解如何構(gòu)建頁面結(jié)構(gòu)和樣式化元素。例如，教程中提到使用 CSS 的 transform 屬性進行縮放和居中對齊。 推薦課程：《HTML入門課程(含HTML5)》、《CSS 入門課程》、《HTML + CSS 基礎(chǔ)實戰(zhàn)》
JavaScript：掌握 JavaScript 基礎(chǔ)，包括變量、函數(shù)、事件處理等，因為教程中涉及到 JavaScript 代碼來處理數(shù)據(jù)和動態(tài)生成圖表。 推薦課程：《JavaScript 入門課程》、《JavaScript 基礎(chǔ)實戰(zhàn)》
Vue.js：熟悉 Vue.js 框架的基本概念和用法，因為教程中使用 Vue 作為前端框架。了解組件、數(shù)據(jù)綁定、生命周期鉤子等概念。 推薦課程：《Vue2入門課程》、《Vue 3.0 新特性全面解析（走在技術(shù)前沿）blank》、《Vue3從零開始系列課程》
ECharts：了解 ECharts 圖表庫的基本使用方法，包括如何配置和渲染不同類型的圖表（如柱狀圖、折線圖、熱力圖等）。 推薦課程：《【實戰(zhàn)】ECharts數(shù)據(jù)可視化之疫情實時監(jiān)控展示》

開發(fā)工具和環(huán)境

IDE 使用：熟悉使用集成開發(fā)環(huán)境（IDE），如豆包MarsCode IDE 或其他常用的前端開發(fā) IDE（如 VSCode）。了解如何創(chuàng)建項目、運行項目、安裝依賴等。
包管理工具：了解 npm 或 cnpm 等包管理工具的基本使用方法，能夠安裝和管理項目依賴。

其他相關(guān)知識

響應(yīng)式設(shè)計：理解響應(yīng)式設(shè)計的基本概念，知道如何使網(wǎng)頁在不同分辨率的設(shè)備上適配顯示，例如使用 CSS 的 transform 屬性進行縮放。推薦課程：《HTML+CSS響應(yīng)式網(wǎng)頁設(shè)計 (基礎(chǔ)版)》
網(wǎng)絡(luò)請求和數(shù)據(jù)處理：雖然教程中沒有直接提到網(wǎng)絡(luò)請求，但通常數(shù)據(jù)大屏?xí)婕暗綇暮蠖双@取數(shù)據(jù)，因此了解基本的網(wǎng)絡(luò)請求和數(shù)據(jù)處理方法是有幫助的。

軟件工程知識

代碼組織和注釋：了解如何合理組織代碼結(jié)構(gòu)和編寫注釋，以便于代碼的可讀性和維護性。
版本控制：熟悉基本的版本控制工具（如 Git）的使用，能夠進行代碼的版本管理和協(xié)作開發(fā)。 推薦課程：《1小時快速上手版本控制器-SVN精講視頻教程》、《Git 基礎(chǔ)課程》、《Git 入門視頻課程》、《帶領(lǐng)女程序員小白：一小時輕松掌握GIT入門知識》

具備以上基礎(chǔ)和技能，將有助于你更好地理解和應(yīng)用教程中的內(nèi)容，從而成功地創(chuàng)建一個數(shù)據(jù)大屏項目。

項目準(zhǔn)備

進入 IDE 之后，注冊登錄進入主頁。

MarsCode IDE主頁

當(dāng)你選擇創(chuàng)建一個 Vue 項目后，會初始化一個項目，點擊 RUN 即可運行。

瀏覽 package.json 文件，發(fā)現(xiàn)默認創(chuàng)建的是 Vue3+Vite 構(gòu)建的項目。雖然官方提供的模板是 Vue3 的，但如果你希望使用 Vue2 也可以通過 Github 導(dǎo)入項目。

項目結(jié)構(gòu)

畫大屏必不可少的就是 ECharts，通過 npm 安裝速度較慢，所以使用鏡像及其命令 cnpm。因為豆包MarsCode IDE 內(nèi)置了 AI 助手，提供代碼自動補全與生成、問題修復(fù)、代碼優(yōu)化等能力，安裝了 cnpm 后，IDE 猜到了我是在查看版本，在控制臺輸入 cnpm 之后就會自動補全 cnpm -v 來查看版本。

安裝 cnpm

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

安裝 ECharts

畫大屏需要靜態(tài)圖片來裝飾整個大屏，可以通過 upload 批量上傳。

上傳圖片

將模板默認生成的代碼，簡單刪一下就變?yōu)橐粋€空的項目，我們就可以正式開始大屏的制作了。

數(shù)據(jù)大屏的制作

可視化數(shù)據(jù)大屏的制作

可視化數(shù)據(jù)大屏首先要解決的問題就是適配性，這是一個比較專業(yè)性的問題。豆包MarsCode 集成了 AI 功能，所以我們可以直接向 AI 助手提問：“想要可視化大屏適配任何多種分辨率的屏幕，前端該如何實現(xiàn)。”我們看一下它是怎么回答的。

向豆包MarsCodeAI助手提問

我選擇的解決方案是：通過 CSS 的 scale 屬性，根據(jù)屏幕大小，對圖表進行整體的等比縮放，從而達到自適應(yīng)效果。

CSS 的 scale 屬性用于指定元素的縮放比例。它是 transform 屬性的一個值，可以使用 CSS 中的 transform 屬性來設(shè)置元素的縮放比例。

scale 屬性可以接受一個或兩個參數(shù)。如果只提供一個參數(shù)，它將同時應(yīng)用于元素的寬度和高度，導(dǎo)致元素在兩個維度上按比例縮放。如果提供兩個參數(shù)，第一個參數(shù)表示寬度的縮放比例，第二個參數(shù)表示高度的縮放比例。

/* 元素整體縮放為原來的 50% */transform: scale(0.5);
/* 元素寬度縮放為原來的 75%，高度縮放為原來的 120% */transform: scale(0.75, 1.2);

scale 屬性可以與其他 transform 屬性值結(jié)合使用，比如 translate、rotate 等，以實現(xiàn)更復(fù)雜的變形效果。同時，scale 屬性也可以用在 CSS 動畫中，通過改變縮放比例來實現(xiàn)元素的動態(tài)縮放效果。具體代碼如下：

let screen = ref();


// 掛載時首先去獲取視口的寬高
onMounted(() => {
  // 使用ref獲取到的dom對象調(diào)用時都需要帶.value
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  console.log(`scale(${getScale()}) translate(-50%,-50%)`, '666');
});


// 創(chuàng)建函數(shù)
function getScale(w = 1920, h = 1080) {
  let ww = window.innerWidth / w;
  let wh = window.innerHeight / h;
  // 按照變化較小者的比例去進行縮放
  return ww < wh ? ww : wh;
}


// 視口發(fā)生變化時
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
}

getScale() 函數(shù)通常用于根據(jù)瀏覽器視口大小計算一個縮放因子。這個因子通常被用作 scale 屬性的值，以確保 screen 元素可以根據(jù)屏幕大小自動調(diào)整大小。translate(-50%,-50%) 部分是用于將縮放后的元素居中顯示的樣式， transform-origin: left top 表示 transform 屬性的原點位于元素的左上角。這段代碼提供了一種響應(yīng)式的方式來調(diào)整頁面元素的大小和位置，使得頁面在不同大小的屏幕上都能夠友好地顯示。

先給大家展示下最終效果，我再來一步步演示大屏數(shù)據(jù)圖表的生成。

演示大屏數(shù)據(jù)圖表的生成

整個可視化大屏分為六部分：

兩個橫向柱狀圖、一個中國地圖、一個折線圖、一個餅狀圖和一個熱力圖?

橫向柱狀圖 & 折線圖

x軸配置：

類型為value，表示x軸為數(shù)值軸；
軸標(biāo)簽的顏色為白色；
邊界間隙為[0, 0.01]，表示x軸的起始和結(jié)束位置會留有一定的空白。

y軸配置：

類型為category，表示y軸為類目軸；
軸標(biāo)簽的顏色為白色；
y軸的類目數(shù)據(jù)包括了多個汽車品牌名稱。

Echarts-category 類目軸，適用于離散的類目數(shù)據(jù)。為該類型時類目數(shù)據(jù)可自動從 series.data 或 dataset.source 中取，或者可通過 yAxis.data 設(shè)置類目數(shù)據(jù)。

series：type：'category' 柱狀圖（或稱條形圖）是一種通過柱形的高度（橫向的情況下則是寬度）來表現(xiàn)數(shù)據(jù)大小的一種常用圖表類型。

type：'line' 折線圖是用折線將各個數(shù)據(jù)點標(biāo)志連接起來的圖表，用于展現(xiàn)數(shù)據(jù)的變化趨勢。

xAxis: {
  type: 'value',
  axisLabel: {
    color: 'white',
  },
  boundaryGap: [0, 0.01],
},
yAxis: {
  type: 'category',
  axisLabel: {
    color: 'white',
  },
  data: [],
},
series: [
  {
    name: '',
    type: 'bar',
    label: {
      show: true,
    },
    data: [],
  },
],

熱力圖

ECharts 熱力圖是一種數(shù)據(jù)可視化的圖表類型，它通過顏色的深淺來表示數(shù)據(jù)的大小或密集程度。在熱力圖中，數(shù)據(jù)通常以矩形網(wǎng)格的形式呈現(xiàn)，每個小矩形格子的顏色深淺代表該位置上的數(shù)據(jù)大小，一般使用漸變色來表達數(shù)據(jù)的強弱。

min：表示熱力圖數(shù)據(jù)值中的最小值。在熱力圖中，所有小于或等于 min 的數(shù)據(jù)值都將被視為該范圍的下限，通常用于確定顏色映射的起始點。
max：表示熱力圖數(shù)據(jù)值中的最大值。相應(yīng)地，所有大于或等于 max 的數(shù)據(jù)值都將被視為該范圍的上限，用于確定顏色映射的終點。

可以從實現(xiàn)的效果圖中看出，熱力圖數(shù)據(jù)基本都是0.xx，所以我將最大值設(shè)置為1.0，如果設(shè)置的數(shù)值過大，會出現(xiàn)所有顏色基本一致的情況，看不出具體差異。

visualMap: {
  min: -0.75,
  max: 1.0,
  calculable: true,
  orient: 'horizontal',
  left: 'center',
  bottom: '15%',
},
series: [
  {
    name: 'Punch Card',
    type: 'heatmap',
    data: data,
    label: {
      show: true,
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
      },
    },
  },
],

中國地圖

注冊地圖

在 ECharts 中，需要先注冊地圖類型才能使用。對于中國地圖，可以使用 echarts.registerMap 方法注冊地圖數(shù)據(jù)。注冊時，需要指定地圖的名稱（如china）和地圖數(shù)據(jù)（即之前準(zhǔn)備的 JSON 數(shù)據(jù)文件）。

配置地圖選項

通過配置 ECharts 實例的 option 屬性，可以定義地圖的顯示樣式、數(shù)據(jù)系列、提示框、視覺映射組件（visualMap）等。對于該地圖，通常需要設(shè)置地圖的標(biāo)題、數(shù)據(jù)系列類型為map、地圖類型為china等。同時，還可以通過 series 屬性中的 data 數(shù)組來設(shè)置各個省份或城市的數(shù)據(jù)，這些數(shù)據(jù)將用于控制地圖上的顏色深淺或圖標(biāo)大小等。

渲染地圖

配置完 option 屬性后，調(diào)用 ECharts 實例的 setOption 方法，將配置對象傳入，即可渲染出中國地圖。

此時，地圖將按照配置顯示數(shù)據(jù)，并支持交互操作，如縮放、拖動等。

myEcharts.setOption({
  geo: {
    map: 'china', // 中國地圖
    roam: true, // 是否開啟放大縮小/拖拽功能
    // 地圖的位置調(diào)試
    left: 150,
    top: 120,
    right: 150,
    bottom: 0,
    // 縮放比列
    zoom: 1.12,
    // 地圖中心點位置
    layoutCenter: ['50%', '50%'],
    // 地圖上的文字的設(shè)置
    label: {
      show: true,
      color: 'white',
      fontSize: 14,
    },
    // itemStyle地圖區(qū)域的多邊形圖形樣式
    itemStyle: {
      areaColor: '#12235c', // 地圖區(qū)域的顏色
      // borderColor: '#2ab8ff', // 圖形的描邊顏色
      borderColor: 'rgba(147, 235, 248, 1)',
      borderWidth: 0.8,
      shadowColor: 'rgba(128, 217, 248, .8)',
      shadowOffsetX: -2,
      shadowOffsetY: 2,
      shadowBlur: 10,
      opacity: 0.9,
    },
    // 地圖高亮的效果
    emphasis: {
      label: {
        color: 'white',
        fontSize: 32,
        // fontWeight: 'bold',
      },
      itemStyle: {
        // areaColor: '#5470c6',
        borderWidth: 2,
        borderType: 'dashed', // 高亮?xí)r虛線邊框
      },
      // focus: 'self', // 鼠標(biāo)移入地區(qū)，其余地區(qū)淡出
    },
  },
  // 布局位置
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
  // 航線的設(shè)置
  series: [
    {
      type: 'lines', // 航線的系列
      data: [
        {
          // 北京->河南
          coords: [
            [116.405285, 39.904989], // 起點
            [113.665412, 34.757975], // 終點
          ],
        },
        {
          // 河南->北京
          coords: [
            [113.665412, 34.757975],
            [116.405285, 39.904989],
          ],
        },
        {
          // 北京->黑龍江
          coords: [
            [116.405285, 39.904989],
            [126.642464, 45.756967],
          ],
        },
        {
          // 黑龍江->北京
          coords: [
            [126.642464, 45.756967],
            [116.405285, 39.904989],
          ],
        },
        {
          // 河南->浙江
          coords: [
            [113.665412, 34.757975],
            [120.153576, 30.287459],
          ],
        },
        {
          // 浙江->河南
          coords: [
            [120.153576, 30.287459],
            [113.665412, 34.757975],
          ],
        },
        {
          // 浙江->臺灣
          coords: [
            [120.153576, 30.287459],
            [121.509062, 25.044332],
          ],
        },
      ],
      // 開啟動畫特效
      effect: {
        show: true,
        period: 5, // 箭頭指向速度，值越小速度越快
        trailLength: 0, // 特效尾跡長度[0,1]值越大，尾跡越長
        // symbol: 'arrow', // 箭頭圖標(biāo)
        symbol: planePath, // 箭頭圖標(biāo)使用引入的箭頭
        symbolSize: 18,
      },
      // 線路統(tǒng)一的樣式設(shè)置
      lineStyle: {
        color: '#00eaff',
        width: 1.5, // 尾跡線條寬度
        opacity: 0.7, // 尾跡線條透明度
        curveness: 0.3, // 尾跡線條曲直度
      },
    },
  ],
});

到此為止，整個大屏基本上就開發(fā)完成了！

AI 能力體驗

在整個項目的開發(fā)過程中，真切體會到豆包MarsCode 內(nèi)置 AI 的強大，于是單獨列個模塊再來介紹一下。

AI 對話視圖

側(cè)邊聊天：側(cè)邊對話框（Side AI Chat）位于工作區(qū)右側(cè)。你可以通過快捷鍵（macOS：?+U；Windows：Ctrl+U）喚起對話框，或直接點擊側(cè)邊欄中的 AI 按鈕喚起。

側(cè)邊對話框（Side AI Chat）

內(nèi)嵌聊天：當(dāng)我們選中一段代碼之后會自動彈出 AI 功能導(dǎo)航，可以進行代碼解釋、注釋、生成單元測試。

內(nèi)嵌聊天

代碼注釋：自己不想寫的時候可以直接通過 AI 來生成，通過選擇 Y、N 即可決定是否使用自動生成的注釋。

代碼注釋

使用 AI 能力

AI 問答：喚起對話框后，你可以在輸入框中輸入你的問題，然后點擊「發(fā)送」按鈕或敲擊回車鍵，AI 助手就會對你的問題進行回答。你可以進行多輪問答，不斷補充細節(jié)，從而使 AI 助手的回答更加準(zhǔn)確。

補全代碼： AI 助手支持自動補全當(dāng)前代碼。

使用 AI 能力補全代碼

總結(jié)

豆包MarsCode 編程助手是一款功能強大的開發(fā)工具，它通過集成先進的 AI 技術(shù)，為開發(fā)者提供了從代碼編寫到測試、維護的全流程支持。在整個開發(fā)流程中，我都真切感受到了在線開發(fā)工具的便捷、高效、流暢。對于希望提高開發(fā)效率、降低維護成本并提升軟件質(zhì)量的團隊來說，是一個值得考慮的選擇！

歡迎感興趣的各位進一步查閱其官方文檔和社區(qū)資源，更深入地了解其功能和實踐。

點擊「豆包MarsCode AI編程助手」即可體驗豆包MarsCode～???

CSS 前端 ECharts AI編程豆包 MarsCode

1 人點贊