ASP.Net实现SQL动态绑定Echarts图表Demo完整源码附注释

已于 2022-06-22 16:06:47 修改
阅读量623 收藏 6
点赞数 2
分类专栏： Asp.NET 文章标签： echarts asp.net sql 流程图 c#
于 2022-06-14 16:27:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37344688/article/details/125280694
版权

运行效果图
在这里插入图片描述

前端页面代码

         <div class="line1">
            <div id="mainDiv" style="display: inline-block">
                <div id="dateContro" style="margin-left: 0px; margin-top: 0px; padding-top: 0px;">
                    查询时间:<input type="datetime-local" id="startDate" />至<input type="datetime-local" id="endDate" />
                    <input type="button" id="checkBtn" value="查询" onclick="checkDate()" />
                </div>
                <div id="main1" style="width: 500px; height: 500px;">
                </div>
            </div>

js文件代码

 function loadfourLine() {
          var myChart = echarts.init(document.getElementById('main1'), 'macarons');
          // 显示标题，图例和空的坐标轴
          myChart.setOption({
              dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 0,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，也控制x轴。
                type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 0,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            }
              ],
              title: {
                  text: '温度测试'
              },
              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',
                  boundaryGap: false, //取消左侧的间距
                  data: [],
                  axisLabel: {interval:0,rotate:40 },
                  axisPointer: {
                      type: 'shadow'
                  }
              }],
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              yAxis: {
                  type: 'value',
                  axisLabel: { formatter: '{value}(℃)' }
              },
              series: [
              {
                  name: '手机',
                  type: 'line',
                  data: []
              },
              {
                  name: '电脑',
                  type: 'line',
                  data: []
              },
              {
                  name: '风扇',
                  type: 'line',
                  data: []
              },
              {
                  name: '空调',
                  type: 'line',
                  data: []
              }
              ],
          });
          var dateData1 = [];    //类别数组（实际用来盛放X轴坐标值）    
          var temp1 = [];
          var temp2 = [];
          var temp3 = [];
          var temp4 = [];
          //myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
          $.ajax({
              type: 'get',//请求的方式
               url: './IHandler.ashx/ProcessRequest',//请求数据的地址
              dataType: 'json',        //返回数据形式为json
              async: "true",   //异步加载
              success: function (result) {
                  //请求成功时执行该函数内容，result即为服务器返回的json对象   
                  $.each(result.phone, function (index, item) {
                      dateData1.push(item.dateData1);
                      temp1.push(item.temValue);
                  });
                  $.each(result.computer, function (index, item) {
                      // dateData1.push(item.dateData1);    //逐个取出并放到时间数组当中
                      temp2.push(item.temValue);
                  });
                  $.each(result.fan, function (index, item) {
                      // dateData1.push(item.dateData1);
                      temp3.push(item.temValue);
                  });
                  $.each(result.kong, function (index, item) {
                      // dateData1.push(item.dateData1);
                      temp4.push(item.temValue);
                  });
                  myChart.setOption({        //加载数据图表
                      xAxis: {
                          data: dateData1
                      },
                      series: [{
                          data: temp1
                      },
                       {
                           data: temp2
                       },
                       {
                           data: temp3
                       },
                       {
                           data: temp4
                       }]
                  });
              },

              error: function (errorMsg) {
                  //请求失败时执行该函数
                  alert("图表请求数据失败!");
                  myChart.hideLoading();
              }
          });
      };
      loadfourLine();
//在此处调用时实时查询要加上setinterval函数





