Javascript ECharts組件製作圖表的例子

ECharts是一個基於html5 Canvas、純 Javascript 的圖表庫。它可以流暢的運行在 PC 和行動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直觀，生動，可互動，可高度個人化定製的資料視覺效果圖表。

ECharts 提供了常規的折線圖，柱狀圖，散佈圖，餅圖，K線圖，用於統計的盒形圖，用於地理資料可視化的地圖，熱力圖，線圖，用於關係資料視覺效果的關係圖，treemap，多維資料視覺效果的平行座標，還有用於 BI 的漏斗圖，儀錶盤，並且支援圖與圖之間的混搭。
引入ECharts

引入方式很簡單，只需要像普通的 JavaScript 庫一樣用 script 標籤引入。

<script src="echarts.min.js"></script>
繪製圖表

在body裡需要放置圖表的地方準備一個具備高度的div容器，注意一定要設定一個高度。

<div id="myChart" style="width: 600px;height:400px;"></div>

然後就可以通過 echarts.init 方法初始化一個 echarts 執行個體並通過 setOption 方法產生一個簡單的柱狀圖。
//初始化echarts執行個體

var myChart = echarts.init(document.getElementById('myChart'));
 
// 指定圖表的配置項和資料
var option = {
    title: {
        text: '本月銷售量統計',
        left: 'center'
    },
    tooltip: {},
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [115, 220, 136, 100, 100, 60]
    }]
};
 
// 使用剛指定的配置項和資料顯示圖表。

myChart.setOption(option);

運行代碼後就可以在頁面上產生一個柱狀圖。Echarts配置項可以參照Echarts官網提供的文檔介紹：http://echarts.baidu.com/option.html#title。接下來Helloweba會有更多的文章結合圖表執行個體來介紹Echart的使用