Echarts繪制氣泡圖的示例代碼

更新時間：2023年12月12日 14:14:18 作者：程序員也要學好英語

Echarts是一款基于JavaScript的數(shù)據(jù)可視化庫,它提供了豐富的圖表類型,本文將詳細介紹如何使用Echarts來繪制氣泡圖,并介紹氣泡圖相關的配置,需要的可以參考下

Echarts繪制氣泡圖

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

Echarts氣泡圖基礎

在Echarts中，要繪制氣泡圖需指定series的type為'scatter'并在series.data中為每個數(shù)據(jù)點指定一個數(shù)組，通常數(shù)組的前兩個值代表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; // 根據(jù)值大小調整氣泡大小
        },
        data: [
            [161.2, 51.6, 25],
            [167.5, 59.0, 29],
            // ... 更多數(shù)據(jù)
        ],
        animationDelay: function (idx) {
            return idx * 100;
        }
    }]
};

配置項解析

tooltip

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

xAxis和yAxis

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

series

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

高級配置

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

visualMap

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

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

markArea, markPoint, markLine

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

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組件可以控制圖表的位置和大小，在氣泡圖中經(jīng)常需要調整，以便為氣泡留出足夠的空間。

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

dataset

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

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

emphasis

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

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

自定義樣式和布局

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

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