function checkDate() {
    var start = new Date($("#startDate").val()).getTime();
    var end = parseInt(new Date($("#endDate").val()).getTime());
    var myChart = echarts.init(document.getElementById('main1'), 'macarons');
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        dataZoom: [{
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
            start: 30,
            end: 70
        },
   {
       id: 'dataZoomY',
       type: 'slider',
       yAxisIndex: [0],
       filterMode: 'empty',
       start: 20,
       end: 80
   }],
        title: {
            text: '温度测试'
        },
        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',
            boundaryGap: false, //取消左侧的间距
            data: [],
            axisLabel: { interval: 0, rotate: 40 },
            axisPointer: {
                type: 'shadow'
            }
        }],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            axisLabel: { formatter: '{value}(℃)' }
        },
        dataZoom: [{
            y: 755,
            type: 'slider',
            orient: "horizontal",
            show: true,
            start: 0,
            end: 90
        }],
        series: [
        {
            name: '手机',
            type: 'line',
            data: []
        },
        {
            name: '电脑',
            type: 'line',
            data: []
        },
        {
            name: '风扇',
            type: 'line',
            data: []
        },
        {
            name: '空调',
            type: 'line',
            data: []
        }
        ],
    });
    var dateData1 = [];    //类别数组（实际用来盛放X轴坐标值）    
    var temp1 = [];
    var temp2 = [];
    var temp3 = [];
    var temp4 = [];
    //myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    $.ajax({
        type: 'get',//请求的方式
        url: './json/test.txt',//请求数据的地址
        dataType: 'json',        //返回数据形式为json
        async: "true",
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象   
            $.each(result.phone, function (index, item) {
                var tempdata = parseInt(new Date(item.dateData1).getTime());
                if (tempdata >= start  && tempdata <= end) {
                    dateData1.push(item.dateData1);
                    temp1.push(item.temValue);
                }
            });
            $.each(result.computer, function (index, item) {
                // dateData1.push(item.dateData1);    //逐个取出并放到时间数组当中
                var tempdata = parseInt(new Date(item.dateData1).getTime());
                if (tempdata  >= start  && tempdata <= end) {
                    temp2.push(item.temValue);
                }
            });
            $.each(result.fan, function (index, item) {
                // dateData1.push(item.dateData1);
                var tempdata = parseInt(new Date(item.dateData1).getTime());
                if (tempdata  >= start&& tempdata <= end) {
                    temp3.push(item.temValue);
                }
            });
            $.each(result.kong, function (index, item) {
                // dateData1.push(item.dateData1);
                var tempdata = parseInt(new Date(item.dateData1).getTime());
                if (tempdata >= start && tempdata <= end) {
                    temp4.push(item.temValue);
                }
            });
            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: dateData1
                },
                series: [{
                    data: temp1
                },
	             {
	                 data: temp2
	             },
					{
					    data: temp3
					},
					{
					    data: temp4
					}]
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
};

