圖表庫 - Highchart / Echart
當前主要使用HighChart和Echart圖表庫，都基於Jquery，需要先引用Jquery。
實際問題：引入Jquery需在圖表庫前，否則報錯。
HighChart官網：https://www.hcharts.cn/demo/highcharts
Echart官網：http://echarts.baidu.com/
1、特點分析
HighChart：
-
-
兼容性 - 支持所有主流瀏覽器和移動平臺（android、iOS等）。
-
多設備 - 支持多種設備，如手持設備 iPhone/iPad、平板等。
-
免費使用 - 開源免費。
-
輕量 - highcharts.js 內核庫大小只有 35KB 左右。
-
配置簡單 - 使用 json 格式配置
-
動態 - 可以在圖表生成後修改。
-
多維 - 支持多維圖表
-
配置提示工具 - 鼠標移動到圖表的某一點上有提示信息。
-
時間軸 - 可以精確到毫秒。
-
導出 - 表格可導出為 PDF/ PNG/ JPG / SVG 格式
-
輸出 - 網頁輸出圖表。
-
可變焦 - 選中圖表部分放大，近距離觀察圖表；
-
外部數據 - 從服務器載入動態數據。
-
文字旋轉 - 支持在任意方向的標簽旋轉。
-
Echart：
一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），
底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。
ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，並且對移動端做了深度的優化。
對比：
A.HighChart配置顯示更加靈活，支持html屬性，Echart可定制性差，不支持HTML
實際問題：HighChart可利用html屬性實現太長省略號問題，Echart可用formatter方法判斷標簽長於N個字符，截斷並加上省略號.
B.Echart 動態效果優於HighChart，HighChart兼容性由於Echart
C.Highchart基於svg，可進行後續對dom進行操作，Echart基於canvas，實現大數據展示效果好
D.echarts.js支持按需求打包：echarts.js官網提供了在線構建的工具，可以在線構建項目時，選擇項目所需要使用到的模塊，從而達到減小JS文件的體積
2、使用方法：
HighChart：
跟ECharts一樣，HighCharts也需要下載相應的插件，不過HightCharts的插件很簡單，只有一個highcharts.js文件
如果需要導出圖表，則需要exporting.js文件
如果需要一些特殊的圖形呈現，則還需要下載highcharts-more.js
Echart：http://www.cnblogs.com/ninilovebobo/articles/3932805.html
實際問題：echarts.js的體積較大，建議使用echart.min.js，但部分效果不兼容
3、常見圖表元素（以Echart為例，Highchart屬性類似）
3.1、標題（title）
常見屬性：主標題文本（text），文本樣式（textStyle）
3.2、提示語（tooltip）
常見屬性：格式化文本（formatter），文本樣式（textStyle）
3.3、橫坐標（xAxis）、縱坐標（yAxis）
常見屬性：坐標軸的分割數（splitNumber），最大（max），最小（min），坐標軸線的相關設置（axisLine），坐標間隔（interval），旋轉角度（rotate）
實際問題：
1、圖表庫的橫縱坐標數據為自動計算，若自動計算結果顯得太擁擠，可用splitNumber屬性定義建議分割數，
但這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度作調整
2、橫坐標數據太多，顯示錯位或換行，有兩種方案處理：將刻度標簽旋轉較度；或增大坐標軸刻度標簽的顯示間隔
3、若非必要，不要隨意設置max，否則容易造成圖表超出y軸刻度線的問題，可利用min屬性去掉負坐標；
3.4、圖例（legend）
常見屬性：是否顯示（show），朝向（orient），邊框顏色（borderColor），邊框寬度（borderWidth），格式化文本（formatter）
實際問題：圖例默認邊框自帶圓弧，若要去除，borderRadius無效，borderRadius指的是這個圖例的外邊框
設置單個圖例的邊框屬性：
legend: {
data: [{
icon:‘rect’,
}]
}
3.5、數據（series:）
可對單一條數據進行設置。
實際問題：可用來設置當數據為空時，不顯示0
label: {
normal: {
show: true,
formatter: function (value) {
if (value.value == 0) {
return "";
} else {
return value.value;
}
}
}
}
3.6、直角坐標軸（grid）
常見屬性：上（top）下（bottom）左（left）右（right）間距，高度（height），寬度（width）
實際問題：一般圖表寬度在外層div中設置，較少使用grid中的height，width；
若使用js計算圖表高度、寬度，需在繪制圖表前，確定div的大小
3.7色系（color）
color:[‘#fbb748‘, ‘#52e452‘, ‘#4493d5‘, ‘#abd74a‘, ‘#73c1e6‘, ‘#ff86ff‘, ‘#8686ff‘, ‘#e06c50‘, ‘#f2e73d‘, ‘#c3cf49‘, ‘#afc3f1‘]
按順序取色值，若所設置的顏色數量不夠，則循環使用
4、模擬鼠標劃過事件（Highchart）
onMouseOver() // 模擬鼠標劃過事件，配合 setInterval 可以實現輪選點
圖表庫 - Highchart / Echart