這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

Echarts繪製氣泡圖

氣泡圖是一種用於可視化三維數據的圖表類型，其中兩個變數用於確定數據點在平面上的位置，另一個變數用於確定氣泡的大小。Echarts是一款基於JavaScript的數據可視化庫，它提供了豐富的圖表類型，包括靈活多變的氣泡圖。本文將詳細介紹如何使用Echarts來繪製氣泡圖，並介紹氣泡圖相關的配置。

Echarts氣泡圖基礎

在Echarts中，要繪製氣泡圖需指定series的type為'scatter'併在series.data中為每個數據點指定一個數組，通常數組的前兩個值代表x軸和y軸的坐標，第三個值代表氣泡的大小（即氣泡半徑）。

以下是一個基礎的Echarts氣泡圖的配置例子：

var option = {
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.seriesName + ' :<br/>' +
                params.value[0] + 'cm ' +
                params.value[1] + 'kg ' +
                params.value[2] + '歲';
        }
    },
    xAxis: {
        scale: true,
        type: 'value',
        name: '身高(cm)'
    },
    yAxis: {
        scale: true,
        type: 'value',
        name: '體重(kg)'
    },
    series: [{
        name: '年齡',
        type: 'scatter',
        symbolSize: function (data) {
            return Math.sqrt(data[2]) * 5; // 根據值大小調整氣泡大小
        },
        data: [
            [161.2, 51.6, 25],
            [167.5, 59.0, 29],
            // ... 更多數據
        ],
        animationDelay: function (idx) {
            return idx * 100;
        }
    }]
};

配置項解析

tooltip

tooltip配置是圖表的提示框組件，可以在滑鼠懸浮時顯示數據的詳細信息。可以通過formatter屬性來定義提示框顯示的內容。

xAxis和yAxis

xAxis和yAxis配置定義了圖表的x軸和y軸，type一般為'value'表示數值軸。name屬性用於定義軸名稱，scale屬性設置為true時軸將不會強制包含零，這對於散點圖和氣泡圖非常重要，以便更真實地反映數據的分佈情況。

series

series數組的每個對象表示一組數據，對於氣泡圖，每個對象的type屬性設置為'scatter'。symbolSize函數用於根據數據點的值（如年齡）調整氣泡的大小。data屬性是一個數組，包含了圖表中每個氣泡的信息。

高級配置

Echarts的氣泡圖還有許多高級配置可以使圖表更加豐富和個性化，下麵將介紹其中一些重要的配置。

visualMap

visualMap組件可以根據數值映射到顏色，從而以顏色的變化來表示一個數據維度。

visualMap: {
    dimension: 2,
    min: 0,
    max: 100,
    calculable: true,
    inRange: {
        color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    textStyle: {
        color: '#fff'
    }
}

markArea, markPoint, markLine

這些是Echarts的標註工具，可以在圖表中標記特定區域、點或線條。

series: [{
    // ... 其他配置 ...
    markPoint: {
        data: [
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
        ]
    },
    markLine: {
        lineStyle: {
            normal: {
                type: 'solid'
            }
        },
        data: [
            {type: 'average', name: '平均值'}
        ]
    }
    // ... 其他配置 ...
}]

legend

圖例組件legend顯示了不同系列的標記，顏色和名稱，用戶可以通過點擊圖例來切換顯示的系列。

legend: {
    right: 10,
    data: ['年齡']
}

grid

grid組件可以控製圖表的位置和大小，在氣泡圖中經常需要調整，以便為氣泡留出足夠的空間。

grid: {
    left: '3%',
    right: '7%',
    bottom: '3%',
    containLabel: true
}

dataset

當有多個系列需要共用一套數據或者數據結構比較複雜時，使用dataset可以對數據進行集中管理。

dataset: {
    dimensions: ['身高', '體重', '年齡'],
    source: [
        [161.2, 51.6, 25],
        [167.5, 59.0, 29],
        // ... 更多數據
    ]
},
series: [{
    // ... 其他配置 ...
    encode: {
        x: '身高', // 映射到x軸的數據
        y: '體重', // 映射到y軸的數據
        z: '年齡'  // 映射到氣泡大小的數據
    }
    // ... 其他配置 ...
}]

emphasis

通過emphasis，可以設置當滑鼠懸浮在氣泡上時的樣式，如氣泡的邊線顏色、寬度等。

series: [{
    // ... 其他配置 ...
    emphasis: {
        itemStyle: {
            borderColor: 'blue',
            borderWidth: 2
        }
    }
    // ... 其他配置 ...
}]

自定義樣式和佈局

可以自定義氣泡的樣式，例如為氣泡添加陰影等，使得圖表看起來更具有立體感。

series: [{
    // ... 其他配置 ...
    itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5
    }
    // ... 其他配置 ...
}]

結語

氣泡圖在數據可視化中是展示多維數據關係的重要圖表類型。Echarts提供了豐富的配置項來創建豐富多彩、互動性強的氣泡圖。本文涵蓋的這些基礎與高級配置足以應對大多數的氣泡圖使用場景。

本文轉載於:

https://juejin.cn/post/7311216938751934516

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。