ECharts.js 超簡單入門（本質canvas）

一、總結

一句話總結：echarts這些圖標的本質都是canvas。

 

二、ECharts.js學習（一） 簡單入門

EChart.js 簡單入門

最近有一個統計的項目要做，在前端的數據需要用圖表的形式展示。網上搜索了一下，發現有幾種統計圖庫。

MSChart  

這個是Visual Studio里的自帶控件，使用比較簡單，不過數據這塊需要在后台綁定。

ichartjs

是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標簽繪制各式圖形。 支持餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖等。

Chart.js

也是一款基於HTML5的圖形庫和ichartjs整體類似。不過Chart.js的教程文檔沒有ichartjs的詳細。不過感覺在對於移動的適配上感覺比ichartjs要好一點。

ECharts.js

這是我准備在這個項目中使用的圖形庫，這也是一款基於HTML5的圖形庫。圖形的創建也比較簡單，直接引用Javascript即可。使用這個庫的原因主要有三點，一個是因為這個庫是百度的項目，而且一直有更新，目前最新的是EChart 3；第二個是這個庫的項目文檔比較詳細，每個點都說明的比較清楚，而且是中文的，理解比較容易；第三點是這個庫支持的圖形很豐富，並且可以直接切換圖形，使用起來很方便。

官網：ECharts.js

下面來簡單說明一下EChart.js的使用。

第一步，引用Js文件

<script type="text/javascript" src="js/echarts.js"></script>

js文件有幾個版本，可以根據實際需要引用需要的版本。下載鏈接

第二步，准備一個放圖表的容器

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

第三步，設置參數，初始化圖表

<script type="text/javascript">
        //指定圖標的配置和數據
        var option = {
            title:{
                text:'ECharts 數據統計'
            },
            tooltip:{},
            legend:{
                data:['用戶來源']
            },
            xAxis:{
                data:["Android","IOS","PC","Ohter"]
            },
            yAxis:{

            },
            series:[{
                name:'訪問量',
                type:'line',
                data:[500,200,360,100]
            }]
        };
        //初始化echarts實例
        var myChart = echarts.init(document.getElementById('chartmain'));

        //使用制定的配置項和數據顯示圖表
        myChart.setOption(option);
    </script>

這樣簡單的一個統計圖表就出來了，官網使用的柱狀圖，我這邊改用了折線圖。

 

 柱狀圖其實也很簡單，只要修改一個參數就可以了。把series里的type 值修改為"bar"

 餅圖和折線圖、柱狀圖有一點區別。主要是在參數和數據綁定上。餅圖沒有X軸和Y軸的坐標，數據綁定上也是采用value 和name對應的形式。

        var option = {
            title:{
                text:'ECharts 數據統計'
            },            
            series:[{
                name:'訪問量',
                type:'pie',    
                radius:'60%', 
                data:[
                    {value:500,name:'Android'},
                    {value:200,name:'IOS'},
                    {value:360,name:'PC'},
                    {value:100,name:'Ohter'}
                ]
            }]
        };

 

、