007_散点图
1. 散點圖, 也是一種常見的圖表類型。散點圖由許多"點"組成, 有時, 這些點用來表示數據在坐標系中的位置(比如: 在笛卡爾坐標系下, 表示數據在x軸和y軸上的坐標; 在地圖坐標系下, 表示數據在地圖上的某個位置等); 有時, 這些點的大小、顏色等屬性也可以映射到數據值, 用以表現高維數據。
2. 最簡單的散點圖
2.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>最簡單的散點圖</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><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><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><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><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><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. 效果圖
總結
- 上一篇： 005_折线图
- 下一篇： 009_调色盘和高亮样式