概述
ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。ECharts最初由百度團隊開源，并于2018年初捐贈給Apache基金會，成為ASF孵化級項目。
ECharts 提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
可以流暢的運行在 PC 和移動設(shè)備上
基礎(chǔ)概念
1、echarts 實例:
- 一個網(wǎng)頁中可以創(chuàng)建多個 echarts 實例。
- 每個 echarts 實例中可以創(chuàng)建多個圖表和坐標(biāo)系等。
- dom節(jié)點作為echarts的渲染容器，每一個echart獨占一個dom節(jié)點。
2、系列（series）
系列：一組數(shù)值以及他們映射成的圖.
一個系列包含的要素：一組數(shù)值、圖表類型、以及其他的關(guān)于這些數(shù)據(jù)如何映射成圖的參數(shù)等。
圖表類型 （series.type）包括：
- line（折線圖）
- bar（柱狀圖）
- pie（餅圖）
- scatter（散點圖）
- graph（關(guān)系圖）
- tree（樹圖）等
數(shù)據(jù)（series.data）：
導(dǎo)入的數(shù)值。
- ECharts 4 以前，數(shù)據(jù)只能聲明在各個“系列（series）”中
- ECharts 4 開始支持了 dataset
組件用于單獨的數(shù)據(jù)集聲明，從而數(shù)據(jù)可以單獨管理，被多個組件復(fù)用，并且可以基于數(shù)據(jù)指定數(shù)據(jù)到視覺的映射。 - 關(guān)于數(shù)據(jù)我們會在后面進行學(xué)習(xí)，這里不展開詳細敘述。
通用的樣式（series.itemStyle）：
包括陰影、透明度、顏色、邊框顏色、邊框?qū)挾鹊取?/p>
3、組件（component）：
legend圖例組件，用于點擊對應(yīng)的圖例是否顯示，例如：
- xAxis（直角坐標(biāo)系 X 軸）
- yAxis（直角坐標(biāo)系 Y 軸）
- grid（直角坐標(biāo)系底板）
- angleAxis（極坐標(biāo)系角度軸）
- radiusAxis（極坐標(biāo)系半徑軸）
- polar（極坐標(biāo)系底板）
- geo（地理坐標(biāo)系）
- dataZoom（數(shù)據(jù)區(qū)縮放組件）
- visualMap（視覺映射組件）
- tooltip（提示框組件）
- toolbox（工具欄組件）
- series（系列）
等。
4、option 描述圖表
option表述了：數(shù)據(jù)、數(shù)據(jù)如何映射成圖形、交互行為。
例如：使用option 來描述其對圖表的各種需求，包括：有什么數(shù)據(jù)、要畫什么圖表、圖表長什么樣子、含有什么組件、組件能操作什么事情等等。
option是個大的 JavaScript 對象，他的內(nèi)部有大量的屬性，每個屬性是一類組件。而多個同類組件，可以組成數(shù)組。
5：組件的定位
不同的組件、系列，常有不同的定位方式：
1）類 CSS 的絕對定位：
多數(shù)組件和系列，都能夠基于 top/right/down/left/width/height絕對定位。這種絕對定位的方式，類似于 CSS 的絕對定位。
其中，他們每個值都可以是：
絕對數(shù)值（例如 bottom: 54 表示：距離 echarts 容器底邊界 54 像素）。
基于 echarts 容器高寬的百分比（例如 right: ‘20%’ 表示：距離 echarts 容器右邊界的距離是 echarts 容器寬度的 20%）。
2）中心半徑定位：
少數(shù)圓形的組件或系列，可以使用“中心半徑定位”，例如，pie（餅圖）、sunburst（旭日圖）、polar（極坐標(biāo)系）。
中心半徑定位，往往依據(jù) center（中心）、radius（半徑）來決定位置。
3）其他定位：
少數(shù)組件和系列可能有自己的特殊的定位方式。在他們的文檔中會有說明。
6、坐標(biāo)系
- 很多系列需要運行在 “坐標(biāo)系” 上。
例如 line（折線圖）、bar（柱狀圖）等，需要在 “坐標(biāo)系” 上才能運行。
- 一個坐標(biāo)系，可能由多個組件協(xié)作而成。
我們以最常見的直角坐標(biāo)系來舉例。直角坐標(biāo)系中，包括有 xAxis（直角坐標(biāo)系 X 軸）、yAxis（直角坐標(biāo)系 Y 軸）、grid（直角坐標(biāo)系底板）三種組件。xAxis、yAxis 被 grid 自動引用并組織起來，共同工作。
- 一個系列，往往能運行在不同的坐標(biāo)系中。
例如，一個scatter（散點圖）能運行在直角坐標(biāo)系、極坐標(biāo)系、地理坐標(biāo)系（GEO）等各種坐標(biāo)系中。同樣，一個坐標(biāo)系，也能承載不同的系列。
屬性
1、title：寫標(biāo)題，屬性如下
show:false/true 標(biāo)題是否顯示；
text：標(biāo)題內(nèi)容；textstyle修飾標(biāo)題樣式
subtext：副標(biāo)題，也可以算是內(nèi)容；subtextStyle修飾副標(biāo)題樣式；
2、legentd:圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字；
show:false/true 是否顯示；
data:圖例的數(shù)據(jù)數(shù)組;
3、grid:直角坐標(biāo)系內(nèi)繪圖網(wǎng)格,單個 grid 內(nèi)最多可以放置上下兩個 X 軸，左右兩個 Y 軸?？梢栽诰W(wǎng)格上繪制折線圖，柱狀圖，散點圖;
show:false/true 是否顯示；
top、left、right、bottom標(biāo)識上左右下的邊距；
4、xAxis :直角坐標(biāo)系 grid 中的 x 軸，單個 grid 組件最多只能放上下兩個 x 軸。
type:坐標(biāo)軸類型。
'value’數(shù)值軸，適用于連續(xù)數(shù)據(jù)。
'category’類目軸，適用于離散的類目數(shù)據(jù)，為該類型時必須通過data設(shè)置類目數(shù)據(jù)。
'time’時間軸，適用于連續(xù)的時序數(shù)據(jù)，與數(shù)值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據(jù)跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
data:類目數(shù)據(jù)，在類目軸（type: ‘category’）中有效。
5、yAxis:直角坐標(biāo)系 grid 中的 y 軸，單個 grid 組件最多只能放左右兩個 y 軸。
type:坐標(biāo)軸類型。
'value’數(shù)值軸，適用于連續(xù)數(shù)據(jù)。
'category’類目軸，適用于離散的類目數(shù)據(jù)，為該類型時必須通過data設(shè)置類目數(shù)據(jù)。
'time’時間軸，適用于連續(xù)的時序數(shù)據(jù)，與數(shù)值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據(jù)跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
6、dataZoom:組件 用于對數(shù)據(jù)進行區(qū)域縮放，從而能自由關(guān)注細節(jié)的數(shù)據(jù)信息，或者概覽數(shù)據(jù)整體。
type:slider; 是否顯示 組件。如果設(shè)置為false，不會顯示，但是數(shù)據(jù)過濾的功能還存在;
backgroundColor:組件的背景顏色。
realtime:拖動時，是否實時更新系列的視圖。如果設(shè)置為false，則只在拖拽結(jié)束的時候更新。
top、left、right、bottom標(biāo)識上左右下的邊距；
7、tooltip:提示框組件。
show:false/true 是否顯示；
trigger:觸發(fā)類型;
‘item’：數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。
‘a(chǎn)xis’：坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
8、color：調(diào)色盤顏色列表。如果系列沒有設(shè)置顏色，則會依次循環(huán)從該列表中取顏色作為系列顏色。
默認為：[‘#c23531’,‘#2f4554’, ‘#61a0a8’, ‘#d48265’, ‘#91c7ae’,‘#749f83’, ‘#ca8622’, ‘#bda29a’,‘#6e7074’, ‘#546570’, ‘#c4ccd3’]；
9、seriers:系列列表。每個系列通過type 決定自己的圖表類型；
series[i]-line：折線
itemStyle折線拐點標(biāo)志的樣式；
series[i]-bar：柱狀圖通過柱形的高度來表現(xiàn)數(shù)據(jù)的大小，用于有至少一個類目軸的直角坐標(biāo)系上。
series[i]-pie：餅圖主要用于表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比。每個的弧度表示數(shù)據(jù)數(shù)量的比例。、
10、itemStyle 樣式:
normal:color 顏色；
使用
簡單入門使用
1、引用echarts.js文件
注意：需要引用時請到官網(wǎng)下載echarts.js文件。
<script type="text/javascript" src="js/echarts.js"></script>
2、準(zhǔn)備一個放視圖的div（自定義）
<div id="chartmain" style="width:600px; height: 400px;"></div>
3、設(shè)置參數(shù)，初始化自定義的圖標(biāo)
<script type="text/javascript">
//初始化echarts實例
var myChart = echarts.init(document.getElementById('chartmain'));
//var myChart = echarts.init($("#chartmain")[0]); jquery方式
//指定圖標(biāo)的配置和數(shù)據(jù)
var option = {
title:{
text:'ECharts 數(shù)據(jù)統(tǒng)計'
},
tooltip:{},
legend:{
data:['用戶來源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'訪問量',
type:'line',
data:[500,200,360,100]
}]
};
//使用制定的配置項和數(shù)據(jù)顯示圖表
myChart.setOption(option);
</script>
這樣簡單的一個統(tǒng)計圖表就出來了，官網(wǎng)使用的柱狀圖，我這邊改用了折線圖。
柱狀圖的中間顯示數(shù)據(jù)
改變position的值：
1、外部位置：top：在柱狀圖頂部，bottom：在柱狀圖底部，right：在柱狀圖的右邊，left：在柱狀圖左邊。
2、內(nèi)部位置：inside：在柱狀圖中間，insideRight：在柱狀圖內(nèi)部的右邊，insideLeft：在柱狀圖內(nèi)部的右邊，insideTop：在柱狀圖內(nèi)部的頂部，insideBottom：在柱狀圖內(nèi)部的底部。
代碼demo：
series : [
{
name:'機器數(shù)量',
type:'bar',
barWidth: '60%',
data:[569, 30],
itemStyle:{
normal:{
label:{
show:true, //表示是否顯示
position: 'inside', //改變數(shù)字的位置
textStyle: { //改變字體的顏色和字體大小
color: '#ffff',
fontSize: 13
},
formatter: function(params){
if(params.value == 0){
return '';
}else {
return params.value;
}
}
}
}
}
}
]
拿一個實例展示一下 inside：在柱狀圖中間：
文章來源：http://www.zghlxwxcb.cn/news/detail-497679.html
來源
ECharts – ECharts基礎(chǔ)概念
EChart介紹和使用文章來源地址http://www.zghlxwxcb.cn/news/detail-497679.html
到了這里，關(guān)于【圖表】echart的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
