请教百度echarts的使用问题

MrGG 2015-09-22 10:33:41

测试的时候直接调用数据库数据展现没有问题，
之后打算在页面加上日期选择，然后再加载echarts展现图表，怎么弄也弄不出来，代码贴出来大家帮我看看是哪里的问题呢



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CBDFlow.WebUI.WebForm1" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>流量图</title>

    <link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />

    <link href="themes/bootstrap/easyui.css" rel="stylesheet" type="text/css" />

    <link href="themes/icon.css" rel="stylesheet" type="text/css" />

    <link href="css/table.css" rel="stylesheet" type="text/css" />

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

    <script src="js/jquery.easyui.min.js" type="text/javascript"></script>

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

    <script src="js/easyui-lang-zh_CN.js" type="text/javascript"></script>



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

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



    <script type="text/javascript">



        var today = new Date();        

        var currentDateStart = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();        

        var currentDateEnd = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate()



        $(document).ready(function () {



            // 时间控件

            $('#dtStart').datebox({

                value: currentDateStart,

                editable: false,

                required: true

            });

            $('#dtEnd').datebox({

                value: currentDateEnd,

                editable: false,

                required: true

            });

        });



        // 执行查询

        function searchData() {

            // 先校验

            var start = $('#dtStart').datetimebox('getValue');

            var end = $('#dtEnd').datetimebox('getValue');

            //alert(start + "-" +end );

            DrawEChart

        }



        //清空查询条件

        function clearForm() {



            $('#dtStart').datetimebox('setValue', currentDateStart);

            $('#dtEnd').datetimebox('setValue', currentDateEnd);

            //$('#queryForm').form('clear');

        }





        require(

        [

            'echarts',

            'echarts/chart/line' //按需加载图表关于线性图、折线图的部分

        ]            

        );



        var myChart;



        //创建ECharts图表方法

        function DrawEChart(ec,start,end) {

            //--- 折柱 ---

            myChart = ec.init(document.getElementById('mainScatter'));

            //图表显示提示信息

            myChart.showLoading({

                text: "图表数据正在努力加载..."

            });

            //定义图表options

            var options = {

                title: {

                    text: "<%=corporation %>",

                    subtext: "<%=businessname %>"

                    //                    sublink: "http://www.stepday.com/myblog/?Echarts"

                },

                tooltip: {  //提示框

                    trigger: 'axis' // 触发器类型

                },

                color: ['#3636ff', '#007500', '#b7ffb7'],

                legend: {   //图例

                    data: []

                },

                toolbox: {  //工具箱

                    show: true,

                    feature: {

                        mark: false,

                        saveAsImage: { show: true }

                    }



                },

                calculable: true,

                timeline: {

                    type: 'time'



                },

                xAxis: [

                    {

                        //                        axisLabel:{

                        //                            rotate:60

                        //                        },

                        type: 'category',

                        data: []

                    }

                ],

                yAxis: [

                    {

                        type: 'value',



                        splitArea: { show: true },

                        axisLabel: {

                            formatter: '{value} Mbps'

                        }



                    }

                ],

                series: []  //数据系列

            };



            //通过Ajax获取数据

            $.ajax({

                type: "post",

                async: false, //同步执行

                url: "../../Ajax/GetChartData.aspx?dateA="+start+"&dateB="+end+"&splitMinutes=<%=splitMinutes %>&interfaceID=<%=interfaceID %>",

                dataType: "json", //返回数据形式为json

                success: function (result) {

                    if (result) {

                        //将返回的category和series对象赋值给options对象内的category和series

                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式

                        options.xAxis[0].data = result.category;

                        options.series = result.series;

                        options.legend.data = result.legend;

                        myChart.hideLoading();

                        myChart.setOption(options);

                    }

                },

                error: function (errorMsg) {

                    alert("不好意思，大爷，图表请求数据失败啦!");

                }

            });

        }





    </script>

</head>

<body>

    <style type="text/css">

        html, body{

            margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;

        }    

    </style>

    <div region="center" >

        <div  style="padding: 20px;">



            <form id="queryForm" style="margin: 10;">

                <table id="t1">

                    <tr>

                        <td>

                        开始时间：

                        <input id="dtStart" type="text"></input>

                        结束时间：

                        <input id="dtEnd" type="text"></input>

                        <a href="javascript:void(0)" onclick="searchData();" class="easyui-linkbutton" iconCls="icon-search">加载</a>

                        <a href="javascript:void(0)" onclick="clearForm();"  class="easyui-linkbutton" iconCls="icon-cancel">重置</a>

                        </td>

                    </tr>

                </table>

            </form>

            <br/>

            <!-- 为ECharts准备一个具备大小（宽高）的Dom height:400px;-->

            <div id="mainScatter" class="easyui-panel" title="气泡图"  style="padding: 10; float: center;"></div>

        </div>

    </div>

</body>

</html>

...全文

3622 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

MrGG 2015-09-22

打赏
举报

引用 1 楼 ajianchina 的回复:

