ECharts，一個純 Javascript 的圖表庫

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);</code></pre> 
  
 運行代碼后就可以在頁面上生成一個柱狀圖。Echarts配置項可以參照Echarts官網提供的文檔介紹： http://echarts.baidu.com/option.html#title 。接下來Helloweba會有更多的文章結合圖表實例來介紹Echart的使用，敬請關注！農歷猴年到了，恭祝大家猴年吉祥，萬事如意！ 

</div>
 </div>
來自： http://www.helloweba.com/view-blog-350.html
                    

                        
 本文由用戶 jopen  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 
本文地址：http://www.baiduhome.net/news/view/26c97e                        
                        
 ECharts JavaScript