web網頁柱形圖的創建-echarts

要想了解echarts，可以百度搜索echarts，進入它的官網看一下。本經驗以柱形圖為例講解echarts的簡單使用。 1. 首先下載echarts工具包，可以在官網下載，圖中為下載后的echar

要想了解echarts，可以百度搜索echarts，進入它的官網看一下。本經驗以柱形圖為例講解echarts的簡單使用。

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

2. 測試echarts，新建文件夾test，將echarts-2.0.3/doc/example/www下的js拷貝到test下，并新建文件。

3. 編輯文件。首先導入echarts文件，因為我們只是測試柱狀圖所以只需要引入esl.js和echarts.js文件即可。

lt;script src"echarts/esl.js"gt;lt;/scriptgt;
lt;script src"echarts/echarts.js"gt;lt;/scriptgt;

4. 創建柱狀圖。首先創建柱狀圖的容器，如下所示：

lt;div id"main" style"height: 500px; border: 1px solid ccc; padding: 10px;"gt;lt;/divgt;

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

5. 在容器中添加柱狀圖：

var myChart  (('main'));
var option  {
    title: {
        text: '柱狀圖示例'
    },
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10]
    }]
};
(option);

6. OK，代碼編寫完成，我們雙擊文件，柱狀圖成功顯示。

你可以根據顯示對比一下script內容，找到編寫柱狀圖的關鍵。