ECharts是一款由Apache開發(fā)的JavaScript圖表庫，在軟件中為用戶提供了商業(yè)產(chǎn)品常用的一些圖標(biāo)，軟件的底層基于ZRender，一個輕量級的canvas類庫，并且為用戶提供了坐標(biāo)系，圖例，提示等各種基礎(chǔ)組件，讓用戶可以更好地利用圖表進(jìn)行工作。

軟件特色

Echarts mix

混搭

混搭的圖表會更具表現(xiàn)力也更有有趣味，ECharts提供的圖表（共11類17種）支持任意混搭：

折線圖（面積圖）、柱狀圖（條形圖）、散點(diǎn)圖（氣泡圖）、K線圖、

餅圖（環(huán)形圖）、雷達(dá)圖、地圖、和弦圖、力導(dǎo)布局圖、儀表盤、漏斗圖。

混搭情況下一個標(biāo)準(zhǔn)圖表：包含唯一圖例、工具箱、數(shù)據(jù)區(qū)域縮放、值域漫游模塊，一個直角坐標(biāo)系（可包含一條或多條類目軸線，一條或多條值軸線，最多上下左右四條）

拖拽重計算

拖拽重計算特性（專利）帶來了數(shù)據(jù)統(tǒng)計圖表從未有過的用戶體驗(yàn)，允許用戶對統(tǒng)計數(shù)據(jù)進(jìn)行有效的提取、整合，甚至在多個圖表間交換數(shù)據(jù)，賦予了用戶對數(shù)據(jù)進(jìn)行挖掘、整合的能力。

Echarts 拖拽重計算

Echarts 數(shù)據(jù)視圖

數(shù)據(jù)視圖

如果你所呈現(xiàn)的數(shù)據(jù)足夠讓用戶所關(guān)心，那么他們將不滿足于查看可視化的圖表，要去逐一迎合他們下載保存，數(shù)據(jù)分享，加工整合已有數(shù)據(jù)等等需求？

或許你只要給予一個“,”分隔的數(shù)據(jù)文本他們就懂了，這就是ECharts的數(shù)據(jù)視圖！當(dāng)然，你可以重載數(shù)據(jù)視圖的輸出方法，用你獨(dú)特的方式去呈現(xiàn)數(shù)據(jù)。

如果你的用戶足夠的高端，你甚至可以打開數(shù)據(jù)視圖的編輯功能，跟拖拽重計算相比，這可是批量的數(shù)據(jù)修改！

動態(tài)類型切換

很多圖表類型本身所表現(xiàn)的能力是相似的，但由于數(shù)據(jù)差異、表現(xiàn)需求和個人喜好的不同導(dǎo)致最終圖表所呈現(xiàn)的張力又大不一樣，比如折線圖和柱狀圖的選擇,系列數(shù)據(jù)是堆疊還是平鋪總是讓人頭疼。

ECharts提供了動態(tài)類型切換，讓用戶隨心所欲的切換到他所需要的圖表類型和堆疊狀態(tài)。

Echarts 動態(tài)類型切換

Echarts 圖例開關(guān)

圖例開關(guān)

多系列數(shù)據(jù)的同時展現(xiàn)呈現(xiàn)出豐富內(nèi)容，但如何讓用戶切換到他所關(guān)心的個別系列上？

ECharts提供了方便快捷的多維度圖例開關(guān)，可以隨時切換到你所關(guān)心的數(shù)據(jù)系列。

數(shù)據(jù)區(qū)域選擇

數(shù)據(jù)可以是無限的，但顯示空間總是有限的，數(shù)據(jù)區(qū)域選擇組件提供了大數(shù)據(jù)量中漫游的能力，讓用戶選擇并呈現(xiàn)他所關(guān)心的數(shù)據(jù)區(qū)域。

配合隨動的均值（極值）標(biāo)線，標(biāo)注展現(xiàn)強(qiáng)大的數(shù)據(jù)剖析能力。 try this 》

Echarts 數(shù)據(jù)區(qū)域縮放

Echarts 多圖聯(lián)動

多圖聯(lián)動

多系列數(shù)據(jù)在同一個直角系內(nèi)同時展現(xiàn)有時候會產(chǎn)生混亂，但他們又存在極強(qiáng)的關(guān)聯(lián)意義不可分離？

