title標題
legend圖例
grid直角坐標系內(nèi)繪圖網(wǎng)
xAxis直角坐標系 grid 中的 x 軸
yAxis直角坐標系 grid 中的 y 軸
polar極坐標系
radiusAxis極坐標系的徑向軸
angleAxis極坐標系的角度軸
radar雷達圖坐標系組件
dataZoom區(qū)域縮放
visualMap 是視覺映射組件
tooltip提示框組件
axisPointer這是坐標軸指示器(axisPointer)的全局公用設置
toolbox工具欄叹哭。內(nèi)置有導出圖片消返,數(shù)據(jù)視圖拨扶,動態(tài)類型切換,數(shù)據(jù)區(qū)域縮放抽诉,重置五個工具贪薪。
brush是區(qū)域選擇組件
geo地理坐標系組件
parallel平行坐標系介紹
parallelAxis這個組件是平行坐標系中的坐標軸
singleAxis單軸吨艇⊥降可以被應用到散點圖中展現(xiàn)一維數(shù)據(jù).
timeline提供了在多個 ECharts option 間進行切換、播放等操作的功能
graphic 是原生圖形元素組件
- 可以支持的圖形元素包括:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
calendar日歷坐標系組件
dataset數(shù)據(jù)集組件
aria支持無障礙富互聯(lián)網(wǎng)應用規(guī)范集的組件(WAI-ARIA)
series正八經(jīng)的圖的繪制的方法
一下不同的圖的區(qū)別都是體現(xiàn)在相同的series屬性下的type上
series-line折線/面積圖
series-bar柱狀圖
series-pie餅圖
- 環(huán)形圖環(huán)內(nèi)字體設置
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
series-scatter散點(氣泡)圖
series-effectScatter帶有漣漪特效動畫的散點(氣泡)圖
series-radar雷達圖
浮層圖
...
tooltip{
trigger:"axis" //觸發(fā)器類型
}
...
series: [
{
name: "事件等級",
type: "radar",
tooltip: {
trigger: "item",//觸發(fā)器內(nèi)容
},
]
...
series-tree 樹圖
series-treemap它主要用面積的方式贺奠,便于突出展現(xiàn)出『樹』的各層級中重要的節(jié)點
series-sunburst旭日圖(Sunburst)由多層的環(huán)形圖組成
series-boxplot分散情況資料的統(tǒng)計圖
中文可以稱為『箱形圖』霜旧、『盒須圖』、『盒式圖』儡率、『盒狀圖』挂据、『箱線圖』航背,是一種用作顯示一組數(shù)據(jù)分散情況資料的統(tǒng)計圖。它能顯示出一組數(shù)據(jù)的最大值棱貌、最小值、中位數(shù)箕肃、下四分位數(shù)及上四分位數(shù)婚脱。
series-candlestick K線圖
series-heatmap熱力圖
series-map地圖
series-parallel平行坐標系的系列
series-lines路徑圖
series-graph關系圖
series-sankey桑基圖
series-funnel漏斗圖
series-gauge儀表盤
series-pictorialBar象形柱圖
series-themeRiver是一種特殊的流圖, 它主要用來表示事件或主題等在一段時間內(nèi)的變化
series-custom自定義系列
darkMode是否是暗黑模式
color調(diào)色盤顏色列表勺像。如果系列沒有設置顏色障贸,則會依次循環(huán)從該列表中取顏色作為系列顏色
默認:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
backgroundColor背景色,默認無背景
textStyle全局的字體樣式
animation是否開啟動畫
animationThreshold是否開啟動畫的閾值吟宦,當單個系列顯示的圖形數(shù)量大于這個閾值時會關閉動畫
animationDuration初始動畫的時長篮洁,支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的時長實現(xiàn)更戲劇的初始動畫效果
animationEasing初始動畫的緩動效果殃姓。不同的緩動效果可以參考 緩動示例袁波。
animationDelay初始動畫的延遲,支持回調(diào)函數(shù)蜗侈,可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果篷牌。
animationDurationUpdate數(shù)據(jù)更新動畫的時長
animationEasingUpdate數(shù)據(jù)更新動畫的緩動效果
animationDelayUpdate數(shù)據(jù)更新動畫的延遲
支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果踏幻。
stateAnimation狀態(tài)切換的動畫配置枷颊,支持在每個系列里設置單獨針對該系列的配置。
blendMode圖形的混合模式
圖形的混合模式该面,不同的混合模式見 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation 夭苗。
默認為 'source-over'
。 支持每個系列單獨設置隔缀。
'lighter'
也是比較常見的一種混合模式题造,該模式下圖形數(shù)量集中的區(qū)域會顏色疊加成高亮度的顏色(白色)。常常能起到突出該區(qū)域的效果猾瘸。見示例 全球飛行航線