echart2使用入門

最近使用的echarts做圖表，使用起來感覺比較方便，官方的文檔也很詳細。
我使用的是echarts2，因爲項目中需要一張效果好一些的數據交互的圖表，我覺得以下兩張圖表可以滿足我的需求：
地圖標線
搭配時間軸地圖擴展
感覺效果不錯。

話不多說，開始吧。

首先，要下載echarts2使用所需要的模塊包
echarts2
下載解壓後如下：

其實這麼多文件和文件夾大部分都是例子和文檔，你真正需要的只是build文件夾。

使用的時候，首先需要引入文件

 <script src="build/dist/echarts.js"></script>

這個文件相當一個總的入口，模塊化加載的方法都基於該文件。

接下來定義一個div（節點），用於初始化圖表

<div id="main" style="height:400px;"></div>

至少要定義一個高度，不然顯示不出來

然後初始化圖表

 require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['銷量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"銷量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };

                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
        );

具體的屬性、參數參照echarts官網。
這裏ec.init(document.getElementById(‘main’)); 獲取節點的方式不知道爲什麼使用jquery不行，只能這麼寫。
要動態加載數據的話，需要注意xaxis和yaxis裏的data要傳一個數組。

以上，一個最簡單的柱狀圖就加載完了，使用的是模塊化加載的方式，非模塊化以及echarts2和echarts3的一些區別參考以下鏈接：
echarts2和echarts3的區別

順便提一句，echarts地圖擴展圖表的底圖是一張svg，自己畫的話有點麻煩，最終沒有完全達到心裏的預期。

完整代碼點擊下載

密碼：z9v1