ECharts提供了多圖聯(lián)動的能力（connect），能做的可不僅僅是鼠標(biāo)劃過的詳情顯示，連接的多個圖表會共享組件事件并且實(shí)現(xiàn)了保存圖片時的自動拼接。 try this 》

值域漫游

基于坐標(biāo)的圖表（如地圖、散點(diǎn)圖）通過色彩變化表現(xiàn)數(shù)值的大小能直觀形象的展示數(shù)據(jù)分布。

但如何聚焦到我所關(guān)心的數(shù)值上？我們創(chuàng)造了稱為值域漫游的功能，讓你可以輕松進(jìn)行數(shù)值篩選。

Echarts 值域漫游

Echarts 炫光特效

炫光特效

我們知道，很多時候我們需要一些吸引眼球的能力。

ECharts支持標(biāo)注標(biāo)線的炫光特效，特別用在地圖上輕松實(shí)現(xiàn)百度遷徙數(shù)據(jù)可視化特效

大規(guī)模數(shù)據(jù)模式

如何展現(xiàn)成千上百萬的數(shù)據(jù)？貌似除了用專業(yè)的統(tǒng)計工具（如MATLAB）外別無選擇？

不，在擁有如此多交互特性下ECharts依然可以做到直角系圖表（折、柱、散點(diǎn)、K線）20萬數(shù)據(jù)秒級內(nèi)渲染完成，這對于常規(guī)的應(yīng)用，用現(xiàn)代瀏覽器就足以輕松展現(xiàn)百萬規(guī)模的數(shù)據(jù)！

Echarts 大規(guī)模散點(diǎn)圖

Echarts 動態(tài)數(shù)據(jù)添加 Echarts 動態(tài)數(shù)據(jù)添加

動態(tài)數(shù)據(jù)添加

如果你需要展示有實(shí)時變化的數(shù)據(jù)，相信這個動態(tài)接口會對你很有幫助。

標(biāo)線輔助

趨勢 線？平均線？上升通道？支持位？專業(yè)的你自然知道該怎么用

提供標(biāo)線輔助在K線圖中可是必要的功能！當(dāng)然，ECharts中的任何圖表都可以使用。

Echarts 標(biāo)線輔助

Echarts 多維度堆積

多維度堆積

支持多系列，多維度的數(shù)據(jù)堆積，配合自動伸縮的圖形實(shí)體和直角坐標(biāo)系，能呈現(xiàn)出統(tǒng)計圖表~

子區(qū)域地圖模式

地圖類型支持world，china及全國34個省市自治區(qū)。同時支持子區(qū)域模式，通過主地圖類型擴(kuò)展出所包含的子區(qū)域地圖，輕易輸出全球176個國家地區(qū)和全國600多個省市區(qū)域簡圖， try this 》

Echarts 子區(qū)域地圖

Echarts 標(biāo)準(zhǔn)GeoJson擴(kuò)展

GeoJson地圖擴(kuò)展

內(nèi)置地圖由標(biāo)準(zhǔn)GeoJson地理數(shù)據(jù)并經(jīng)過高效的壓縮算法壓縮生成的地圖數(shù)據(jù)（大小僅為標(biāo)準(zhǔn)geoJson的30%左右）驅(qū)動而來。如果內(nèi)置地圖類型或數(shù)據(jù)如果并未滿足你的項(xiàng)目需要，可通過簡單動態(tài)注冊產(chǎn)生你所需要的新類型， try this 》

標(biāo)注 & 標(biāo)線

添加額外的標(biāo)注內(nèi)容是常用的功能，如地圖上標(biāo)注某些特定位置，折線圖上標(biāo)注極值點(diǎn)或者柱形圖里標(biāo)線出變化趨勢，ECharts全系列圖表支持標(biāo)注標(biāo)線功能，并且與生俱來的可以響應(yīng)圖例開關(guān)、值域漫游等組件的交互功能。

Echarts 全系列圖表支持標(biāo)注、標(biāo)線 Echarts 全系列圖表支持標(biāo)注、標(biāo)線

Echarts 多級控制 Echarts 高度個性化

個性化定制

超過600個可配置選項(xiàng)結(jié)合多級控制設(shè)計滿足高度定制的個性化需求。

