總結使用 echarts 踩過的坑

        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);    

 

 

效果圖以下：