最近一段時(shí)間來(lái)，基本上都是在跟數(shù)據(jù)可視化打交道，echarts作為百度出品的免費(fèi)圖表工具灿渴，圖表也比較全面，在工作中也就經(jīng)常用到了胰舆，所以簡(jiǎn)單的談一下自己對(duì)于echarts的理解骚露。
先來(lái)一個(gè)echarts的官方特寫(xiě)，這是echarts的官方案例中的一部分圖表缚窿，非常的帥氣
首先一個(gè)echarts是BAT之一的百度推出的可視化圖形插件棘幸，由百度echarts團(tuán)隊(duì)進(jìn)行維護(hù)，集合了眾多市面上有可能用到的圖表類(lèi)型倦零，基本上經(jīng)常用到的误续，它都有包含吨悍。所以echarts是有很多優(yōu)勢(shì)的：
1、echarts是由百度推出并且維護(hù)的蹋嵌，在社區(qū)方面比較完善
2育瓜、學(xué)習(xí)曲線算難，只要懂js栽烂，基本上稍微研究之后就能使用
3躏仇、圖表種類(lèi)很豐富
4、echarts支持單模塊引入腺办，想用什么圖表就引入什么圖表
5焰手、echarts圖表是基于canvas來(lái)繪制的，對(duì)3D繪圖有絕對(duì)優(yōu)勢(shì)
6怀喉、echarts有上線國(guó)內(nèi)地圖
當(dāng)然书妻，他也是有一些不足之處的：
1、echarts的文檔教程比較模糊磺送，不是那么詳細(xì)驻子，更多的是需要開(kāi)發(fā)者花費(fèi)一定的精力去了解
2、echarts的入門(mén)是比較簡(jiǎn)單估灿，但是想要深入的話(huà)就需要花費(fèi)較多精力崇呵，后期更多的是涉及到了算法
3、對(duì)IE8及IE8（甚至IE9）及以下的兼容性比較差馅袁，經(jīng)常報(bào)很多錯(cuò)誤
4域慷、圖表比較固定，不能夠自由配置
5汗销、從2.0版本到3.0版本跨度比較大犹褒，很多配置項(xiàng)的使用方式都有所改動(dòng)
6、在比較復(fù)雜的用戶(hù)交互上略顯吃力
下面就來(lái)介紹一下echarts的使用弛针。
借助于官方案例叠骑，我們先來(lái)POS出來(lái)一個(gè)最簡(jiǎn)單的圖表
var myEchart=echarts.init(document.getElementById('main1'));
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
myEchart.setOption(option);
出來(lái)的效果就是下面這個(gè)樣子
非常的簡(jiǎn)單，我們只要設(shè)置xAxis（X軸）和yAxis（Y軸）削茁，然后再給上series一些數(shù)據(jù)和指定圖表類(lèi)型就可以了宙枷，看到這里你是不是覺(jué)得，嗯茧跋，echarts真簡(jiǎn)單慰丛，so too young too simple,我們來(lái)看看官方的配置項(xiàng)手冊(cè)
不要懷疑你的眼睛，這只是其中一部分瘾杭，是的诅病，還沒(méi)完呢
不過(guò)，一般來(lái)說(shuō)我們也用不到那么多的配置項(xiàng)，我們?nèi)绻皇且话愕某Ｒ?jiàn)圖表并且復(fù)雜度不高的話(huà)贤笆，只要配置好以下幾個(gè)項(xiàng)就可以了
當(dāng)然這只是簡(jiǎn)單的圖表所用到的蝇棉，其他一些圖表如極坐標(biāo)圖還會(huì)需要用到
polar、radiusAxis和angleAxis芥永，雷達(dá)圖還會(huì)需要用到radar银萍，地理圖還會(huì)有visualMap、brush恤左、geo贴唇，不過(guò)這些我們以后再講，現(xiàn)在我們來(lái)看一下飞袋，一個(gè)都用到了上訴基本配置項(xiàng)的圖表是怎么樣的戳气，以條形圖為例
var myEchart=echarts.init(document.getElementById('main1'));
var option = {
title: {
text: '折線圖堆疊'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['郵件營(yíng)銷(xiāo)']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'郵件營(yíng)銷(xiāo)',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
myEchart.setOption(option);
這個(gè)例子所表現(xiàn)出來(lái)的圖表是下面這樣的
相對(duì)來(lái)說(shuō)也是比較簡(jiǎn)單的捂寿，雖然簡(jiǎn)單柠傍，但是也還是有坑的扶歪，首先一個(gè)交汤，如果是做坐標(biāo)軸類(lèi)的圖表，xAxis和yAxis是必須要有的腐芍，否則就會(huì)報(bào)錯(cuò)秦躯，其次圖表的類(lèi)型也是要配置好的件蚕，否則也會(huì)報(bào)錯(cuò)郑叠，再然后夜赵，echarts圖表在渲染之前，echarts.init對(duì)象是必須要有寬高乡革，否則寇僧，還是紅彤彤的報(bào)錯(cuò)，這就涉及到開(kāi)發(fā)中的一個(gè)問(wèn)題了沸版，對(duì)于要渲染echarts圖表的模塊嘁傀，這個(gè)模塊是不可以使用display:none去控制顯示隱藏的，否則渲染出來(lái)的圖表就會(huì)變形了视粮。
接下來(lái)會(huì)講到一個(gè)開(kāi)發(fā)中經(jīng)常遇到的問(wèn)題细办，也就是怎么使得渲染出來(lái)的圖表是響應(yīng)式的
關(guān)于這個(gè)，echarts本身也是提供了一個(gè)方法給我們蕾殴，我們只需要在屏幕變化的時(shí)候綁定這個(gè)方法就可以了
//每次窗口大小改變的時(shí)候都會(huì)觸發(fā)onresize事件
//這個(gè)時(shí)候我們將echarts對(duì)象的尺寸賦值給窗口的大小這個(gè)屬性笑撞，從而實(shí)現(xiàn)圖表對(duì)象與窗口對(duì)象的尺寸一致的情況
window.onresize = myEchart.resize;
以上我們就可以做出來(lái)一個(gè)常用的坐標(biāo)軸類(lèi)圖表了，并且還是響應(yīng)式的区宇。至于其他的娃殖，我們?cè)僦鸩降娜チ私狻?/p>
