Echarts的簡單使用

由於要作軟件杯的項目，瞭解了一下如今比較熱門的統計圖庫，有如下幾種：

MSChart  

這個是Visual Studio裏的自帶控件，使用比較簡單，不過數據這塊須要在後臺綁定。

ichartjs

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

Chart.js

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

ECharts.js

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

下面來簡單說明一下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'}

                ]

            }]

        };