ECharts官方網站：http://echarts.baidu.com/

1.首先下載echarts工具包，可以在官網下載，圖中為下載後的echarts工具包的目錄結構。

2.測試echarts，新建資料夾test，將echarts-1.4.1\doc\example\www\下的js拷貝到test下，並新建test.html檔案。

3.編輯test.html檔案。首先匯入echarts檔案，因為我們只是測試柱狀圖所以只需要引入esl.js和echarts.js檔案即可。

<script src="js/esl.js"></script>
<script src="js/echarts.js"></script>
 

4.建立柱狀圖。首先建立柱狀圖的容器。

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

注意裡面的id，下面會用到，另外要設定高度，否則柱狀圖不會顯示。

5.建立完成容器後，在容器中新增柱狀圖。

    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑
    require.config({
        paths:{ 
            echarts:'js/echarts',
            'echarts/chart/bar' : 'js/echarts-map',
            'echarts/chart/line': 'js/echarts-map',
            'echarts/chart/map' : 'js/echarts-map'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 動態載入echarts然後在回撥函式中開始使用，注意保持按需載入結構定義圖表路徑
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function(ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: true},
                        magicType : {show: true, type: ['bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'資訊1',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,32.6, 20.0,]
                    },
                    {
                        name:'資訊2',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,48.7, 18.8,]
                    }
                ]
            });
        }
    );