ECharts實現雷達圖詳解

来源:https://www.cnblogs.com/wgjava/p/18392833
-Advertisement-
Play Games

ECharts 是一款由百度開源的數據可視化工具，它提供了豐富的圖表類型，如折線圖、柱狀圖、餅圖、散點圖、雷達圖、地圖、K線圖、熱力圖、儀錶盤等，以及豐富的交互功能。ECharts 組件的核心功能實現原理主要包括以下幾個方面： 數據驅動： ECharts 採用數據驅動的設計理念，圖表的生成和更新都是 ...


ECharts 是一款由百度開源的數據可視化工具，它提供了豐富的圖表類型，如折線圖、柱狀圖、餅圖、散點圖、雷達圖、地圖、K線圖、熱力圖、儀錶盤等，以及豐富的交互功能。ECharts 組件的核心功能實現原理主要包括以下幾個方面：

  1. 數據驅動：
    ECharts 採用數據驅動的設計理念，圖表的生成和更新都是基於數據的。用戶通過設置 option 對象來描述圖表的配置，包括數據、坐標軸、系列類型、圖例等信息。

  2. Canvas 或 SVG 渲染：
    ECharts 支持使用 Canvas 或 SVG 作為底層渲染引擎。Canvas 適合動態或實時的圖表渲染，而 SVG 適合靜態或交互較多的圖表。ECharts 預設使用 Canvas 渲染。

  3. 響應式佈局：
    ECharts 支持響應式佈局，圖表容器的大小可以動態變化，圖表會根據容器的大小自動縮放。

  4. 動畫效果：
    ECharts 提供了豐富的動畫效果，包括數據的漸顯、數據的過渡動畫等，使得數據的變化更加直觀和生動。

  5. 交互功能：
    ECharts 支持多種交互功能，如工具提示（Tooltip）、數據縮放（DataZoom）、圖例開關（Legend）、坐標軸縮放（AxisZoom）等，增強了用戶的交互體驗。

  6. 事件監聽：
    ECharts 提供了事件監聽機制，用戶可以監聽並響應圖表的各種事件，如點擊、懸浮、數據項選擇等，從而實現複雜的交互邏輯。

  7. 多維度數據展示：
    ECharts 允許用戶在圖表中展示多維度的數據，例如在散點圖中通過數據點的顏色和大小來表示額外的維度。

  8. 擴展性和定製性：
    ECharts 提供了擴展和定製的能力，用戶可以通過自定義系列（Custom Series）和擴展插件來實現特殊的圖表效果。

  9. 性能優化：
    ECharts 進行了一系列的性能優化，如懶渲染、臟矩形渲染、層級渲染等，以支持大數據量的圖表渲染。

  10. 多語言支持：
    ECharts 支持多語言，可以根據用戶的語言偏好顯示不同的文本內容。

  11. 組件化設計：
    ECharts 的圖表由多個組件組成，如標題（Title）、工具箱（Toolbox）、圖例（Legend）、坐標軸（Axis）、數據系列（Series）等，每個組件都有獨立的配置項。

  12. 數據轉換和處理：
    ECharts 提供了數據轉換和處理的功能，如數據的過濾、排序、聚合等，使得數據可以按照用戶的需要進行展示。

ECharts 的實現原理涉及到了電腦圖形學、數據結構、動畫設計等多個領域的知識。它的設計哲學是簡單、靈活、可擴展，這使得它成為了數據可視化領域非常受歡迎的工具之一。

下麵我們以實現雷達圖為例，來介紹具體的代碼實現案例。

如何使用 ECharts 實現一個互動式的雷達圖？

要使用 ECharts 實現一個互動式的雷達圖，我們需要設置雷達圖的配置項，並且可以通過監聽用戶的交互事件來增強圖表的互動性，廢話不多說，上代碼：

步驟1：引入ECharts庫

首先，在你的HTML文件中引入ECharts庫：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

步驟2：創建圖表容器

在HTML文件中，為雷達圖創建一個容器：

<div id="main" style="width: 600px;height:400px;"></div>

