當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

007_散点图

發布時間：2025/5/22 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 007_散点图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 散點圖, 也是一種常見的圖表類型。散點圖由許多"點"組成, 有時, 這些點用來表示數據在坐標系中的位置(比如: 在笛卡爾坐標系下, 表示數據在x軸和y軸上的坐標; 在地圖坐標系下, 表示數據在地圖上的某個位置等); 有時, 這些點的大小、顏色等屬性也可以映射到數據值, 用以表現高維數據。

2. 最簡單的散點圖

2.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>最簡單的散點圖</title><script type="text/javascript" src="echarts.js"></script></head><body><div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '最簡單的散點圖'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['周銷量']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '周銷量', // 系列名稱type: 'scatter', // 系列圖表類型data: [820, 932, 901, 934, 1290, 1330, 1320] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>

2.2. 效果圖

3. 笛卡爾坐標系下的散點圖

3.1. 在上文的例子中, 散點圖的橫坐標都是離散的類目軸, 而縱坐標都是連續的數值軸。而對于散點圖而言, 另一種常見的場景是, 兩個坐標軸均為連續的數值軸, 也就是笛卡爾坐標系。這時的系列形式略有不同, 數據的橫坐標和縱坐標一同寫在data中, 而非坐標軸中。

3.2. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>笛卡爾坐標系下的散點圖</title><script type="text/javascript" src="echarts.js"></script></head><body><div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '笛卡爾坐標系下的散點圖'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['月銷售量']},// 配置要在X軸顯示的項xAxis: {},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '月銷售量', // 系列名稱type: 'scatter', // 系列圖表類型data: [ // 系列中的數據內容[1, 100],[2, 300],[3, 90],[4, 110],[5, 120],[6, 100],]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>

3.3. 效果圖

4. 圖形的大小

4.1. 圖形大小可以使用series.symbolSize控制。它既可以是一個表示圖形大小的像素值, 也可以是一個包含兩個number元素的數組, 分別表示圖形的寬和高。

4.2. 除此之外, 它還可以是一個回調函數, 第一個參數為數據值, 第二個參數是數據項的其他參數。

4.3. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圖形的大小</title><script type="text/javascript" src="echarts.js"></script></head><body><div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '圖形的大小'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['周銷量']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '周銷量', // 系列名稱type: 'scatter', // 系列圖表類型data: [820, 932, 901, 934, 1290, 1330, 1320], // 系列中的數據內容symbolSize: function(value, obj) {console.log(obj);return value / 30;}}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>

4.4. 效果圖

總結

以上是生活随笔為你收集整理的007_散点图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

散点图