后端一般处理程序代码

 public string getdata()
    {
        MyClass mc = new MyClass();
        SqlConnection conn = mc.conn("sbdatabase");
        conn.Open();//切记连接完就要打开
        string _json;
        string _json1, _json2, _json3, _json4;
        Boolean isfirst1=true;
        Boolean isfirst2=true;
        Boolean isfirst3=true;
        Boolean isfirst4=true;
        string _cmd = "SELECT T_sb.sbID, T_sb.sbName, T_ls.ls_id, T_ls.sb_id, T_ls.sb_wd, T_ls.sb_yl, T_ls.sb_sj  FROM  T_ls INNER JOIN  T_sb ON T_ls.sb_id = T_sb.sbID";
        SqlDataReader dr = mc.getdatareader(_cmd);
        _json1 = "\"" + "phone" + "\"" + ":["; _json2 = "\"" + "computer" + "\"" + ":["; _json3 = "\"" + "fan" + "\"" + ":["; _json4 = "\"" + "kong" + "\"" + ":[";
        while (dr.Read())
        {
            //testbox.Text += dr["sbID"].ToString().Trim() ;
            //string a = dr["sbID"].ToString().Trim();
            //testbox.Text +=a;
            //  Boolean e15 = a=="sb20";
            //testbox.Text += e15;
            if (Equals(dr["sbID"].ToString().Trim(),"sb10") && isfirst1)
            {
                _json1 += "{";
                _json1 += "\"" + "temValue" + "\":\"" + dr["sb_wd"] + "\",";
                _json1 += "\"" + "dateData1" + "\":\"" + dr["sb_sj"] + "\"";
                _json1 += "}";
                isfirst1 = false;
            }
            else if (Equals(dr["sbID"].ToString().Trim(), "sb10") && !isfirst1)
            {
                _json1 += ",{";
                _json1 += "\"" + "temValue" + "\":\"" + dr["sb_wd"] + "\",";
                _json1 += "\"" + "dateData1" + "\":\"" + dr["sb_sj"] + "\"";
                _json1 += "}";
            }
            else if (Equals(dr["sbID"].ToString().Trim(), "sb20") && isfirst2)
            {
                _json2 += "{";
                _json2 += "\"" + "temValue" + "\":\"" + dr["sb_wd"] + "\",";
                _json2 += "\"" + "dateData1" + "\":\"" + dr["sb_sj"] + "\"";
                _json2 += "}";
                isfirst2 = false;
            }
            else if (Equals(dr["sbID"].ToString().Trim(), "sb20") && !isfirst2)
            {
                _json2 += ",{";
                _json2 += "\"" + "temValue" + "\":\"" + dr["sb_wd"] + "\",";
                _json2 += "\"" + "dateData1" + "\":\"" + dr["sb_sj"] + "\"";
                _json2 += "}";
            }
            else if (Equals(dr["sbID"].ToString().Trim(), "sb30") && isfirst3)
            {
                _json3 += "{";
                _json3 += "\"" + "temValue" + "\":\"" + dr["sb_wd"] + "\",";
                _json3 += "\"" + "dateData1" + "\":\"" + dr["sb_sj"] + "\"";
                _json3 += "}";
                isfirst3 = false;
            }
            else if (Equals(dr["sbID"].ToString().Trim(), "sb30") && !isfirst3)
            {
                _json3 += ",{";
                _json3 += "\"" + "temValue" + "\":\"" + dr["sb_wd"] + "\",";
                _json3 += "\"" + "dateData1" + "\":\"" + dr["sb_sj"] + "\"";
                _json3 += "}";
            }
            else if (Equals(dr["sbID"].ToString().Trim(), "sb40") && isfirst4)
            {
                _json4 += "{";
                _json4 += "\"" + "temValue" + "\":\"" + dr["sb_wd"] + "\",";
                _json4 += "\"" + "dateData1" + "\":\"" + dr["sb_sj"] + "\"";
                _json4 += "}";
                isfirst4 = false;
            }
            else if (Equals(dr["sbID"].ToString().Trim(), "sb40") && !isfirst4)
            {
                _json4 += ",{";
                _json4 += "\"" + "temValue" + "\":\"" + dr["sb_wd"] + "\",";
                _json4 += "\"" + "dateData1" + "\":\"" + dr["sb_sj"] + "\"";
                _json4 += "}";
            }
        }
        _json = "{" + _json1 +"],"+_json2 +"],"+_json3 +"],"+_json4 +"]"+"}";
        // testbox.Text += _json;
        conn.Close();
        return _json;
    }

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string s = getdata();
        context.Response.Write(s);
    }

完整Demo工程文件下载地址内含数据库备份文件
ASP.Net实现SQL动态绑定Echarts图表Demo完整源码

