初次體驗百度eCharts遇到的問題和解決方法

前言

       上周在厭煩Highchart下，體驗了下百度的eCharts，支持IE6、7、8+外，對數據在線編輯還有工具欄支持，體驗時遇到了幾個小問題，最近兩天在嘗試得到了一個解決方法。

 

Tooltip時單位問題

      在Tooltip里使用formatter解決，設置函數相對復雜些，因為要根據你的Series取值設置，就像一個多維數組一樣。 在支持漢字的同時也支持上下標如10⁴t。

tooltip: {
                   trigger: 'axis',
                    axisPointer: {            // 坐標軸指示器，坐標軸觸發有效
                            type: 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
                        },
                     formatter: function (param){
            return param[0][1] + '<br/>'
                   + param[0][0] + ' : ' + (param[0][2]+' 萬噸') + '<br/>'
                   + param[1][0] + ' : ' + (param[1][2]+' 萬噸')+'<br/>'
                   + param[2][0] + ' : ' + (param[2][2]+' 萬噸')+'<br/>';
                        }                      
                    }

柱狀圖圓角

    當然了，在查看官方Demo時大部分例子都已經是圓角。 我在查閱資料時有朋友推薦使用chart.setTheme方法，使用官方的主題，這個我沒搞通，我是設置series的itemStyle屬性，其中包含屬性barBorderRadious。

series: [
                        {
                            name: '預測',
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color:'#fff',
                                    barBorderColor: 'tomato',
                                    barBorderWidth: 6,
                                    barBorderRadius:5,
                                }
                            },
                            data: arr2 
                        }]