步驟3：編寫雷達圖配置

在JavaScript中，初始化ECharts實例並配置雷達圖。我們需要定義雷達圖的指標（indicator），數據（series）以及其他配置項。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '互動式雷達圖'
    },
    tooltip: {},
    legend: {
        data: ['預算分配（Allocated Budget）', '實際開銷（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        indicator: [
           { name: '銷售（sales）', max: 6500},
           { name: '管理（Administration）', max: 16000},
           { name: '信息技術（Information Technology）', max: 30000},
           { name: '客服（Customer Support）', max: 38000},
           { name: '研發（Development）', max: 52000},
           { name: '市場（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '預算 vs 開銷（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data : [
            {
                value : [4200, 30000, 20000, 35000, 50000, 18000],
                name : '預算分配（Allocated Budget）'
            },
             {
                value : [5000, 14000, 28000, 26000, 42000, 21000],
                name : '實際開銷（Actual Spending）'
            }
        ]
    }]
};

myChart.setOption(option);

步驟4：添加交互功能

我們可以通過監聽ECharts提供的事件來添加交互功能，例如click事件、mouseover事件等。

myChart.on('click', function (params) {
    // 點擊雷達圖的某個區域時的交互邏輯
    console.log(params.name); // 列印點擊的區功能變數名稱稱
});

myChart.on('mouseover', function (params) {
    // 滑鼠懸浮在雷達圖的某個區域時的交互邏輯
    console.log(params.seriesName); // 列印滑鼠懸浮的數據系列名稱
});

步驟5：測試雷達圖

完事，我們在瀏覽器中打開HTML文件，查看雷達圖是否按預期顯示，並且看下交互功能是否正常工作。

來解釋一下

  • 雷達圖配置：在option對象中，radar屬性定義了雷達圖的結構，包括指標（indicator）的最大值和名稱。series屬性定義了數據系列，每個系列可以表示一組數據。
  • 事件監聽：通過myChart.on方法監聽圖表事件，當用戶與圖表交互時（如點擊或懸浮），可以執行相應的邏輯。

如何使用 ECharts 實現一個帶有多個系列的雷達圖？

進一步看看，我們要在 ECharts 中實現一個帶有多個系列的雷達圖，就需要在配置項中定義多個系列（series），每個系列可以表示一組數據。來看一下代碼實現：

步驟1：引入ECharts庫

首先，在我們的HTML文件中引入ECharts庫：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

步驟2：創建圖表容器

在HTML文件中，為雷達圖創建一個容器：

<div id="main" style="width: 600px;height:400px;"></div>

步驟3：編寫雷達圖配置

在JavaScript中，初始化ECharts實例並配置雷達圖。我們需要定義雷達圖的指標（indicator），多個數據系列（series）以及其他配置項。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '多系列雷達圖'
    },
    tooltip: {},
    legend: {
        data: ['系列1', '系列2']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '維度1', max: 100},
            { name: '維度2', max: 100},
            { name: '維度3', max: 100},
            { name: '維度4', max: 100},
            { name: '維度5', max: 100}
        ]
    },
    series: [{
        name: '系列1',
        type: 'radar',
        data : [
            {
                value : [80, 70, 90, 60, 70],
                name : '系列1'
            }
        ]
    },
    {
        name: '系列2',
        type: 'radar',
        data : [
            {
                value : [90, 80, 70, 90, 80],
                name : '系列2'
            }
        ]
    }]
};

myChart.setOption(option);

步驟4：測試雷達圖

現在可以在瀏覽器中打開這個HTML文件，來查看雷達圖是否按預期顯示，並且多個系列是否正確展示，就不展示效果圖了。

來解釋一下代碼實現

  • 雷達圖配置：在option對象中，radar屬性定義了雷達圖的結構，包括指標（indicator）的最大值和名稱。series屬性定義了多個數據系列，每個系列可以表示一組數據。
  • 數據系列：每個系列通過type: 'radar'指定為雷達圖類型，data屬性包含一個數組，數組中的每個對象代表一個數據點，value屬性是一個數組，包含了每個維度的值。