看这个帖子中echarts如何自动刷新的，那么你可以利用其中的方法。 http://bbs.csdn.net/topics/391070015

多谢多谢看完了，我也是照葫芦画瓢弄了，但f12 总是提示“Uncaught TypeError: Cannot read property 'xAxis' of undefined”


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CBDFlow.WebUI.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>流量图</title>
    <link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />
    <link href="themes/bootstrap/easyui.css" rel="stylesheet" type="text/css" />
    <link href="themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/table.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/easyui-lang-zh_CN.js" type="text/javascript"></script>

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

    <script type="text/javascript">
        var myChart;
        var today = new Date();        
        var currentDateStart = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();        
        var currentDateEnd = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate()

        // 按需加载
        // Step:3 conifg ECharts's path, link to echarts.js from current page.
        // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
        require.config({
            paths: {
                echarts: './js/echarts' //echarts.js的路径
            }
        });

        // Step:4 require echarts and use it in the callback.
        // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
        require(
            [
                'echarts',
                'echarts/chart/line' //按需加载图表关于线性图、折线图的部分
            ],
            function(ec){
                //基于准备好的dom，初始化echarts图表
                myChart = ec.init(document.getElementById('mainScatter'));
                
                //图表显示提示信息
                myChart.showLoading({
                    text: "图表数据正在努力加载..."
                });
                
                //定义图表options
                var options = {
                    title:{
                        text: "<%=corporation %>",
                        subtext: "<%=businessname %>"
//                        sublink: "http://www.stepday.com/myblog/?Echarts"
                    },
                    tooltip: {  //提示框
                        trigger: 'axis' // 触发器类型
                    },
                    color: ['#3636ff', '#007500', '#b7ffb7'],
                    legend: {   //图例
                        data: []
                    },
                    toolbox: {  //工具箱
                        show: true,
                        feature: {
                            mark: false,
                            saveAsImage: { show: true }
                        }

                    },
                    calculable: true,
                    timeline: {
                        type: 'time'
                    },
                    xAxis: [{
                            type: 'category',
                            data: []
                    }],
                    yAxis: [{
                            type: 'value',
                            splitArea: { show: true },
                            axisLabel: {
                                formatter: '{value} Mbps'
                            }
                    }],
                    series: []  //数据系列
                }; //end options 定义
            } //end function(ec)
        );

        $(document).ready(function () {

            // 时间控件
            $('#dtStart').datebox({
                value: currentDateStart,
                editable: false,
                required: true
            });
            $('#dtEnd').datebox({
                value: currentDateEnd,
                editable: false,
                required: true
            });
        });

        // 执行查询
        function searchData() {
            // 先校验
            var start = $('#dtStart').datetimebox('getValue');
            var end = $('#dtEnd').datetimebox('getValue');
            //alert(start + "-" +end );
            DrawEChart(start,end)
            
        }

        //清空查询条件
        function clearForm() {

            $('#dtStart').datetimebox('setValue', currentDateStart);
            $('#dtEnd').datetimebox('setValue', currentDateEnd);
            //$('#queryForm').form('clear');
        }

        //创建ECharts图表方法
        function DrawEChart(start,end) {
            
            //通过Ajax获取数据
            $.ajax({
                type: "post",
                async: false, //同步执行
                url: "../../Ajax/GetChartData.aspx?dateA="+start+"&dateB="+end+"&splitMinutes=<%=splitMinutes %>&interfaceID=<%=interfaceID %>",
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    if (result) {
                        
                        //更新数据
                        var option = myChart.getOption();
                        
                        //将返回的category和series对象赋值给options对象内的category和series
                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                        options.xAxis[0].data = result.category;
                        options.series = result.series;
                        options.legend.data = result.legend;
                        myChart.hideLoading();
                        myChart.setOption(options);
                        alert("渲染完毕!");
                    }
                },
                error: function (errorMsg) {
                    alert("不好意思，大爷，图表请求数据失败啦!");
                }
            });
        }


    </script>
</head>
<body>
    <style type="text/css">
        html, body{
            margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
        }    
    </style>
    <div region="center" >
        <div  style="padding: 20px;">

            <form id="queryForm" style="margin:10;">
                <table id="t1">
                    <tr>
                        <td>
                        开始时间：
                        <input id="dtStart" type="text"></input>
                        结束时间：
                        <input id="dtEnd" type="text"></input>
                        <a href="javascript:void(0)" onclick="searchData();" class="easyui-linkbutton" iconCls="icon-search">加载</a>
                        <a href="javascript:void(0)" onclick="clearForm();"  class="easyui-linkbutton" iconCls="icon-cancel">重置</a>
                        </td>
                    </tr>
                </table>
            </form>
            <br/>
            <!-- 为ECharts准备一个具备大小（宽高）的Dom height:400px;-->
            <div id="mainScatter" class="easyui-panel" title="流量图"  style="padding: 10; float: center;"></div>
        </div>
    </div>
</body>
</html>