ECharts ( 官網: http://echarts.baidu.com/index.html ) 是百度的純 Javascript 開源圖表庫，兼容當前大部分瀏覽器（IE8+），底層依賴輕量級的 Canvas 類庫 ZRender, 最近項目中用到了, 效果一如它描述的驚艷, 但是配置項的一些小細節真的是很麻煩, 在這邊記錄一下,希望能幫助后來者少走一些彎路.
1. 首先， 需要根據需求下載相應的版本， 因為項目對文件大小要求不高，我直接下載的完整版。如果需要使用地圖，還需要下載 China.js 文件。在引用的時候，可以直接引入項目中的js文件，或者從遠程cdn加載，也可以通過npm下載。
在使用的時候，首先要在頁面預備一個寬高固定的容器：
<div id="main" style="width: 800px;height:600px;"></div>
js部分我覺得直接看實例是最直觀的，在官方實例中有一系列的Demo，直接選取和你需要的樣式相近的例子， 在左側有該圖的源碼，直接粘過去，然后看 文檔 -> 配置項手冊，在此基礎上修改成需要的樣式，會事半功倍，在此我以柱狀圖為例，介紹一下踩過的坑。
首先比較坑的是圖例， 我一直想自定義圖例數量以及字的內容，但用盡了方法也不行，當圖例data的內容和series的系列名稱name不一致的時候，圖例直接就不顯示了，可能還是我沒能找對方法，如果有知道的還麻煩告知。
第二個是直角坐標軸Y軸， Y軸設置顯示數據為百分比， 配置 yAxis屬性中的 axisLabel 里的 formatter: '{value} %' ，如果想Y軸不顯示數據 formatter: function(){ return "" }.
第三個是背景的網格線：配置 yAxis屬性中的 splitLine是控制橫向網格線的，lineStyle配置項可以控制線寬和顏色，color屬性為數組，如果數組長度小於線的數量，則會循環該顏色數組，如果不想要網格線，可以通過show：false；或直接將顏色設置為透明。
第四個是 series 系列列表的數據項配置， name值得就是系列名稱，由於 圖例 有篩選功能，所以圖例的data實際上和系列名稱是綁定的。barWidth可以設置柱子的寬度，如果不進行設置，則柱子寬度是自適應的，如果容器過寬會很丑。itemStyle是配置柱子的顏色的，包括 normal 正常情況下的樣式，和 emphasis 鼠標懸停到柱子上時的樣式。其中柱子上如果想顯示數據，則需要使用label屬性，百分比樣式 formatter:'{c} %'，類似這種。如果想讓柱子有圓角，則需要修改barBorderRadius：[ 7,7,7,7 ],四個值分別代表上右下左。而想要每個柱子顯示不同的顏色，則可以定義一個顏色數組，同網格線一樣，每個柱子的顏色即為color數組里的每一項，如果柱子數目多於color數組的長度，則柱子顏色循環使用該數組；
color: function(params) { var colorList = ["rgba(194, 53, 49, 1)","rgba(47, 69, 84, 1)","rgba(97, 160, 168, 1)","rgba(212, 130, 101, 1)","rgba(145, 199, 174, 1)"]; return colorList[params.dataIndex] }
如果你希望柱子的顏色根據數據的大小而變化恐怕就要自己寫一個函數來實現了，比如：
color: function (params){ var value = params.data; if( value > 0 && value<=10 ) { return 'rgba(155, 187, 89, 1)' } else if( value>10 && value<=20 ) { return 'rgba(79, 129, 189, 1)' }else if( value>20 && value<=30 ){ return 'rgba(255, 102, 0, 1)' }else if( value>30 && value<=40 ){ return 'rgba(204, 102, 0, 1)' }else if( value > 40 ){ return 'rgba(192, 80, 77, 1)' } },
接着就是數據項了，series中的data是系列中的數據內容數組，數組項通常為具體的數據項，通常用一個二維數組表示。也可以個別自定義：
[ 12, 34, { value : 56, //自定義標簽樣式，僅對該數據項有效 label: {}, //自定義特殊 itemStyle，僅對該數據項有效 itemStyle:{} }, 10 ]
還有一個需要注意的的是空值：當某數據不存在時（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。
大概就這樣，下面是DEMO的代碼和效果。
// 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: ' 此處是標題 ' }, tooltip: { trigger: 'axis' }, legend: { show: true, selectedMode: false, borderColor: "red", width: "200px", height: "200px", textStyle:{ color: "#333" }, top: '20px', right: '200px', orient: 'vertical', data: [ { name: '系列名稱關聯圖例名稱', // 強制設置圖形為圓。 icon: 'circle', backgroundColor: "red" }] }, calculable : true, xAxis: { type : 'category', data: ["A","B","C","D","E"] }, yAxis: [ { type : 'value', min: 0, max: 100, splitNumber: 10, axisLabel: { show: true, interval: 'auto', formatter: '{value} %' // formatter: function(){ // return ""; // } }, splitLine:{ show: true, lineStyle:{ width: 1, color: ['rgba(155, 187, 89, 1)','rgba(79, 129, 189, 1)','rgba(255, 102, 0, 1)','rgba(204, 102, 0, 1)','rgba(192, 80, 77, 1)','transparent','transparent','transparent','transparent','transparent','transparent'] } } } ], series: [{ name: '系列名稱關聯圖例名稱', type: 'bar', label: { normal:{ textStyle: { fontSize: 18 }, offset: [0, -3] } }, barWidth: 70, //配置樣式 itemStyle: { normal:{ label : { show:true, position:'top', formatter:'{c} %' }, //每個柱子的顏色即為color數組里的每一項，如果柱子數目多於color數組的長度，則柱子顏色循環使用該數組 // color: ['rgba(155, 187, 89, 1)','rgba(79, 129, 189, 1)','rgba(255, 102, 0, 1)','rgba(204, 102, 0, 1)','rgba(192, 80, 77, 1)'], // 根據數據值來顯示柱子的顏色 color: function (params){ var value = params.data; if( value > 0 && value<=10 ) { return 'rgba(155, 187, 89, 1)' } else if( value>10 && value<=20 ) { return 'rgba(79, 129, 189, 1)' }else if( value>20 && value<=30 ) { return 'rgba(255, 102, 0, 1)' }else if( value>30 && value<=40 ) { return 'rgba(204, 102, 0, 1)' }else if( value > 40 ) { return 'rgba(192, 80, 77, 1)' } }, barBorderRadius:[ 7, 7, 7, 7 ] }, //鼠標懸停時的效果： emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, data: [48, 18, 26, 35, 8] }] }; myChart.setOption(option);
效果圖如下：