詳細(xì)文檔 ?

事件交互

可以捕獲的用戶交互和數(shù)據(jù)變化事件實(shí)現(xiàn)圖表間或者與外界的聯(lián)動。try this ?

事件調(diào)試try this ?

Echarts 事件交互

Echarts 百搭時間軸

百搭時間軸

時空數(shù)據(jù)分析是信息可視化里一個相當(dāng)重要的方向！ECharts提供可與任意圖表搭配使用的時間軸控件以展現(xiàn)時空數(shù)據(jù)變化。

菜鳥教程

ECharts是一款超級專業(yè)好用的商業(yè)數(shù)據(jù)圖表軟件，在軟件中可以進(jìn)行各種圖表數(shù)據(jù)的制作，很多的用戶不知道軟件的使用方法，下面小編為大家?guī)碥浖氖褂媒坛?，感興趣的用戶快來看看吧。

1、先來一個最簡單的案例，實(shí)現(xiàn)一個條形圖

2、步驟如下：

(1)預(yù)先準(zhǔn)備好具有寬和高的網(wǎng)頁元素，我們將用它繪制數(shù)據(jù)表。

<div id="main" style="width:600px;height:400px"></div>

(2)然后我們導(dǎo)入Echarts類庫，做好準(zhǔn)備

<script src="http://**/build/dist/echarts.js"></script>

(3)然后就是重頭戲，我們來繪制數(shù)據(jù)表，首先配置路徑，接著使用Echarts開始繪圖。

// 路徑配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載

],

function (ec) {

// 基于準(zhǔn)備好的dom，初始化echarts圖表

var myChart = ec.init(document.getElementById('main'));

//設(shè)置數(shù)據(jù)

var option = {

};

// 為echarts對象加載數(shù)據(jù)

myChart.setOption(option);

}

);

(4)重點(diǎn)是option里的設(shè)置，設(shè)置坐標(biāo)軸、設(shè)置數(shù)據(jù)。

var option = {

//設(shè)置坐標(biāo)軸

xAxis : [

{

type : 'category',

data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"]

}

],

yAxis : [

{

type : 'value'

}

],

//設(shè)置數(shù)據(jù)

series : [

{

"name":"銷量",

"type":"bar",

"data":[5, 20, 40, 10, 24, 20,24,32],

}

]

};

3、我們可以設(shè)置圖標(biāo)標(biāo)題、圖例、提示等，代碼如下，效果如下圖所示。

4、再來一張復(fù)雜的圖——直線圖加上條形圖，同時畫平均線、提示最大最小值；

5、

當(dāng)我們需要混搭的時候，首先需要在require里加載需要使用的圖庫，然后在series里填寫折線圖的數(shù)據(jù)就可以了。代碼如下，因?yàn)樽⑨屢呀?jīng)寫得很清楚了，就不在啰嗦了，大家直接研究代碼。

// 路徑配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載

'echarts/chart/line'

],

function (ec) {

// 基于準(zhǔn)備好的dom，初始化echarts圖表

var myChart = ec.init(document.getElementById('main'));

//設(shè)置數(shù)據(jù)

var option = {

//設(shè)置標(biāo)題

title:{

text:'銷量圖',

subtext:'純屬捏造，如有雷同，人品爆發(fā)。'

},

//設(shè)置提示

tooltip: {

show: true

},

//設(shè)置圖例

legend: {

data:['銷量']

},

//設(shè)置坐標(biāo)軸

xAxis : [

{

type : 'category',

data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"]

}

],

yAxis : [

{

type : 'value'

}

],

//設(shè)置數(shù)據(jù)

series : [

//條形圖

{

"name":"銷量",

"type":"bar",

"data":[5, 20, 38, 10, 24, 20,24,32]

},

//折線圖

{

"name":"銷量",

"type":"line",

"data":[5, 20, 38, 10, 24, 20,24,32],

//繪制平均線

markLine : {

data : [

{type : 'average', name: '平均值'}

]

},

//繪制最高最低點(diǎn)

markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

}

}

]

};

// 為echarts對象加載數(shù)據(jù)

myChart.setOption(option);

}

);

柱狀圖代碼