LilyCoder
关注
专栏目录
ASP.Net实现SQL动态绑定Echarts图表Demo完整源码
06-15
使用ASP.Net通过后台一般处理程序获取SQL查询数据转换成Json数据，前端通过Ajax请求与后端数据交互代码内附有注释，有任何问题即可留言
前端小白在asp.net core mvc中使用ECharts
芝麻麻雀-Asp.Net学习之路
11-20 1185
对于在浏览器中绘制图形图表，目前有较多的js类库可以使用，如：ChartJS，Flot，canvasjs等，但是今天介绍的主角为国产图表库，并在apache孵化，就是大名鼎鼎的echarts。 前方高能【官方介绍】 特性 - Apache ECharts (incubating) ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当...
ASP.NET操作echarts
03-27
使用ASP.NET与echarts进行数据交互，利用C#中的ASP.NET作为后台产生数据，通过Ajax作为前端定时与后端进行数据交互
ECharts 从后台动态获取数据 （asp.net）
weixin_30301183的博客
11-15 967
(一) 使用工具 visual studio 2017；Web开发：asp.net （代码中的js引用路径以及ajax方法调用的url，记得修改哦） (二) 准备工作（此处写给和我一样小白） 　　1.动态从后台获取数据，需使用Ajax获取后台Json，为此我们需要做一些准备工作，安装两个包（在vs的NuGet包管理） 一个json的包，一个mvc的包。 　　2.添加必要的js。 ...
echarts在ASP.NET MVC中的使用
05-04
示例为在ASP.NET中使用echarts的实际应用，包括折线图，动态数据，地图，柱形图。后台数据用MVC填充，达到实际应用的目的
ASP.NET绑定sql数据库采用echarts显示数据图表(实现了柱状图和饼图).zip
12-12
在这个项目中，开发者使用ASP.NET技术来实现从SQL数据库中获取数据，并通过ECharts这个强大的JavaScript数据可视化库来展示这些数据。ECharts是百度开发的一个轻量级、高性能的图表库，支持丰富的图表类型，如柱状图...
ASP.NET绑定sql数据库采用echarts显示数据图表
04-23
在本场景中，开发者使用ASP.NET来实现与SQL数据库的交互，并利用ECharts这个JavaScript数据可视化库来展示数据图表。ECharts是由百度开发的一个开源项目，它提供了丰富的图表类型、精美的图表效果以及易于上手的API...
asp.net+sql数据库学生成绩管理系统源码
01-23
资源名：asp.net+sql数据库学生成绩管理系统源码 资源类型：程序源代码 源码说明： 基于asp.net编写的学生成绩管理系统 包含完整代码和数据库 很适合借鉴学习 适合人群：新手及有一定经验的开发人员
ASP.NET使用ECharts展示后台数据
热门推荐
guoxy_nb的专栏
12-31 1万+
Baidu开源项目Echarts无论从数据的展现能力，对桌面与智能终端的友好支持，还是在使用的方便性上，慢慢成为广大程序员使用图表展示数据的首选。在使用过程中，也会出现各种坑，而网上找到的大部分资料，都是人云亦云，相互抄来抄去，需要仔细斟酌，才能在万千资料中找到自己所能用的信息。本文详细介绍了在ASP.NET中使用ECharts的详细过程，希望对初步使用该方法的同学有所帮助。 一、前端 1、从
【转】ASP.NET使用ECharts展示后台数据
mao_mao37的博客
09-29 1245
Baidu开源项目Echarts无论从数据的展现能力，对桌面与智能终端的友好支持，还是在使用的方便性上，慢慢成为广大程序员使用图表展示数据的首选。在使用过程中，也会出现各种坑，而网上找到的大部分资料，都是人云亦云，相互抄来抄去，需要仔细斟酌，才能在万千资料中找到自己所能用的信息。本文详细介绍了在ASP.NET中使用ECharts的详细过程，希望对使用该方法的朋友有所帮助。 一、前端...
asp.net_echarts后台动态获取数据
07-09
自己练手写的几个例子： demo1和demo2是echart两种不同的写法，数据是写死的，仅供参考，推荐以demo2为模板。 demo3、demo4、demo5是ajax动态从后台获取json数据的例子。 demo3是折线图和柱状图。 demo4是饼图。 demo5是双折线(柱状)图。
源代码：ASP.NET的SQL管理程序
12-03
源代码：ASP.NET的SQL管理程序！！！！！！！！！！！！！！！！！！！！
asp图表代码
09-13
纯asp的自动生成图表的代码，参数含义(数组，横坐标，纵坐标，图表的宽度，图表的高度,图表标题，X轴单位，Y轴单位)
C#ASP.NET使用Echarts制作统计图
qq_56744102的博客
03-07 3063
卓越项目需要所以想要用ASP绘制统计图，但是从来没有接触过echarts和ajax,于是在哔哩哔哩上看了一些简短的课程大致了解了一下echarts和ajax. 前端代码： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %> <!DOCTYPE html> <html xmlns="http:/
asp.net +Echarts 图表可视化
最新发布
xzhu博客
11-08 488
asp.net Api +Echarts 图表可视化
echarts .NET类库开源
weixin_34209406的博客
03-03 261
前言： 　　２０１２年从长沙跑到深圳，２０１６年又从深圳回到长沙，兜兜转转一圈，又回到了原点．４年在深圳就呆了一家公司，回长沙也是因为深圳公司无力为继，长沙股东老板挽留，想想自己年纪也不小了．就回来了，在长沙工作几月，也没什么太多的不适应．不用赶着项目上线，不用加班，想想其实也不错.　 　　从１２年在长沙就想写点开源的东西，不过实在不敢献丑．这次机缘巧合，有个朋友一个项目需要用到大量报表，我找...
ASP.NET中 Echarts动态显示及简单插入多个图表
Yueqin0512的博客
04-02 797
ASP.NET中 Echarts动态显示及简单插入多个图表* 创建项目 文件 -> 新建 -> 项目 -> ASP.NET Web应用程序(EchartsDemo) -> 选择模板（Empty) -> 确定 在项目上右击 -> 添加 -> 新建项 -> OWIN Startup 类(Startup.cs) 在项目上右击 -> 添加 ->...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LilyCoder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值