手把手教你使用ECharts繪製可視化圖表

1.在ECharts官網，下載ECharts的源碼和樣本檔案。

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1116494D3-0.jpg" title="ECharts目錄.jpg" />

2.解壓縮下載下來的Echars壓縮包，找到doc\example\www\echartsjs目錄，將裡面的js檔案全部取出來，放到項目js目錄檔案夾下。

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1116492P2-1.jpg" title="樣本目錄.jpg" />

3.在頁面的頂端引入模組載入器esl.js。

<script src=\'#\'" /esl.js"></script>

4.為ECharts準備一個具備大小的Dom。

<div id="chartArea" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

5.為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑。

require.config({        paths:{            echarts:'./js/echarts',            'echarts/chart/bar' : './js/echarts',            'echarts/chart/line': './js/echarts'        }    });

6.動態載入echarts然後在回呼函數中開始使用，注意保持按需載入結構定義圖表路徑

require(        [            'echarts',            'echarts/chart/bar',            'echarts/chart/line'        ],        function(ec) {            var myChart = ec.init(document.getElementById('main'));            var option = {                tooltip : {                    trigger: 'axis'                },                legend: {                    data:['蒸發量','降水量']                },                toolbox: {                    show : true,                    feature : {                        mark : true,                        dataView : {readOnly: false},                        magicType:['line', 'bar'],                        restore : true,                        saveAsImage : true                    }                },                calculable : true,                xAxis : [                    {                        type : 'category',                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']                    }                ],                yAxis : [                    {                        type : 'value',                        splitArea : {show : true}                    }                ],                series : [                    {                        name:'蒸發量',                        type:'bar',                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]                    },                    {                        name:'降水量',                        type:'bar',                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]                    }                ]            };                                                         myChart.setOption(option);        }    );

7.

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1116492M8-2.png" title=".png" />

8.注意事項

　　在實際項目中，ECharts表徵圖的橫座標和縱座標，均是在後台返回的資料中的得到的。在前端動態設定data數值時，data的類型必須是數組，EChars才能展現出表徵圖的效果來。

本文出自 “塵風隨影的天空” 部落格，請務必保留此出處http://genuinecx.blog.51cto.com/2890523/1294417