【圖表庫】 Highchart / Echart 常見問題

當前主要使用HighChart和Echart圖表庫，都基於Jquery，須要先引用Jquery。

實際問題：引入Jquery需在圖表庫前，不然報錯。

HighChart官網：https://www.hcharts.cn/demo/highcharts

Echart官網：http://echarts.baidu.com/

一、特色分析

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文件的體積

二、使用方法：

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，但部分效果不兼容

三、常見圖表元素（以Echart爲例，Highchart屬性相似）

    3.一、標題（title） 

    常見屬性：主標題文本（text），文本樣式（textStyle）

    3.二、提示語（tooltip）

    常見屬性：格式化文本（formatter），文本樣式（textStyle）

    3.三、橫座標（xAxis）、縱座標（yAxis）

   常見屬性：座標軸的分割數（splitNumber），最大（max），最小（min），座標軸線的相關設置（axisLine），座標間隔（interval），旋轉角度（rotate）

   實際問題：

   一、圖表庫的橫縱座標數據爲自動計算，若自動計算結果顯得太擁擠，可用splitNumber屬性定義建議分割數，

         但這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度做調整

   二、橫座標數據太多，顯示錯位或換行，有兩種方案處理：將刻度標籤旋轉較度；或增大座標軸刻度標籤的顯示間隔

   三、若非必要，不要隨意設置max，不然容易形成圖表超出y軸刻度線的問題，可利用min屬性去掉負座標；

    3.四、圖例（legend）

    常見屬性：是否顯示（show），朝向（orient），邊框顏色（borderColor），邊框寬度（borderWidth），格式化文本（formatter）

    實際問題：圖例默認邊框自帶圓弧，若要去除，borderRadius無效，borderRadius指的是這個圖例的外邊框

                    設置單個圖例的邊框屬性：

                    legend: {

                            data: [{ 

 icon:‘rect’,

}]

 

                     }

    3.五、數據（series:）

    可對單一條數據進行設置。

     實際問題：可用來設置當數據爲空時，不顯示0 

     label: {

                    normal: {

                        show: true,

                        formatter: function (value) {

                            if (value.value == 0) {

                                return "";

                            } else {

                                return value.value;

                            }

                        }

                    }

                }

    3.六、直角座標軸（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']

    按順序取色值，若所設置的顏色數量不夠，則循環使用

四、模擬鼠標劃過事件（Highchart）

onMouseOver()  // 模擬鼠標劃過事件，配合 setInterval 能夠實現輪選點