MVC中使用Echart后台加载数据实现饼图、折线图、全国地图数据,单击双击事件等

最新推荐文章于 2024-05-11 10:29:34 发布

smartsmile2012

最新推荐文章于 2024-05-11 10:29:34 发布

阅读量4.4k

点赞数 2

分类专栏： MVC JS & Jquery

本文链接：https://blog.csdn.net/smartsmile2012/article/details/53489299

版权

@{
    Layout = null;
}
@if (false)
{
    <script src="~/Js/jquery-easyui-1.5/jquery.min.js"></script>
    <script src="~/Js/JqueryExt.js"></script>
    <script src="~/Js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <script src="~/Js/Common.js"></script>
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>访问统计</title>
    <link type="text/css" rel="stylesheet" href="@Url.Content("/css/default.css")" />
    <!--easyui-->
    <link rel="stylesheet" type="text/css" href="@Url.Content("/JS/jquery-easyui-1.5/themes/default/easyui.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("/JS/jquery-easyui-1.5/themes/default/tree.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("/JS/jquery-easyui-1.5/themes/icon.css")" />
    <script type="text/javascript" src="@Url.Content("/JS/jquery-easyui-1.5/jquery.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("/JS/jquery-easyui-1.5/jquery.easyui.min.js")"></script>
    <link type="text/css" rel="stylesheet" href="@Url.Content("/css/jquery_dialog.css")" />
    <script type="text/javascript" src="@Url.Content("/JS/jquery_dialog.js")"></script>
    <script type="text/javascript" src="@Url.Content("/js/common.js")"></script>
    <script type="text/javascript" src="@Url.Content("/JS/JqueryExt.js")"></script>
    <script src="~/Js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Js/chart/js/echarts.min.js"></script>
    <script src="~/Js/chart/js/china.js"></script>
    <script type="text/javascript">
        $(function () {
            ReloadData();
            $("#btnQuery").click(function () {
                var beginTime = $("#txtBeginTime").datebox("getValue");
                var endTime = $("#txtEndTime").datebox("getValue");
                if (beginTime == "" || endTime == "") {
                    $.messager.alert("提示", "请选择开始时间和结束时间后,再操作!", "info");
                    return;
                }
                var para = { "beginTime": beginTime, "endTime": endTime };
                ReloadData(para);
            });

            function ReloadData(para) {
                GetAjaxData1(para);
                GetAjaxData2(para);
                GetAjaxData3(para)
            }

            //区域饼图
            function GetAjaxData1(paras) {
                $.ajax({
                    type: "post",
                    url: "@Url.Action("GetViewData", "Count")",
                    dataType: "json", //返回数据形式为json
                    data: paras,
                    success: function (result) {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('mainPie'));
                        var option = {
                            title: {
                                text: '访问省份比例图',
                                //subtext: '实时更新',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            series: [
                                {
                                    name: '地区访问统计',
                                    type: 'pie',
                                    radius: '55%',