軟件為用戶提供了多種圖紙，包括柱狀圖用戶可以根據(jù)自己的需求不同，來建立出不同的柱狀圖體系，很多的用戶想要了解軟件的柱狀圖配置方法，下面小編為大家?guī)砭唧w的方法介紹。

1、基本柱狀圖

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>ECharts</title>

<!-- 引入 echarts.js -->

<script src="./echarts4.x.js"></script>

<script type="text/javascript" src="./zhuzhangtu.js"></script>

</head>

<body>

<!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->

<div id="main" style="width: 600px;height:400px;margin: 0 auto"></div>

<script type="text/javascript">

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例

var myChart = echarts.init(document.getElementById('main'));

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

myChart.setOption(option);

</script>

</body>

</html>

2、折疊柱狀圖

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>ECharts</title>

<!-- 引入 echarts.js -->

<script src="./echarts4.x.js"></script>

<script type="text/javascript" src="./histogram.js"></script>

</head>

<body>

<!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom -->

<div id="main" style="width: 600px;height:400px;margin: 0 auto"></div>

<script type="text/javascript">

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例

var myChart = echarts.init(document.getElementById('main'));

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

myChart.setOption(option);

myChart.on('click', function (params) {

// 控制臺打印數(shù)據(jù)的名稱

console.log(params);

});

</script>

</body>

</html>

軌跡數(shù)據(jù)庫

在軟件中通過軟件和數(shù)據(jù)的結(jié)合，可以得到一個具體詳細(xì)的軌跡圖，很多的用戶對軌跡數(shù)據(jù)庫的實(shí)現(xiàn)方法不了解，下面小編為大家?guī)砭唧w的實(shí)現(xiàn)方案，感興趣的用戶快來看看吧。

軌跡地圖可以動態(tài)地展示物體（比如汽車）的運(yùn)動軌跡，示例如圖所示，顯示的是北京地區(qū)某幾條公交車的運(yùn)行軌跡。

該份軌跡地圖背后的數(shù)據(jù)如圖所示，其中，bus_id字段用來區(qū)分不同的巴士，lng、lat字段存儲的是巴士路線上經(jīng)過的點(diǎn)的經(jīng)緯度坐標(biāo)，RecordTime則表示坐標(biāo)的先后順序。

我們將以上四個字段拖入軌跡地圖配置面板對應(yīng)的區(qū)域，即可繪制出每輛大巴（bus_id字段）在一段時間內(nèi)（RecordTime字段）的位置（lng、lat字段）變化軌跡圖。

更新日志

豐富的可視化類型:提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

多種數(shù)據(jù)格式無需轉(zhuǎn)換直接使用:內(nèi)置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數(shù)據(jù)源，此外還支持輸入 TypedArray 格式的數(shù)據(jù)。

千萬數(shù)據(jù)的前端展現(xiàn):通過增量渲染技術(shù)（4.0+），配合各種細(xì)致的優(yōu)化，ECharts 能夠展現(xiàn)千萬級的數(shù)據(jù)量。

移動端優(yōu)化: 針對移動端交互做了細(xì)致的優(yōu)化，例如移動端小屏上適于用手指在坐標(biāo)系中進(jìn)行縮放、平移。 PC 端也可以用鼠標(biāo)在圖中進(jìn)行縮放（用鼠標(biāo)滾輪）、平移等。

多渲染方案，跨平臺使用:支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。

深度的交互式數(shù)據(jù)探索:提供了 圖例、視覺映射、數(shù)據(jù)區(qū)域縮放、tooltip、數(shù)據(jù)刷選等開箱即用的交互組件，可以對數(shù)據(jù)進(jìn)行多維度數(shù)據(jù)篩取、視圖縮放、展示細(xì)節(jié)等交互操作。

多維數(shù)據(jù)的支持以及豐富的視覺編碼手段:對于傳統(tǒng)的散點(diǎn)圖等，傳入的數(shù)據(jù)也可以是多個維度的。

動態(tài)數(shù)據(jù):數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變。

絢麗的特效:針對線數(shù)據(jù)，點(diǎn)數(shù)據(jù)等地理數(shù)據(jù)的可視化提供了吸引眼球的特效。

通過 GL 實(shí)現(xiàn)更多更強(qiáng)大絢麗的三維可視化:在 VR，大屏場景里實(shí)現(xiàn)三維的可視化效果。