ASP.NET结合Echarts展示后台数据

已于 2023-01-05 11:08:37 修改
阅读量5k 收藏 74
点赞数 13
分类专栏： ASP.NET 文章标签： ASP.NET ECharts
于 2020-05-18 16:20:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HerryDong/article/details/106195206
版权

Echarts功能强大，如果项目中需要根据后台数据生成统计图表，那么Echarts绝对是不二选择。下面就来介绍一下如何利用ASP.NET + Echarts来生成折线图、柱状图、饼图这三类基本的统计图。首先在SqlServer中建立一张测试表[TSales]，该表模拟某商店在2019年每天的销售金额，共有365条记录，如下图所示：
在这里插入图片描述
下面需要按照月份对该数据表进行划分，生成相应的折线图、柱状图、饼图，同时还需要根据季度对该数据表进行划分，生成另一个饼图，如下图所示：
在这里插入图片描述

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>ASP.NET + ECharts</title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib/echarts/echarts.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div id="aa" class="col-md-6" style="height:450px;"></div>
            <div id="bb" class="col-md-6" style="height:450px;"></div>
        </div>
        <div class="row">
            <div id="cc" class="col-md-6" style="height:450px;"></div>
            <div id="dd" class="col-md-6" style="height:450px;"></div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $.ajax({
                type: 'post',
                url: 'ashx/QueryByMonthHandler.ashx',
                dataType: 'json',
                async: false,
                success: function (data) {
                    getLineChart(data.month, data.sales);
                    getBarChart(data.month, data.sales);
                    getPieChartByMonth(data.month, data.sales);
                }
            })

            $.ajax({
                type: 'post',
                url: 'ashx/QueryByQuarterHandler.ashx',
                dataType: 'json',
                async: false,
                success: function (data) {
                    getPieChartByQuarter(data.month, data.sales);
                }
            })
        })

        // 折线图
        function getLineChart(x, y) {
            var line = echarts.init(document.getElementById('aa'));
            line.setOption({
                title: {
                    text: '月度统计报告/折线图',
                    left: 'center'
                },
                tooltip: {},
                xAxis: {
                    name: '月份',
                    data: x
                },
                yAxis: {
                    type: 'value',
                    name: '销售金额（万元）'
                },
                series: [{
                    name: '销售金额',
                    type: 'line',
                    data: y,
                    areaStyle: {
                        normal: {
                            color: 'skyblue'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'skyblue',
                            lineStyle: {
                                color: 'skyblue'
                            }
                        }
                    }
                }]
            })
        }

        // 柱状图
        function getBarChart(x, y) {
            var bar = echarts.init(document.getElementById('bb'));
            bar.setOption({
                title: {
                    text: '月度统计报告/柱状图',
                    left: 'center'
                },
                color: ['greenyellow'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        name: '月份',
                        data: x,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '销售金额（万元）',
                        type: 'bar',
                        barWidth: '60%',
                        data: y
                    }
                ]
            })
        }

        // 饼图——按月份
        function getPieChartByMonth(x, y) {
            var items = [];
            for (var i = 0; i < x.length; i++) {
                items.push({
                    value: y[i],
                    name: x[i]
                })
            }

            var pie = echarts.init(document.getElementById('cc'));
            pie.setOption({
                title: {
                    text: '月度统计报告/饼图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: x
                },
                series: [
                    {
                        name: '销售金额（万元）',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: items,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }
        
        // 饼图——按季度
        function getPieChartByQuarter(x, y) {
            var items = [];
            for (var i = 0; i < x.length; i++) {
                items.push({
                    value: y[i],
                    name: x[i]
                })
            }

            var pie = echarts.init(document.getElementById('dd'));
            pie.setOption({
                title: {
                    text: '季度统计报告/饼图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: x
                },
                series: [
                    {
                        name: '销售金额（万元）',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: items,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }
    </script>
</body>
</html>

后台代码

按月查询

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication1.ashx
{
    /// <summary>
    /// LineChartDataHandler 的摘要说明
    /// </summary>
    public class QueryByMonthHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 按月查询数据
            DataTable dataTable = new DataTable();
            string sql = "select sum(Sales) as Sales from [TSales] group by datepart(mm,Time)";
            using (SqlDataAdapter adapter = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
            {
                adapter.Fill(dataTable);
            }

            // 月份
            List<string> month = new List<string>();
            month.AddRange(new string[] { "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" });

            // 销售额
            List<double> sales = new List<double>();
            for (int i = 0; i < dataTable.Rows.Count; i++)
            {
                DataRow dataRow = dataTable.Rows[i];
                sales.Add(double.Parse(dataRow["Sales"].ToString()));
            }

            // 返回前端数据
            var obj = new
            {
                month = month,
                sales = sales
            };
            context.Response.Write(JsonConvert.SerializeObject(obj));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

按季度查询

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;


namespace WebApplication1.ashx
{
    /// <summary>
    /// QueryByQuarterHandler 的摘要说明
    /// </summary>
    public class QueryByQuarterHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 按月查询数据
            DataTable dataTable = new DataTable();
            string sql = "select sum(Sales) as Sales from [TSales] group by datepart(mm,Time)";
            using (SqlDataAdapter adapter = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
            {
                adapter.Fill(dataTable);
            }

            // 季度
            List<string> month = new List<string>();
            month.AddRange(new string[] { "第一季度", "第二季度", "第三季度", "第四季度" });

            // 按季度分类
            double[] quarter = new double[4];
            for (int i = 0; i < dataTable.Rows.Count; i++)
            {
                DataRow dataRow = dataTable.Rows[i];
                if (i >= 0 && i <= 2)
                {
                    quarter[0] += double.Parse(dataRow["Sales"].ToString());
                }
                else if (i >= 3 && i <= 5)
                {
                    quarter[1] += double.Parse(dataRow["Sales"].ToString());
                }
                else if (i >= 6 && i <= 8)
                {
                    quarter[2] += double.Parse(dataRow["Sales"].ToString());
                }
                else
                {
                    quarter[3] += double.Parse(dataRow["Sales"].ToString());
                }
            }

            // 销售额
            List<double> sales = new List<double>();
            sales.AddRange(quarter);

            // 返回前端数据
            var obj = new
            {
                month = month,
                sales = sales
            };
            context.Response.Write(JsonConvert.SerializeObject(obj));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
HerryDong
关注
  • 13
    点赞
  • 踩
  • 74
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
ASP.NET 使用Layui 显示后台数据
遇见--专栏
12-27 1379
此篇文字为项目代码，中间有包含未知引用的类不会提供，这里只是告诉大家asp.net 使用Layui的基本流程，
ASP.NET+Echarts绘制图表
weixin_44146294的博客
02-25 5340
首先去百度搜索Echarts去下载图表实例，或者直接点击链接：Echarts图表实例下载。其中可以自定义下载，也可以下载全部，根据个人需求进行实例的下载即可！ ...
ASP.NET使用ECharts展示后台数据
热门推荐
guoxy_nb的专栏
12-31 1万+
Baidu开源项目Echarts无论从数据的展现能力，对桌面与智能终端的友好支持，还是在使用的方便性上，慢慢成为广大程序员使用图表展示数据的首选。在使用过程中，也会出现各种坑，而网上找到的大部分资料，都是人云亦云，相互抄来抄去，需要仔细斟酌，才能在万千资料中找到自己所能用的信息。本文详细介绍了在ASP.NET中使用ECharts的详细过程，希望对初步使用该方法的同学有所帮助。 一、前端 1、从
探索ECharts .Net类库：让数据可视化变得轻松易行
最新发布
gitblog_00039的博客
05-31 317
探索ECharts .Net类库：让数据可视化变得轻松易行 项目地址:https://gitcode.com/idoku/EChartsSDK 1、项目介绍 ECharts .Net类库是一款专为.NET开发者打造的数据可视化工具，基于流行的ECharts图表库，提供了丰富的图表类型和强大的功能选项。该类库旨在简化.NET中构建复杂图表的过程，使得数据呈现更为直观且易于理解。 2、项目技术分析 E...
【转】ASP.NET使用ECharts展示后台数据
mao_mao37的博客
09-29 1212
Baidu开源项目Echarts无论从数据的展现能力，对桌面与智能终端的友好支持，还是在使用的方便性上，慢慢成为广大程序员使用图表展示数据的首选。在使用过程中，也会出现各种坑，而网上找到的大部分资料，都是人云亦云，相互抄来抄去，需要仔细斟酌，才能在万千资料中找到自己所能用的信息。本文详细介绍了在ASP.NET中使用ECharts的详细过程，希望对使用该方法的朋友有所帮助。 一、前端...
c# asp.net后台控制echarts前端显示数据
weixin_41053472的博客
04-02 2580
分享下小白的辛苦历程，明明是小白，要求还挺高，虽然C#里就带了charts插件，非常简单，也有示例，但是总感觉图表没有echarts的好看，所以就想要换成echarts，但是不会后台传输data值到前端，网上找了好多方法，都是利用json的，有的是用到了ashx，弄了几天没弄明白，搁置了一段时间，最近又想起来研究下，看到了一篇文档觉得挺好，不用单独建立ashx文件了，后台直接生成json，前台引用。不过新手对很多函数命令不是很懂，无奈，只好完全照搬吧！不过我在实际操作的时候还是遇到了问题，好多命令不懂真是苦
asp.net_echarts后台动态获取数据
代码笔记
12-03 1979
asp.net_echarts后台动态获取数据
ECharts 从后台动态获取数据 （asp.net）
weixin_30301183的博客
11-15 945
(一) 使用工具 visual studio 2017；Web开发：asp.net （代码中的js引用路径以及ajax方法调用的url，记得修改哦） (二) 准备工作（此处写给和我一样小白） 　　1.动态从后台获取数据，需使用Ajax获取后台Json，为此我们需要做一些准备工作，安装两个包（在vs的NuGet包管理） 一个json的包，一个mvc的包。 　　2.添加必要的js。 ...
ASP.NET操作echarts
03-27
ASP.NET 操作 ECharts 是一个将后端数据与前端可视化图表结合的过程，主要涉及 ASP.NET、C# 和 ECharts 三部分技术。ECharts 是百度推出的一款轻量级的 JavaScript 图表库，提供了丰富的图表类型，如折线图、柱状图...
asp.net_echarts后台动态获取数据.rar
06-22
在ASP.NET框架下，我们可以通过C#或VB.NET代码在后台动态生成ECharts所需的数据，然后通过Ajax或者Web API等方式传递到前端，展示在ECharts图表上。 1. **ASP.NET基础** ASP.NET是微软推出的用于构建Web应用程序的...
.NET 与 Echarts 实现前后端数据的交互
07-14
在.NET开发环境中，Echarts是一个常用的前端数据可视化库，它能与后端的ASP.NET MVC框架相结合，实现数据的交互和动态更新。本示例主要探讨如何在ASP.NET MVC项目中利用Echarts来创建各种图表，如折线图、动态数据...
EasyUI实现用户登录界面
HerryDong的博客
09-23 9875
EasyUI虽然表单功能强大，但很多人对EasyUI的传统样式难以忍受（包括我自己），所以最近一直在琢磨怎么利用EasyUI搭建一个还算现代化的登陆界面。搞了半天搞定了，登陆界面如下图所示，自认为还算看得过去~ 下面说一下实现过程，首先下载EasyUI1.8.5及其样式扩展插件，这里我用到的主要是metro-blue样式。 然后就是写代码了，代码如下所示： <!DOCTYPE html&...
WebAPI Post模式下传递、接收参数的几种方法
HerryDong的博客
08-24 8611
创建实体类 前一篇博客讲了Get模式下的传递、接收参数的几种方法，现在来介绍一下Post模式下传递、接收参数的几种方法。首先还是老样子，创建一个空的ASP.NET WebAPI工程，在Models文件夹下创建一个实体类：User，代码如下： using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApi.Models { public class User
Bootstrap TreeView使用教程三：制作树形下拉框
HerryDong的博客
03-04 6049
前两篇博客介绍了Bootstrap TreeView的使用方法，这篇博客就来介绍一下如何利用Bootstrap TreeView制作一个树形下拉框，先来看一下效果： 其实原理很简单，先创建一个文本框，然后在文本框下方创建树，让其不可见，当点击文本框时弹出树，选择节点后再隐藏即可。 前端代码 <!DOCTYPE html> <html> <head> &...
WebAPI Get模式下传递、接收参数的几种方法
HerryDong的博客
08-24 4664
创建实体类 创建一个空的ASP.NET WebAPI工程，在Models文件夹下创建一个实体类：User，代码如下： using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApi.Models { public class User { /// <summary> /// 编号 /// &l
ASP.NET实现登录验证码
HerryDong的博客
01-21 4228
制作验证码主要是利用了C#的GDI绘制，效果如下图所示： html代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" />...
ASP.NET结合EasyUI实现界面布局
HerryDong的博客
05-05 3484
使用EasyUI也有一段时间了，现在总结一下其其界面布局。首先EasyUI仿照ExtJS，将整个页面区域划分成了东(east)、南(south)、西(west)、北(north)、中(center)五个区域，在布局时center区域必须出现，其他区域随意。在VS中可通过NuGET引用EasyUI的相关文件. <!DOCTYPE html> <html> <head&g...
asp.net+echarts
06-21
### 回答1： ASP.NET是一种使用Microsoft技术架构创建的Web应用程序开发框架，它允许开发人员使用C#或Visual Basic等编程语言来构建动态网站和Web应用程序。而Echarts则是一个基于JavaScript的数据可视化库，能够利用图表、地图、仪表盘等各种方式来展现数据。 结合ASP.NET与Echarts可以实现数据展示与呈现的功能，通常需要使用ASP.NET MVC或ASP.NET Web Forms等技术架构来构建网站或应用程序，并嵌入Echarts图表组件，通过数据源提供数据并展示在页面上。 ASP.NET提供了强大的后端支持，能够进行数据加工、业务逻辑处理以及与数据库交互等操作，同时Echarts图表组件可以满足更多的数据可视化需求，包括折线图、柱状图、饼图、地图、仪表盘等类型，可以为数据提供更为直观、易懂的呈现方式。 通过ASP.NET与Echarts的结合，我们可以轻松实现数据可视化，以及数据展示和呈现的需求，同时拥有更高的可扩展性和定制化程度。这种结合关系在许多企业级应用程序、数据分析平台、大屏展示系统等领域都得到了广泛的应用。 ### 回答2： ASP.NET是一个基于微软.NET技术的web开发框架，它提供了丰富的类库和开发工具，使开发人员可以快速构建Web应用程序。而ECharts是京东数据可视化团队针对大数据可视化场景设计开发的一个开源的数据可视化库，提供了多种图表类型和丰富的交互功能，可以帮助我们更好地展示数据。 当将ECharts与ASP.NET结合使用时，我们可以通过引用ECharts的相关JS库和CSS文件，在ASP.NET应用程序中轻松地创建各种图表，从而使我们的数据更加直观和易于理解。此外，ECharts还提供了丰富的配置选项，我们可以自由地根据自己的需求来设置图表的各种属性。 在使用ASP.NET和ECharts开发数据可视化应用程序时，我们可以利用ASP.NET提供的服务器端数据处理和计算功能，通过Ajax异步请求来获取数据，并使用ECharts将数据以图表形式展示出来。这种方式不仅可以快速构建Web应用程序，而且可以帮助我们更好地理解和分析数据。 总而言之，ASP.NET和ECharts是两个互补的技术，它们共同帮助我们快速构建数据可视化应用程序，使我们能够更好地展示和分析数据。 ### 回答3： ASP.NET是一种基于微软.NET框架的Web应用程序开发技术，而Echarts是一款流行的JavaScript可视化图表库。ASP.NET Echarts是将两者结合使用，实现在ASP.NET项目中嵌入Echarts图表的一种方法。 通过ASP.NET Echarts，可以快速搭建可视化界面，展示数据，对数据进行分析和展示。ASP.NET提供了丰富的数据处理和管理功能，而Echarts则提供了丰富的图表类型和展示样式。两者的结合，使得开发者可以更加便捷地实现数据可视化，实现更高效的数据分析和应用。 ASP.NET Echarts使用简单，只需引入相关的JavaScript文件和Echarts库，即可快速实现图表的呈现和交互。同时，ASP.NET Echarts也支持动态数据绑定和交互，使得数据展示更加灵活和实用。 总之，ASP.NET Echarts是一种对ASP.NET应用程序进行数据可视化处理的有效方法。它将ASP.NET和Echarts相结合，简化了数据处理和可视化的开发过程，让开发者可以更加专注于数据处理与分析，实现更高效的数据可视化功能。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值