ECharts學習總結
使用步驟
1 引入ECharts <script src="echarts.min.js"></script>
2 繪制一個簡單的圖表
為ECharts准備具備寬高的DOM容器
然后就可以通過 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法生成一個簡單的柱狀圖
//基於准備好的dom,初始化echarts實例
var myChart=echarts.init(document.getElementById('main'));
//指定圖表的配置和數據
var option={
title:{
text:'ECharts 入門示例'
},
tooltip:{}, //提示
legend:{ //圖例
data:['銷量']
},
xAxis:{ //坐標軸
data:["襯衫","羊絨衫","洗衣機","高跟鞋","褲子","雪紡衫"]
},
yAxis:{},
series:[{ //數據系列 type 表示什么形狀的圖形
name:'hahha',type:'bar',data:[2,5,20,37,100,107]
}]
};
//使用剛指定的配置頂好和數據顯示圖集。
myChart.setOption(option);
名詞解析
基本名詞
名詞 描述
chart 是指一個完整的圖表，如折線圖，餅圖等“基本”圖表類型或由基本圖表組合而成的“混搭”圖表，可能包括坐標軸、圖例等
axis 直角坐標系中的一個坐標軸，坐標軸可分為類目型、數值型或時間型
xAxis 直角坐標系中的橫軸，通常並默認為類目型
yAxis 直角坐標系中的縱軸，通常並默認為數值型
grid 直角坐標系中除坐標軸外的繪圖網格，用於定義直角系整體布局
legend 圖例，表述數據和圖形的關聯
dataRange 值域選擇，常用於展現地域數據時選擇值域范圍
dataZoom 數據區域縮放，常用於展現大量數據時選擇可視范圍
roamController 縮放漫游組件，搭配地圖使用
toolbox 輔助工具箱，輔助功能，如添加標線，框選縮放等
tooltip 氣泡提示框，常用於展現更詳細的數據
timeline 時間軸，常用於展現同一系列數據在時間維度上的多份數據
series 數據系列，一個圖表可能包含多個系列，每一個系列可能包含多個數據
圖表名詞
line 折線圖，堆積折線圖，區域圖，堆積區域圖。
bar 柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。
scatter 散點圖，氣泡圖。散點圖至少需要橫縱兩個數據，更高維度數據加入時可以映射為顏色或大小，當映射到大小時則為氣泡圖
k K線圖，蠟燭圖。常用於展現股票交易數據。
pie 餅圖，圓環圖。餅圖支持兩種（半徑、面積）南丁格爾玫瑰圖模式。
radar 雷達圖，填充雷達圖。高維度數據展現的常用圖表。
chord 和弦圖。常用於展現關系數據，外層為圓環圖，可體現數據占比關系，內層為各個扇形間相互連接的弦，可體現關系數據
force 力導布局圖。常用於展現復雜關系網絡聚類布局。
map 地圖。內置世界地圖、中國及中國34個省市自治區地圖數據、可通過標准GeoJson擴展地圖類型。支持svg擴展類地圖應用，如室內地圖、運動場、物件構造等。
heatmap 熱力圖。用於展現密度分布信息，支持與地圖、百度地圖插件聯合使用。
gauge 儀表盤。用於展現關鍵指標數據，常見於BI類系統。
funnel 漏斗圖。用於展現數據經過篩選、過濾等流程處理后發生的數據變化，常見於BI類系統。
evnetRiver 事件河流圖。常用於展示具有時間屬性的多個事件，以及事件隨時間的演化。
treemap 矩形式樹狀結構圖，簡稱：矩形樹圖。用於展示樹形數據結構，優勢是能最大限度展示節點的尺寸特征。
venn 韋恩圖。用於展示集合以及它們的交集。
tree 樹圖。用於展示樹形數據結構各節點的層級關系
wordCloud 詞雲。詞雲是關鍵詞的視覺化描述，用於匯總用戶生成的標簽或一個網站的文字內容
radius 半徑
