用豆包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.transform = `scale(${getScale()}) translate(-50%,-50%)`}

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

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

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

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

橫向柱狀圖 &?折線圖

x軸配置：

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

y軸配置：

類型為'category'，表示y軸為類目軸；
軸標簽的顏色為白色；
y軸的類目數據包括了多個汽車品牌名稱。

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

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

type：'line'?折線圖是用折線將各個數據點標志連接起來的圖表，用于展現數據的變化趨勢。

 ? ?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 熱力圖是一種數據可視化的圖表類型，它通過顏色的深淺來表示數據的大小或密集程度。在熱力圖中，數據通常以矩形網格的形式呈現，每個小矩形格子的顏色深淺代表該位置上的數據大小，一般使用漸變色來表達數據的強弱。

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

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

 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?方法注冊地圖數據。注冊時，需要指定地圖的名稱（如'china'）和地圖數據（即之前準備的 JSON 數據文件）。

配置地圖選項

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

渲染地圖

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

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

myEcharts.setOption({ ? ?// geo地理坐標系組件 支持在地理坐標系上繪制散點圖，線集 ? ?geo: { ? ? ?map: 'china', // 中國地圖 ? ? ?roam: true, // 是否開啟放大縮小/拖拽功能 ? ? ?//地圖的位置調試 ? ? ?left: 150, ? ? ?top: 120, ? ? ?right: 150, ? ? ?bottom: 0, ? ? ?// 縮放比列 ? ? ?zoom: 1.12, ? ? ?// 地圖中心點位置 ? ? ?layoutCenter: ['50%', '50%'], ? ? ?//地圖上的文字的設置 ? ? ?label: { ? ? ? ?show: true, ? ? ? ?color: 'white', ? ? ? ?fontSize: 14, ? ? ?}, ? ? ?// itemStyle地圖區域的多邊形 圖形樣式 ? ? ?itemStyle: { ? ? ? ?areaColor: '#12235c', // 地圖區域的顏色 ? ? ? ?// 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', // 高亮時虛線邊框 ? ? ? ?}, ? ? ? ?// focus: 'self', // 鼠標移入地區，其余地區淡出 ? ? ?}, ? ?}, ? ?//布局位置 ? ?grid: { ? ? ?left: 0, ? ? ?top: 0, ? ? ?right: 0, ? ? ?bottom: 0, ? ?}, ? ?// 航線的設置 series-lines ? ?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', // 箭頭圖標 ? ? ? ? ?symbol: planePath, // 箭頭圖標使用引入的箭頭 ? ? ? ? ?symbolSize: 18, ? ? ? ?}, ? ? ? ?// 線路統一的樣式設置 ? ? ? ?lineStyle: { ? ? ? ? ?color: '#00eaff', ? ? ? ? ?width: 1.5, //尾跡線條寬度 ? ? ? ? ?opacity: 0.7, //尾跡線條透明度 ? ? ? ? ?curveness: 0.3, //尾跡線條曲直度 ? ? ? ?}, ? ? ?}, ? ?], ?})