如何為 ECharts 雷達圖設置不同的顏色和標簽？

在 ECharts 中為雷達圖設置不同的顏色和標簽，可以通過配置項中的 series 和 radar 屬性來實現：

步驟1：引入ECharts庫

在HTML文件中引入ECharts庫：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

步驟2：創建圖表容器

在HTML文件中，為雷達圖創建一個容器：

<div id="main" style="width: 600px;height:400px;"></div>

步驟3：編寫雷達圖配置

在JavaScript中，初始化ECharts實例並配置雷達圖，我們就可以在 series 中設置不同的顏色和標簽。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '多系列雷達圖'
    },
    tooltip: {},
    legend: {
        data: ['系列1', '系列2']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '維度1', max: 100},
            { name: '維度2', max: 100},
            { name: '維度3', max: 100},
            { name: '維度4', max: 100},
            { name: '維度5', max: 100}
        ],
        splitLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
            }
        },
        splitArea: {
            areaStyle: {
                color: ['rgba(114, 172, 209, 0.2)', 'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)', 'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)']
            }
        }
    },
    series: [{
        name: '系列1',
        type: 'radar',
        color: '#f9713c', // 設置系列顏色
        data : [
            {
                value : [80, 70, 90, 60, 70],
                name : '系列1'
            }
        ]
    },
    {
        name: '系列2',
        type: 'radar',
        color: '#b3e4a1', // 設置系列顏色
        data : [
            {
                value : [90, 80, 70, 90, 80],
                name : '系列2'
            }
        ]
    }]
};

myChart.setOption(option);

步驟4：測試雷達圖

接下來測試一下，在瀏覽器中打開HTML文件，查看雷達圖，每個系列具有不同的顏色和標簽。

繼續解釋一下代碼實現

  • 顏色設置：在 series 配置中，通過 color 屬性為每個系列設置不同的顏色。
  • 標簽設置：在 radar 配置中，name 屬性定義了雷達圖中每個維度的標簽樣式，包括文本顏色和背景顏色。
  • 分割線和區域顏色：splitLine 和 splitArea 屬性分別定義了雷達圖的分割線和區域顏色，可以設置為漸變色或不同的顏色。

如何為 ECharts 雷達圖添加動態數據更新功能？

為 ECharts 雷達圖添加動態數據更新功能，我們可以使用 JavaScript 的定時器（如 setInterval）來定期從伺服器獲取新數據，並使用 ECharts 提供的 setOption 方法來更新圖表：

步驟1：引入ECharts庫

在HTML文件中引入ECharts庫：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

步驟2：創建圖表容器

在HTML文件中，為雷達圖創建一個容器：

<div id="main" style="width: 600px;height:400px;"></div>

步驟3：初始化雷達圖

在JavaScript中，初始化ECharts實例並設置初始的雷達圖配置。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // 雷達圖的初始配置
    // ...
};

myChart.setOption(option);

步驟4：定義數據更新函數

創建一個函數來獲取新數據並更新雷達圖。我們可以使用 AJAX 請求從伺服器獲取數據，或者使用任何其他方法來獲取數據。

function fetchDataAndUpdateChart() {
    // 假設這是獲取數據的函數，可以是AJAX請求或其他方式
    // 這裡使用setTimeout模擬數據更新
    setTimeout(function () {
        var newData = {
            value: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100],
            name: '動態數據'
        };
        
        // 更新雷達圖數據
        myChart.setOption({
            series: [{
                name: '系列1',
                data: [newData]
            }]
        });
        
        // 遞歸調用以實現定期更新
        fetchDataAndUpdateChart();
    }, 2000); // 每2秒更新一次數據
}

// 初始調用數據更新函數
fetchDataAndUpdateChart();

O了，完美展示一下效果。

