建站
咨詢
售后
建站咨詢
新聞中心
在 ECharts 系列中通過使用 series[i]-scatter 來(lái)實(shí)現(xiàn)散點(diǎn)（氣泡）圖。直角坐標(biāo)系上的散點(diǎn)圖可以用來(lái)展現(xiàn)數(shù)據(jù)的 x，y 之間的關(guān)系，如果數(shù)據(jù)項(xiàng)有多個(gè)維度，其它維度的值可以通過不同大小的 symbol 展現(xiàn)成氣泡圖，也可以用顏色來(lái)表現(xiàn)。這些可以配合 visualMap 組件完成。
創(chuàng)新互聯(lián)建站是一家專業(yè)提供翁牛特企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為翁牛特眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。
點(diǎn)擊編輯實(shí)例 》》
ECharts 散點(diǎn)圖可以應(yīng)用在直角坐標(biāo)系，極坐標(biāo)系，地理坐標(biāo)系上。
Tip: ECharts 2.x 中在地圖上通過 markPoint 標(biāo)記大量數(shù)據(jù)點(diǎn)方式在 ECharts 3 中建議通過地理坐標(biāo)系上的 scatter 實(shí)現(xiàn)。下面示例就是在中國(guó)地圖上用散點(diǎn)圖展現(xiàn)了空氣質(zhì)量的分布。并且用 visualMap 組件將 PM2.5 映射到了顏色。series[i]-scatter.type
設(shè)置 ECharts 散點(diǎn)圖，取值為 string 類型，此處的值為 scatter。
series[i]-scatter.name
設(shè)置散點(diǎn)圖系列的名稱，取值類型為 string用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。
series[i]-scatter.coordinateSystem
散點(diǎn)圖系列使用的坐標(biāo)系，值類型為 string，默認(rèn)值為 cartesian2d；以下是可選的取值：
- 'cartesian2d'：使用二維的直角坐標(biāo)系（也稱笛卡爾坐標(biāo)系），通過 xAxisIndex, yAxisIndex指定相應(yīng)的坐標(biāo)軸組件。
- 'polar'：使用極坐標(biāo)系，通過 polarIndex 指定相應(yīng)的極坐標(biāo)組件
- 'geo'：使用地理坐標(biāo)系，通過 geoIndex 指定相應(yīng)的地理坐標(biāo)系組件。
series[i]-scatter.xAxisIndex
散點(diǎn)圖使用的 x 軸的 index，在單個(gè)圖表實(shí)例中存在多個(gè) x 軸的時(shí)候有用。取值類型為 number，默認(rèn)值為 0。
series[i]-scatter.yAxisIndex
散點(diǎn)圖使用的 y 軸的 index，在單個(gè)圖表實(shí)例中存在多個(gè) y 軸的時(shí)候有用。取值類型為 number，默認(rèn)值為 0。
series[i]-scatter.polarIndex
散點(diǎn)圖使用的極坐標(biāo)系的 index，在單個(gè)圖表實(shí)例中存在多個(gè)極坐標(biāo)系的時(shí)候有用。取值類型為 number，默認(rèn)值為 0。
series[i]-scatter.geoIndex
散點(diǎn)圖使用的地理坐標(biāo)系的 index，在單個(gè)圖表實(shí)例中存在多個(gè)地理坐標(biāo)系的時(shí)候有用。取值類型為 number，默認(rèn)值為 0。
series[i]-scatter.calendarIndex
使用的日歷坐標(biāo)系的 index，在單個(gè)圖表實(shí)例中存在多個(gè)日歷坐標(biāo)系的時(shí)候有用。取值類型為 number，默認(rèn)值為 0。
series[i]-scatter.hoverAnimation
是否在散點(diǎn)圖中開啟鼠標(biāo) hover 的提示動(dòng)畫效果。取值類型為 boolean。
series[i]-scatter.legendHoverLink
是否啟用散點(diǎn)圖圖例 hover 時(shí)的聯(lián)動(dòng)高亮。取值類型為 boolean，默認(rèn)值為 true。
series[i]-scatter.symbol
在散點(diǎn)圖中使用的標(biāo)記的圖形。取值類型為 string，默認(rèn)值為 circle。
ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
也可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI。
可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導(dǎo)出。
series[i]-scatter.symbolSize
標(biāo)記的大小，取值類型為 number, Array, Function，默認(rèn)值為 10?？梢栽O(shè)置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如 [20, 10] 表示標(biāo)記寬為20，高為10。
如果需要每個(gè)數(shù)據(jù)的圖形大小不一樣，可以設(shè)置為如下格式的回調(diào)函數(shù)：
(value: Array|number, params: Object) => number|Array其中第一個(gè)參數(shù) value 為 data 中的數(shù)據(jù)值。第二個(gè)參數(shù) params 是其它的數(shù)據(jù)項(xiàng)參數(shù)。
series[i]-scatter.symbolRotate
標(biāo)記的旋轉(zhuǎn)角度，取值類型為 number。
注意：在 markLine 中當(dāng) symbol 為 'arrow' 時(shí)會(huì)忽略 symbolRotate 強(qiáng)制設(shè)置為切線的角度。series[i]-scatter.symbolOffset
標(biāo)記相對(duì)于原本位置的偏移，取值類型為 Array，默認(rèn)值為 [0, 0]。
默認(rèn)情況下，標(biāo)記會(huì)居中置放在數(shù)據(jù)對(duì)應(yīng)的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時(shí)候可以使用該配置項(xiàng)配置 symbol 相對(duì)于原本居中的偏移，可以是絕對(duì)的像素值，也可以是相對(duì)的百分比。
例如 [0, '50%'] 就是把自己向上移動(dòng)了一半的位置，在 symbol 圖形是氣泡的時(shí)候可以讓圖形下端的箭頭對(duì)準(zhǔn)數(shù)據(jù)點(diǎn)。
series[i]-scatter.large
是否開啟大規(guī)模散點(diǎn)圖的優(yōu)化，在數(shù)據(jù)圖形特別多的時(shí)候（>=5k）可以開啟。取值類型為 boolean，默認(rèn)值為 true。
開啟后配合 largeThreshold 在數(shù)據(jù)量大于指定閾值的時(shí)候?qū)L制進(jìn)行優(yōu)化。
缺點(diǎn)：優(yōu)化后不能自定義設(shè)置單個(gè)數(shù)據(jù)項(xiàng)的樣式。
series[i]-scatter.largeThreshold
散點(diǎn)圖開啟繪制優(yōu)化的閾值。取值類型為 number，默認(rèn)值為 2000。
series[i]-scatter.cursor
鼠標(biāo)懸浮時(shí)在圖形元素上時(shí)鼠標(biāo)的樣式是什么。取值類型為 string，默認(rèn)值為 pointer。同 CSS 的 cursor。
series[i]-scatter.label
圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息，比如值，名稱等，label選項(xiàng)在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中為了讓整個(gè)配置項(xiàng)結(jié)構(gòu)更扁平合理，label 被拿出來(lái)跟 itemStyle 平級(jí)，并且跟 itemStyle 一樣擁有 normal, emphasis 兩個(gè)狀態(tài)。
series[i]-scatter.itemStyle
圖形樣式，有 normal 和 emphasis 兩個(gè)狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。
series[i]-scatter.dimensions
使用 dimensions 定義 data 每個(gè)維度的信息，取值類型為 Array。例如：
series: {
type: 'xxx',
// 定義了每個(gè)維度的名稱。這個(gè)名稱會(huì)被顯示到默認(rèn)的 tooltip 中。
dimensions: ['date', 'open', 'close', 'highest', 'lowest']
data: [
// 有了上面 dimensions 定義后，下面這五個(gè)維度的名稱分別為：
// 'date', 'open', 'close', 'highest', 'lowest'
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
}series: {
type: 'xxx',
dimensions: [
null, // 如果此維度不想給出定義，則使用 null 即可
{type: 'ordinal'}, // 只定義此維度的類型。
// 'ordinal' 表示離散型，一般文本使用這種類型。
// 如果類型沒有被定義，會(huì)自動(dòng)猜測(cè)類型。
{name: 'good', type: 'number'},
'bad' // 等同于 {name: 'bad'}
]
}dimensions 數(shù)組中的每一項(xiàng)可以是：
- string，如 'someName'，等同于 {name: 'someName'}
- Object，屬性可以有：name: string。type: string，支持
- number
- float，即 Float64Array
- int，即 Int32Array
- ordinal，表示離散數(shù)據(jù)，一般指字符串。
- time，表示時(shí)間類型，時(shí)間類型的支持參見 data
值得一提的是，當(dāng)定義了 dimensions 后，默認(rèn) tooltip 中對(duì)個(gè)維度的顯示，會(huì)變?yōu)椤贺Q排』，從而方便顯示每個(gè)維度的名稱。如果沒有定義 dimensions，則默認(rèn) tooltip 會(huì)橫排顯示，且只顯示數(shù)值沒有維度名稱可顯示。
series[i]-scatter.encode
可以定義 data 的哪個(gè)維度被編碼成什么。比如：
series: {
type: 'xxx',
encode: {
x: [3, 1, 5], // 表示維度 3、1、5 映射到 x 軸。
y: 2, // 表示維度 2 映射到 y 軸。
tooltip: [3, 2, 4] // 表示維度 3、2、4 會(huì)在 tooltip 中顯示。
label: 3 // 表示 label 使用維度 3。
},
data: [
// 每一列稱為一個(gè)『維度』。
// 這里分別是維度 0、1、2、3、4。
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
}encode 支持的屬性，根據(jù)坐標(biāo)系不同而不同。 對(duì)于 直角坐標(biāo)系（cartesian2d），支持 x、y。 對(duì)于 極坐標(biāo)系（polar），支持 radius、angle。 對(duì)于 地理坐標(biāo)系（geo），支持 lng，lat。 此外，均支持 tooltip 和 label 和 itemName（用于指定 tooltip 中數(shù)據(jù)項(xiàng)名稱）。
當(dāng)使用 dimensions 給維度定義名稱后，encode 中可直接引用名稱，例如：
series: {
type: 'xxx',
dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
encode: {
x: 'date',
y: ['open', 'close', 'highest', 'lowest']
},
data: [ ... ]
}series[i]-scatter.data[i]
系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)通常為具體的數(shù)據(jù)項(xiàng)。
通常來(lái)說，數(shù)據(jù)用一個(gè)二維數(shù)組表示。如下，每一列被稱為一個(gè)『維度』。
series: [{
data: [
// 維度X 維度Y 其他維度 ...
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]
]
}]- 在 直角坐標(biāo)系 (grid) 中『維度X』和『維度Y』會(huì)默認(rèn)對(duì)應(yīng)于 xAxis 和 yAxis。
- 在 極坐標(biāo)系 (polar) 中『維度X』和『維度Y』會(huì)默認(rèn)對(duì)應(yīng)于 radiusAxis 和 angleAxis。
- 后面的其他維度是可選的，可以在別處被使用，例如：
- 在 visualMap 中可以將一個(gè)或多個(gè)維度映射到顏色，大小等多個(gè)圖形屬性上。
- 在 series.symbolSize 中可以使用回調(diào)函數(shù)，基于某個(gè)維度得到 symbolSize 值。
- 使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他維度的值展示出來(lái)。
特別地，當(dāng)只有一個(gè)軸為類目軸（axis.type 為 'category'）的時(shí)候，數(shù)據(jù)可以簡(jiǎn)化用一個(gè)一維數(shù)組表示。例如：
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 與 xAxis.data 一一對(duì)應(yīng)。
data: [23, 44, 55, 19]
// 它其實(shí)是下面這種形式的簡(jiǎn)化：
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]『值』與 軸類型 的關(guān)系：
- 當(dāng)某維度對(duì)應(yīng)于數(shù)值軸（axis.type 為 'value' 或者 'log'）的時(shí)候：
其值可以為 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'） - 當(dāng)某維度對(duì)應(yīng)于類目軸（axis.type 為 'category'）的時(shí)候：
其值須為類目的『序數(shù)』（從 0 開始）或者類目的『字符串值』。例如：xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四'] }, yAxis: { type: 'category', data: ['a', 'b', 'm', 'n', 'p', 'q'] }, series: [{ data: [ // xAxis yAxis [ 0, 0, 2 ], // 意思是此點(diǎn)位于 xAxis: '星期一', yAxis: 'a'。 [ '星期四', 2, 1 ], // 意思是此點(diǎn)位于 xAxis: '星期四', yAxis: 'm'。 [ 2, 'p', 2 ], // 意思是此點(diǎn)位于 xAxis: '星期三', yAxis: 'p'。 [ 3, 3, 5 ] ] }] - 當(dāng)某維度對(duì)應(yīng)于時(shí)間軸（type 為 'time'）的時(shí)候，值可以為：
- 一個(gè)時(shí)間戳，如 1484141700832，表示 UTC 時(shí)間。
- 或者字符串形式的時(shí)間描述：
- ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時(shí)區(qū)，否則均表示本地時(shí)間，與 moment 一致）：
- 部分年月日時(shí)間: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
- 使用 'T' 或空格分割: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
- 時(shí)區(qū)設(shè)定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
- 其他的時(shí)間字符串，包括（均表示本地時(shí)間）: '2012', '2012-3-1', '2012/3/1', '2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
- ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時(shí)區(qū)，否則均表示本地時(shí)間，與 moment 一致）：
- 或者用戶自行初始化的 Date 實(shí)例：
- 注意，用戶自行初始化 Date 實(shí)例的時(shí)候，瀏覽器的行為有差異，不同字符串的表示也不同。
- 例如：在 chrome 中，new Date('2012-01-01') 表示 UTC 時(shí)間的 2012 年 1 月 1 日，而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地時(shí)間的 2012 年 1 月 1 日。在 safari 中，不支持 new Date('2012-1-1')這種表示方法。
- 所以，使用 new Date(dataString) 時(shí)，可使用第三方庫(kù)解析（如 moment），或者使用 echarts.number.parseDate，或者參見 這里。
當(dāng)需要對(duì)個(gè)別數(shù)據(jù)進(jìn)行個(gè)性化定義時(shí)：
數(shù)組項(xiàng)可用對(duì)象，其中的 value 像表示具體的數(shù)值，如：
[
12,
34,
{
value : 56,
//自定義標(biāo)簽樣式，僅對(duì)該數(shù)據(jù)項(xiàng)有效
label: {},
//自定義特殊 itemStyle，僅對(duì)該數(shù)據(jù)項(xiàng)有效
itemStyle:{}
},
10
]
// 或
[
[12, 33],
[34, 313],
{
value: [56, 44],
label: {},
itemStyle:{}
},
[10, 33]
]空值：
當(dāng)某數(shù)據(jù)不存在時(shí)（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。
例如，無(wú)數(shù)據(jù)在折線圖中可表現(xiàn)為該點(diǎn)是斷開的，在其它圖中可表示為圖形不存在。
series[i]-scatter.markPoint
設(shè)置散點(diǎn)圖圖表的標(biāo)注。
series[i]-scatter.markLine
設(shè)置散點(diǎn)圖圖表的標(biāo)線。
series[i]-scatter.markArea
散點(diǎn)圖圖表的標(biāo)域，常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù)，例如標(biāo)出某段時(shí)間投放了廣告。
series[i]-scatter.zlevel
散點(diǎn)圖所有圖形的 zlevel 值。取值類型為 number，默認(rèn)值為0。
zlevel用于 Canvas 分層，不同zlevel值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過多的 Canvas 會(huì)引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。
series[i]-scatter.z
散點(diǎn)圖組件的所有圖形的z值。取值類型為 number，默認(rèn)值為2?？刂茍D形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。
z相比zlevel優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。
series[i]-scatter.silent
圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，取值類型為 boolean，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。
series[i]-scatter.animation
散點(diǎn)圖是否開啟動(dòng)畫。取值類型為 boolean，默認(rèn)值為 true。
series[i]-scatter.animationThreshold
是否開啟動(dòng)畫的閾值，當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫。取值類型為 number，默認(rèn)值為 2000。
series[i]-scatter.animationDuration
初始動(dòng)畫的時(shí)長(zhǎng)，取值類型為 number，默認(rèn)值為 1000。支持回調(diào)函數(shù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果：
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}series[i]-scatter.animationEasing
初始動(dòng)畫的緩動(dòng)效果。取值類型為 string，默認(rèn)值為 cubicOut。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。
series[i]-scatter.animationDelay
初始動(dòng)畫的延遲，取值類型為 number，默認(rèn)值為 0。支持回調(diào)函數(shù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
series[i]-scatter.animationDurationUpdate
數(shù)據(jù)更新動(dòng)畫的時(shí)長(zhǎng)。取值類型為 number, Function，默認(rèn)值為 300。
支持回調(diào)函數(shù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果：
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}series[i]-scatter.animationEasingUpdate
數(shù)據(jù)更新動(dòng)畫的緩動(dòng)效果。取值類型為 string，默認(rèn)值為 cubicOut。
series[i]-scatter.animationDelayUpdate
數(shù)據(jù)更新動(dòng)畫的延遲，取值類型為 number, Function，默認(rèn)值為 0。
支持回調(diào)函數(shù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
名稱欄目：創(chuàng)新互聯(lián)ECharts教程：ECharts如何實(shí)現(xiàn)散點(diǎn)圖
當(dāng)前URL：http://m.fisionsoft.com.cn/article/cccssjo.html
