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

最新推荐文章于 2024-04-23 16:24:40 发布
最新推荐文章于 2024-04-23 16:24:40 发布
阅读量358 收藏 1
点赞数
文章标签： 测试 json javascript ViewUI
原文链接：http://www.cnblogs.com/smartsmile/p/6234038.html
版权 
@{
    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%',
                                    center: ['40%', '50%'],
                                    data: result,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                //position:'inside',
                                                formatter: '{b} : {c} ({d}%)'
                                            }
                                        },
                                        labelLine: { show: true }
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    },
                    error: function (errorMsg) {
                        alert("数据加载失败，请稍后重试!");
                    }
                })
            }

            //全国地图
            function GetAjaxData2(paras) {
                $.ajax({
                    type: "post",
                    url: "@Url.Action("GetViewData1", "Count")",
                    dataType: "json", //返回数据形式为json
                    data: paras,
                    success: function (result) {
                        //显示全国地图
                        // 基于准备好的dom，初始化echarts实例
                        var myChartMap = echarts.init(document.getElementById('mainMap'));

                        function randomData() {
                            return Math.round(Math.random() * 1000);
                        }

                        optionMap = {
                            title: {
                                text: '访问地域分布图',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            visualMap: {
                                min: 0,
                                max: 2500,
                                left: 'left',
                                top: 'bottom',
                                text: ['高', '低'],           // 文本，默认为数值文本
                                calculable: true
                            },
                            toolbox: {
                                show: true,
                                orient: 'vertical',
                                left: 'right',
                                top: 'center'
                                //feature: {
                                //    dataView: { readOnly: false },
                                //    restore: {},
                                //    saveAsImage: {}
                                //}
                            },
                            series: [
                                {
                                    name: '浏览量',
                                    type: 'map',
                                    mapType: 'china',
                                    label: {
                                        normal: {
                                            show: true
                                        },
                                        emphasis: {
                                            show: true
                                        }
                                    },
                                    data: result
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChartMap.setOption(optionMap);
                    },
                    error: function (errorMsg) {
                        alert("数据加载失败，请稍后重试!");
                    }
                });
            }

            function GetAjaxData3(paras) {
                //折线图
                $.ajax({
                    type: "post",
                    url: "@Url.Action("GetViewDataLine", "Count")",
                    data: paras,
                    dataType: "json", //返回数据形式为json
                    success: function (result) {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart1 = echarts.init(document.getElementById('mainLine'));

                        // 指定图表的配置项和数据
                        var option1 = {
                            title: {
                                text: '浏览量数据统计',
                                //subtext: '实时更新',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            xAxis: {
                                name: "日期（日）",
                                data: result.x
                            },
                            yAxis: {
                                name: "浏览量（次）",
                                type: 'value'
                            },
                            series: {
                                name: '浏览量',
                                type: 'line',
                                data: result.y
                            }
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart1.setOption(option1);

                    },
                    error: function (errorMsg) {
                        alert("数据加载失败，请稍后重试!");
                    }
                })
            }
        });
    </script>
    <style type="text/css">
        .divbanner {
            width: 95%;
            border-radius: 5px;
            border: 1px solid #e7e1e1;
            text-align: center;
            clear: both;
            margin: 5px;
            font-family: 'Microsoft YaHei';
            font-size: 16px;
            font-weight: 200;
            padding: 5px;
        }

        .spanbold {
            font-size: 18px;
            color: #DE7F7F;
            font-weight: 600;
        }

        .divsum {
            width: 95%;
            border-radius: 5px;
            background-color: #F1C992;
            text-align: center;
            clear: both;
            margin: 5px;
            font-family: 'Microsoft YaHei';
            font-size: 18px;
            font-weight: 600;
            color: #ffffff;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <table border="0" cellspacing="0" class="tableCss" cellpadding="0" width="100%">
        <tr>
            <td class="tdHead" style="width: 120px">选择时间:</td>
            <td align="left">
                <input id="txtBeginTime" class="easyui-datebox" data-options="prompt:'开始时间'" editable="false" style="width: 260px;">
                <input id="txtEndTime" class="easyui-datebox" data-options="prompt:'结束时间'" editable="false" style="width: 260px;">
                    <input id="btnQuery" type="button" value="查    询" class="inputBtn2" />
            </td>
        </tr>
    </table>
    <div class="divsum">网站访问概况</div>
    <div class="divbanner">
        总浏览量 <span class="spanbold">@ViewBag.AllTotal</span>     
        今日浏览量 <span class="spanbold">@ViewBag.TodayTotal</span>    
        昨日浏览量 <span class="spanbold">@ViewBag.YestodayTotal</span>
    </div>
    <div id="mainLine" style="width: 100%;height:400px;"></div>
    <div style="margin:6px 0 6px 180px">
        <div id="mainMap" style="width: 800px;height:600px;float:left;"></div>
        <div id="mainPie" style="width: 600px;height:600px;float:left;"></div>
    </div>

    <div class="divsum">用户IP概况</div>
    <div class="divbanner">
        总IP数 <span class="spanbold">@ViewBag.IpTotal</span>    
        今日IP数 <span class="spanbold">@ViewBag.TodayIpTotal</span>   
        昨日IP数 <span class="spanbold">@ViewBag.YestodayIpTotal</span>
    </div>

    <div class="divsum">转发量概况</div>
    <div class="divbanner">
        总转发量 <span class="spanbold">@ViewBag.TransTotal</span>    
        今日转发量 <span class="spanbold">@ViewBag.TodayTransTotal</span>    
        昨日转发量 <span class="spanbold">@ViewBag.YestodayTransTotal</span>
    </div>
</body>
</html>

 

        #region 浏览访问统计
        [ActionAuthorize]
        [HttpGet]
        public ActionResult ViewCount()
        {
            //执行存储过程
            var result = Core.Dal.DataRootBase.QueryStoreProc("pro_GetViewTotal");
            ViewBag.AllTotal = result[0].Total;
            ViewBag.TodayTotal = result[1].Total;
            ViewBag.YestodayTotal = result[2].Total;

            ViewBag.IpTotal = result[3].Total;
            ViewBag.TodayIpTotal = result[4].Total;
            ViewBag.YestodayIpTotal = result[5].Total;

            ViewBag.TransTotal = result[6].Total;
            ViewBag.TodayTransTotal = result[7].Total;
            ViewBag.YestodayTransTotal = result[8].Total;
            return View();
        }

        [HttpPost]
        public ActionResult GetViewData()
        {
            //执行存储过程
            DynamicParameters dp = new DynamicParameters();
            dp.Add("@startDate", MSCL.RequestHelper.GetString("beginTime"));
            dp.Add("@endDate", MSCL.RequestHelper.GetString("endTime"));
            var a = Core.Dal.DataRootBase.QueryStoreProc("pro_GetViewCountByProvince", dp);
            var  result = a.Select(p => new { name = p.ViewProvince , value = p.CountPercent }).ToList();
            return Json(result);
        }

        [HttpPost]
        public ActionResult GetViewData1()
        {
            //执行存储过程
            DynamicParameters dp = new DynamicParameters();
            dp.Add("@startDate", MSCL.RequestHelper.GetString("beginTime"));
            dp.Add("@endDate", MSCL.RequestHelper.GetString("endTime"));
            var a = Core.Dal.DataRootBase.QueryStoreProc("pro_GetViewCountByProvince", dp);
            var result = a.Select(p => new { name = p.ViewProvince, value = p.ViewCount }).ToList();
            return Json(result);
        }

        [HttpPost]
        public ActionResult GetViewDataLine()
        {
            //执行存储过程
            DynamicParameters dp = new DynamicParameters();
            dp.Add("@startDate", MSCL.RequestHelper.GetString("beginTime"));
            dp.Add("@endDate", MSCL.RequestHelper.GetString("endTime"));

            var result = Core.Dal.DataRootBase.QueryStoreProc("pro_GetViewCountByDate", dp).Select(p => new { name = p.ViewDate, value = p.ViewCount }).ToList();
            ViewDataFormat model = new ViewDataFormat();
            model.x = result.Select(p => Convert.ToDateTime(p.name).ToString("MM/dd")).ToList();
            model.y = result.Select(p => p.value).ToList();
            return Json(model);
        }

        public class ViewDataFormat
        {
            public List<dynamic> x;
            public List<dynamic> y;
        }
        #endregion

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>单击双击,鼠标滑过等事件</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <span id="hover-console"></span>
    <span id="console"></span>
    <script type="text/javascript">
        // 基于准备好的dom，初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['最高', '最低']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            dataZoom: {
                show: true,
                realtime: true,
                start: 40,
                end: 60
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: function () {
                        var list = [];
                        for (var i = 1; i <= 30; i++) {
                            list.push('2013-03-' + i);
                        }
                        return list;
                    }()
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '最高',
                    type: 'line',
                    data: function () {
                        var list = [];
                        for (var i = 1; i <= 30; i++) {
                            list.push(Math.round(Math.random() * 30) + 30);
                        }
                        return list;
                    }()
                },
                {
                    name: '最低',
                    type: 'bar',
                    data: function () {
                        var list = [];
                        for (var i = 1; i <= 30; i++) {
                            list.push(Math.round(Math.random() * 10));
                        }
                        return list;
                    }()
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        /* 处理点击事件 
             ECharts 支持常规的鼠标事件类型，
             包括 'click'、'dblclick'、'mousedown'、'mousemove'、
             'mouseup'、'mouseover'、'mouseout'
        */
        myChart.on('click', function (params) {
            eConsole(params);
        });
        myChart.on('dblclick', function (params) {
            eConsole(params);
        });

        function eConsole(param) {
            var mes = '【' + param.type + '】';
            if (typeof param.seriesIndex != 'undefined') {
                mes += '  seriesIndex : ' + param.seriesIndex;
                mes += '  dataIndex : ' + param.dataIndex;
                mes += '  name : ' + param.name;
                mes += '  value : ' + param.value;
            }
            if (param.type == 'hover') {
                document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
            }
            else {
                document.getElementById('console').innerHTML = mes;
            }
            console.log(param);
        }
    </script>
</body>
</html>


转载于:https://www.cnblogs.com/smartsmile/p/6234038.html

diehe5608
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C# MVC 封装百度的EChart完整例子
06-02
使用C#的MVC封装了EChart图表。类EChartJson包含了绘制图形的几种基本要素，大家可以根据需要扩展EChart的更多图表属性，当然这个需要各位多了解百度EChart图表的各种属性描述。方法getJsonData()负责在后台为EChartJson的实例初始化数据，并返回json数据。关键是前台显示图表，省去了大量的工作。
c#中嵌入echarts_怎么在MVC中使用Echarts饼图
weixin_39864387的博客
12-22 562
第二步：代码实现。具体实现如下所示借助于jquery的组件实现饼图$(function () {var myChart = echarts.init($("#myChartArea")[0]);var option = {title: {text: '百度用户访问来源',subtext: '纯属虚构',x: 'center'},tooltip: {trigger: 'item',formatter...
Echarts visualMap
AreYouOkLei的博客
03-08 313
Echarts visualMap。
MVC + ECharts案例
Clay_Zhang的博客
06-16 7469
ASP.NET MVC + ECharts图表案例废话不多说直接讲讲今天要做的事。利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成，本文以柱状图为例。ECharts下载以及相关文档：http://echarts.baidu.com/index.html本文下载了源代码版本进行操作 首先在控制器里写好获取数据库中需要在图表中显示的数据，我这里返回的是Json 的数据
ASP.NET MVC + ECharts图表案例
weixin_34130269的博客
06-16 822
废话不多说直接讲讲今天要做的事。 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成，本文以柱状图为例。 ECharts下载以及相关文档：http://echarts.baidu.com/index.html 本文下载了源代码版本进行操作 首先在控制器里写好获取数据库中需要在图表中显示的数据，我这里返回的是Json 的数据格式 然后在前台Chars.c...
Asp.net mvc 使用echart的一点点经验
Ｏ(≧口≦)Ｏ的专栏
12-03 4680
最近做项目需要用到图表,发现echart是一个非常强大的工具。而我在使用它的三个月中，使用它的方法也在逐渐深入 最开始使用时，js和后台代码都不是特别了解，于是使用最笨的办法，仿照官网，将option在前台配置好，使用ajax请求数据并填充数据，代码如下 前台代码 function GetStatic(u1,year1,month1,day1,year2,month2,day2) {
asp .net MVC Echart 实现图表实战
weixin_45191758的博客
06-05 2704
在各类网站中数据分析地位尤其重要，而在其中图表更是能直观的显示数据 而 Echart生成图表也是近年来比较热门的一种生成图表的方式，接下来博主将带你进入使用Echart生成图表的世界
MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
qq_31776665的博客
02-19 329
<pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="pun">@{</span></li><li class="L1">&l...
asp.net MVC项目开发之统计图echarts饼形图（二）
weixin_30920091的博客
08-23 252
上面介绍了柱状图，只有js代码后台的传递等我们介绍完饼形图的使用过程在做介绍 有了柱状图的介绍，在使用饼形图，其实很容易了，上代码 1.首先加载网页时，需要用到的加载项和事件。 //打开网页加载 $(function () { // 路径配置 require.config({ paths: { ...
使用java实现各种数据统计图（柱形图，饼图，折线图）
09-03
用Jfree实现条形柱状图表，java代码实现。可经常用于报表的制作，代码自动生成后可以自由查看。可以自由配置图表的各个...本文给大家介绍使用java实现各种数据统计图（柱形图，饼图，折线图），需要的朋友可以参考下
C#MVC echart k线图实例
01-15
k线图，解决k线每个块颜色如何设置的问题。代码完整可运行
C#基于MVC+EasyUI+ECharts后台管理系统完整源码
07-09
是在我之前上传的基础上修改的,添加了一些新功能和图形报表 1. 本例子采用Vs2012编译(其它VS版本可以转换后使用) 2. MVC + easyUI + sqlserver2014 + ECharts 3. 主要功能:新增、修改、删除、分页、导出Excel文件、上传图片、权限设置、图形报表展示 (权限设置只是为了练习easyUI tree的使用,具体项目具体分析) (例子涉及两张表(用户表+权限表)，datagrid分页默认采用sqls
java利用JFreeChart实现各类数据统计图柱形图饼图折线图.pdf
01-13
java利用JFreeChart实现各类数据统计图柱形图饼图折线图.pdf
js数据可视化 图表 饼图 折线图 1.zip
09-02
三个都有
折线图、饼图等元件库.rplib
10-25
Axure元件库 数据图标 折线图 饼图 柱状图等多种图像 可自由编辑 童叟无欺 省心省力
Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图
06-22
Springboot+mybatis+echarts实现数据可视化 可实现折线图饼图柱状图
测试理论面试题（一）
最新发布
2401_83060956的博客
04-23 941
测试理论面试题
【Java框架】SpringMVC（二）——SpringMVC数据交互
低调做人，低调编码，神码都是浮云
04-19 935
springMVC中的入参/出参、Rest风格等
CODEFORCES --- 1807A. Plus or Minus
weixin_45691078的博客
04-23 265
对于每个测试用例，在新行上输出 + 或 (-)，代表正确的等式。≤162 ) - 测试用例数。每个测试用例的描述由三个整数。≤18 ).输入的附加限制条件：生成的输入将使两个等式中的。如果第一个等式为真，则输出 +，否则输出 -。第三个测试用例中， 2−9=−7。在第一个测试案例中， 1+2=3 .在第二个测试用例中， 3−2=1。，使得这两个等式中有。
.根据共享的实验数据，练习使用ECharts制作散点图、饼图等
06-02
好的，关于使用ECharts制作散点图和饼图，我可以为你提供一些帮助和指导。 首先，你需要安装ECharts。你可以在官网上下载ECharts或者通过npm包管理器进行安装。安装完成后，你需要引入ECharts到你的HTML文件中。 接着，你可以按照以下步骤来绘制散点图： 1. 创建一个HTML容器，用来放置你的散点图。 ```html <div id="scatter-chart"></div> ``` 2. 在JavaScript代码中，定义一个ECharts实例，并配置散点图的数据和样式。 ```javascript // 实例化ECharts var myChart = echarts.init(document.getElementById('scatter-chart')); // 配置散点图的数据和样式 var option = { title: { text: '散点图' }, xAxis: { type: 'value', name: 'X轴' }, yAxis: { type: 'value', name: 'Y轴' }, series: [{ data: [[1, 2], [2, 3], [3, 4], [4, 5], [5, 6]], type: 'scatter' }] }; // 使用配置项显示图表 myChart.setOption(option); ``` 3. 最后，你需要在浏览器中打开你的HTML文件来查看散点图的效果。 关于绘制饼图，你可以按照以下步骤来完成： 1. 创建一个HTML容器，用来放置你的饼图。 ```html <div id="pie-chart"></div> ``` 2. 在JavaScript代码中，定义一个ECharts实例，并配置饼图的数据和样式。 ```javascript // 实例化ECharts var myChart = echarts.init(document.getElementById('pie-chart')); // 配置饼图的数据和样式 var option = { title: { text: '饼图' }, series: [{ name: '数据', type: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ] }] }; // 使用配置项显示图表 myChart.setOption(option); ``` 3. 最后，你需要在浏览器中打开你的HTML文件来查看饼图的效果。 希望这些步骤能够帮助你使用ECharts制作散点图和饼图。如果你还有其他问题或需要更多的帮助，欢迎随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值