解釋代碼

  • 初始化雷達圖：設置雷達圖的初始配置，包括標題、工具提示、圖例、雷達指標、系列等。
  • 動態數據更新：通過 fetchDataAndUpdateChart 函數定期獲取新數據，並使用 setOption 方法更新雷達圖。在這個例子中，使用 setTimeout 來模擬定期從伺服器獲取數據。
  • 遞歸調用：在 fetchDataAndUpdateChart 函數的末尾遞歸調用自身，以實現定時更新數據。

最後

以上就是使用 ECharts 來實現雷達圖的案例介紹，使用 ECharts實現數據大屏的展示，可以很炫，比如像這樣的圖：
https://www.bocloud.com.cn/manager/upload/202303/07/202303071455311822.png

好了，今天的內容就到這裡，歡迎關註威哥愛編程，原創不易，感謝點贊關註評論，支持一下唄。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 微信小程式 BLE 基礎業務介面封裝
    寫在前面：本文所述未必符合當前最新情形（包括藍牙技術發展、微信小程式介面迭代等）。 微信小程式為藍牙操作提供了很多介面，但在實際開發過程中，會發現隱藏了不少坑。目前主流藍牙應用都是基於低功耗藍牙（BLE）的，本文介紹相關的幾個基礎介面，並對其進行封裝，便於業務層調用。 藍牙發展 在開發藍牙應用程式之 ...
  • Flutter調試debug或者打包release幀率只有60的原因
    問題描述 最近發現Flutter中引入像素較大的靜態圖片或者字體導致調試或者打包之後在高刷手機上幀率只有60的問題。 測試設備為小米13，可在開發者選項中直接打開幀率顯示， 也可使用statsfl插件顯示幀率 StatsFl( maxFps: 120, // Support custom FPS t ...
  • C中的記憶體分配模型
    在 C 語言中，記憶體分配主要分為以下幾個區域： 一、棧（Stack） 存儲內容： 局部變數：在函數內部聲明的變數，包括自動變數和函數參數。 函數調用信息：當函數被調用時，會在棧上分配空間來存儲函數的返回地址、參數和局部變數。 特點： 記憶體由編譯器自動管理，分配和釋放非常高效。 空間相對較小，一般幾兆 ...
  • 全網最全：華為鴻蒙高級認證資料考試習題彙總
    【HM】華為鴻蒙高級認證資料 目錄【HM】華為鴻蒙高級認證資料判斷題單選題多選題其它 判斷題 【判斷題】每調用一次router.pushUrl()方法，預設情況下，頁面棧數量會加1，頁面棧支持的最大頁面數量為32。正確(True) 【判斷題】首選項preferences是以Key-Value形式存儲 ...
  • 小紅書分享踩坑和解決
    存儲區​ Android 一開始就將存儲區分為內部存儲和外部存儲，對應手機自帶的存儲和可插拔的 sd 卡（可類比於 PC 的硬碟和 U盤）。 內部存儲容量有限，Google 建議 App 數據儘量存儲於外部存儲中。 隨著硬體技術發展，自帶大容量空間的手機開始出現，關於內部存儲的描述逐漸偏離現實了，於 ...
  • 鴻蒙Next-支付寶SDK接入教程
    App適配鴻蒙Next，開始做支付功能了，目前來說只有支付寶支持鴻蒙Next，微信還沒上架，但是支付寶官方的文檔跟Demo都很老，下載官方的Demo用最新版的DevEco-Studio導入都不成功。 後面在OpenHarmony三方庫中心倉找到了最新的代碼： https://ohpm.openhar ...
  • [JS] 數組空位與遍歷方法
    當數組中存在空位時，遍曆數組需要選擇合適的方法，不同的方法可能返回不同的結果，有些方法會跳過空位，有些則會返回undefined。 ...
  • 使用 nuxi dev 啟動 Nuxt 應用程式的詳細指南
    title: 使用 nuxi dev 啟動 Nuxt 應用程式的詳細指南 date: 2024/9/2 updated: 2024/9/2 author: cmdragon excerpt: 摘要：本文介紹了使用 nuxi dev 命令啟動 Nuxt 應用程式的方法，包括安裝 Nuxt.js、啟動開 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類