Echarts框架的使用

基本入門

1、 新建一個echarts.html文件，為ECharts准備一個具備大小（寬高）的Dom。

<!-- 為ECharts准備一個具備大小（寬高）的Dom -->

    <div id="main" style="height:400px"></div>

2、 新建<script>標簽引入模塊化單文件echarts.js

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

3、 新建<script>標簽中為模塊加載器配置echarts和所需圖表的路徑（相對路徑為從當前頁面鏈接到echarts.js），引入圖表文件見引入ECharts2

<script type="text/javascript">

        // 路徑配置

        require.config({

            paths: {

                echarts: 'dist'

            }

        });

    </script>

4. <script>標簽內動態加載echarts和所需圖表，回調函數中可以初始化圖表並驅動圖表的生成，option見API & Doc

// 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於准備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main'));
 
                var option = {
                    title: {
                        text: '某地區蒸發量和降水量',
                        subtext: '純屬虛構'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸發量', '降水量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                                {
                                    type: 'category',
                                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                                }
                            ],
                    yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                    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],
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        },
                        {
                            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],
                            markPoint: {
                                data: [
                                    { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                    { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
                // 為echarts對象加載數據 
                myChart.setOption(option);
            }
        );

5.    瀏覽器中打開echarts.html，就可看到以下效果

 

 

深入理解與學習

1 學習過程中曾經遇到，第一次加載時可以顯示圖表，按F5刷新后就報js的錯

此時把所有js代碼放到window.onload = function () {  }中就可以解決

2 當確認前台js代碼沒有錯，測試時還報js代碼的錯，此時是傳入的數據有問題！！！

 

 Legend中的 data，與series中的兩個name一致（這里是有兩個量），否則會有問題，比如修改成      legend: {data: ['蒸發量1', '降水量1'] },

將option簡化為
var option = {
                    title: {
                        text: '客流情況'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['進站客流']
                    },
                    calculable: true,
                    xAxis: [
                                {
                                    type: 'category',
                                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                                }
                            ],
                    yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                    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]
                        }
                    ]
                };
                // 為echarts對象加載數據 
                myChart.setOption(option);
            }
        );

修改橫縱坐標的值

 data: ['人民廣場站', '建設一路站', '飛虹路站', '朝陽站', '曹家橋站', '潘水站', '盈豐路站', '建設一路站', '飛虹路站', '朝陽站', '曹家橋站', '潘水站', '盈豐路站']

data: [1100, 801, 1500, 913, 1200, 513, 310, 1200, 1830, 650, 210, 200, 900]

柱形條太大，看起來不爽，此時可以設置柱形條寬度的屬性，我不用這種方法

      axisLabel: { rotate: 45, margin: 2, textStyle: { color: '#000', fontWeight: 'bold', fontFamily: '宋體'} },

   設置為false就不能拖動柱形條了

項目應用

項目中開發與入門中開發有以下不同：

首先可能有很多個圖表，所以應該封裝一個獲取option的方法；

其次，由於數據是從數據庫中加載過來的，所以橫縱坐標的數據不能寫死，以及圖表類型（柱形圖，折線圖）也不能寫死

 

Option獲取方法
//獲取各線路進站客流圖表的參數
        //OptionStation為Echarts圖表橫坐標的值，OptionFlow為縱坐標的值
        //charType為圖表類型（柱形圖、折線圖），hovertitle為鼠標移動到位置時顯示的縱坐標的值
        function GetOption(OptionStation, OptionFlow, linetitle, charType, hovertitle) {
            var option = {
                title: {
                    text: linetitle
                },
                tooltip: {
                    trigger: 'axis'
                },
                calculable: false,
                xAxis: [
                                {
                                    type: 'category',
                                    axisLabel: { rotate: 45, margin: 2, textStyle: { color: '#000', fontWeight: 'bold',fontFamily:'宋體'} },
                                    data: OptionStation
                                }
                            ],
                yAxis: [
                                {
                                    type: 'value'
                                }
                             ],
                series: [
        {
            name: hovertitle,
            type: charType,
            data: OptionFlow
        }
    ]
            };
            return option;
        }
var optionStationFlow4 = GetOption(station4, passengerFlow4, '四號線進站客流', 'bar', '進站客流'); 

后台傳輸數據到前台

一般來說，由於js是在前台，我們需要在頁面加載時去后台（不是aspx.cs文件）請求數據，此時需要注意以下問題

1 項目中可能是請求特定日期，特定線路等條件的數據，而時間，線路等參數可能是url傳過來的，我們在前台中就要通過獲取這些參數到后台中查詢相應的數據。

2 獲取后台數據要使用同步，不能異步，異步的話數據就更新不了，會報數據為null的錯

 

前台中手寫獲取url參數的方法

//手寫JavaScript獲取url參數的方法
        function GetRequest() {
            var url = decodeURI(location.search); //獲取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
使用方式如下
var Request = GetRequest(); 
var FromDate = Request["fromdate"];

 

前台中同步獲取后台傳過來的數據

首先后台需要到數據庫中獲取數據並拼接字符串，拼接格式為

['人民廣場站', '建設一路站', '飛虹路站', '朝陽站', '曹家橋站', '潘水站', '盈豐路站', '建設一路站', '飛虹路站', '朝陽站', '曹家橋站', '潘水站', '盈豐路站']

接着序列化成對象返回

JavaScriptSerializer serializer = new JavaScriptSerializer();

            return serializer.Serialize(new { Station2 = strA, PassengerFlow2 =strB, Station4 = strC, PassengerFlow4 = strD });

 

前台中

 

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/common.js" type="text/javascript"></script>
function executeDataService(FromDate, Todate, Lines) {
            Common.Util.DataServices('PTDDOperationDailyServices$GetStationFlow', { fromDate: FromDate, todate: Todate, lines: Lines }, function (returnValue) {
                var jsonObj = $.parseJSON(returnValue);
                station2 = eval("(" + jsonObj.Station2 + ")");
                passengerFlow2 = eval("(" + jsonObj.PassengerFlow2 + ")");
                station4 = eval("(" + jsonObj.Station4 + ")");
                passengerFlow4 = eval("(" + jsonObj.PassengerFlow4 + ")");
            }, "", false);
        }

 

 

 

 

所以需要通過eval方法將它轉換成對象