Echarts如何實現散點圖展示

ECharts 是一個使用 JavaScript 實現的開源可視化庫，可以用于生成各種圖表，包括散點圖。要在 ECharts 中實現散點圖展示，請按照以下步驟操作：

1. 首先，確保你已經在 HTML 頁面中引入了 ECharts 的 JavaScript 文件。你可以從 ECharts 官網下載，或者使用 CDN 鏈接。例如：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 在 HTML 頁面中，創建一個用于渲染散點圖的容器元素，例如一個具有指定寬度和高度的 div 元素：

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

3. 編寫 JavaScript 代碼，初始化 ECharts 實例并配置散點圖選項：

// 基于準備好的容器（這里是 id 為 'scatterChart' 的 div），初始化 echarts 實例
var myChart = echarts.init(document.getElementById('scatterChart'));

// 指定圖表的配置項和數據
var option = {
    title: {
        text: '散點圖示例'
    },
    tooltip: {},
    xAxis: {
        type: 'value',
        name: 'X軸'
    },
    yAxis: {
        type: 'value',
        name: 'Y軸'
    },
    series: [{
        name: '散點數據',
        type: 'scatter', // 設置圖表類型為散點圖
        data: [
            [10, 20],
            [20, 30],
            [30, 40],
            [40, 50],
            [50, 60]
        ],
        symbolSize: 10 // 設置散點大小
    }]
};

// 使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);

上述代碼將在頁面上生成一個包含散點圖的圖表。你可以根據需要修改 option 對象中的配置項，以實現不同的圖表樣式和功能。更多關于 ECharts 散點圖的配置選項，可以參考官方文檔：https://echarts.apache.org/zh/option.html#series-scatter