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

軟件特色

Echarts mix

混搭

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

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

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

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

拖拽重計(jì)算

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

Echarts 拖拽重計(jì)算

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

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

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

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

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

動(dòng)態(tài)類(lèi)型切換

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

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

Echarts 動(dòng)態(tài)類(lèi)型切換

Echarts 圖例開(kāi)關(guān)

圖例開(kāi)關(guān)

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

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

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

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

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

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

Echarts 多圖聯(lián)動(dòng)

多圖聯(lián)動(dòng)

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

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

值域漫游

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

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

Echarts 值域漫游

Echarts 炫光特效

炫光特效

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

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

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

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

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

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

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

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

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

標(biāo)線(xiàn)輔助

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

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

Echarts 標(biāo)線(xiàn)輔助

Echarts 多維度堆積

多維度堆積

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

子區(qū)域地圖模式

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

Echarts 子區(qū)域地圖

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

GeoJson地圖擴(kuò)展

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

標(biāo)注 & 標(biāo)線(xiàn)

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

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

Echarts 多級(jí)控制 Echarts 高度個(gè)性化

個(gè)性化定制

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

詳細(xì)文檔 ?

事件交互

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

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

Echarts 事件交互

Echarts 百搭時(shí)間軸

百搭時(shí)間軸

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

菜鳥(niǎo)教程

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

1、先來(lái)一個(gè)最簡(jiǎn)單的案例，實(shí)現(xiàn)一個(gè)條形圖

2、步驟如下：

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

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

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

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

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

// 路徑配置

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對(duì)象加載數(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":"銷(xiāo)量",

"type":"bar",

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

}

]

};

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

4、再來(lái)一張復(fù)雜的圖——直線(xiàn)圖加上條形圖，同時(shí)畫(huà)平均線(xiàn)、提示最大最小值；

5、

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

// 路徑配置

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:'銷(xiāo)量圖',

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

},

//設(shè)置提示

tooltip: {

show: true

},

//設(shè)置圖例

legend: {

data:['銷(xiāo)量']

},

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

xAxis : [

{

type : 'category',

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

}

],

yAxis : [

{

type : 'value'

}

],

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

series : [

//條形圖

{

"name":"銷(xiāo)量",

"type":"bar",

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

},

//折線(xiàn)圖

{

"name":"銷(xiāo)量",

"type":"line",

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

//繪制平均線(xiàn)

markLine : {

data : [

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

]

},

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

markPoint : {

data : [

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

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

]

}

}

]

};

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

myChart.setOption(option);

}

);

柱狀圖代碼

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

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)備一個(gè)具備大小（寬高）的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);

</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)備一個(gè)具備大小（寬高）的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) {

// 控制臺(tái)打印數(shù)據(jù)的名稱(chēng)

console.log(params);

});

</script>

</body>

</html>

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

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

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

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

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

更新日志

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

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

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

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

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

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

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

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

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

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