.NET+Ajax+ashx 实现Echarts图表动态交互

2024-03-01 17:48
文章标签 动态 实现 图表 交互 net ajax echarts ashx

本文主要是介绍.NET+Ajax+ashx 实现Echarts图表动态交互，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：

　　使用Echarts展示图表效果，在这里只做了四种案例：折线、柱状、圆形、雷达。当初是一位朋友用到Echarts展示数据，他没有太多时间弄，所以我就帮他搞出来，当初刚接触的时候也是一头雾水，不知道该怎么下手，网上类似的案例有也不多，并且不是自己想要的效果。正好今天整理电脑时候发现还有实现的案例，就放在自己的博客上留着以后用。

实现步骤：

　　既然说到了动态数据，当然离不开查询，我在这用SQL Server建一个简单的库，只为展示其效果。

       

看到数据大家伙都知道这是一个车品牌的图例（说了一句废话^_^），接下来开始画前台页面，效果大概是这个样子的：

　　

当然这是根据个人爱好，我喜欢比较规整的东西，所以就浪费了一些时间画出一个样式。

css样式代码：

body,ul,li,div,a,span{margin:auto; 
} .btnChart{width:750px;height:40px; margin:0 auto;
}
.BarFigure {BACKGROUND: url(/chartImg/column3d.gif) no-repeat 4px 4px; 
}
.RadarFigure {BACKGROUND: url(/chartImg/leidatu.gif) no-repeat 4px 4px; 
} 
.PieFigure {BACKGROUND: url(/chartImg/pie.gif) no-repeat 4px 4px; 
}
.LineFigure {BACKGROUND: url(/chartImg/donut.gif) no-repeat 4px 4px; 
}
.btnChart ul li{text-decoration:none;border:1px solid gray;padding:5px;border-radius:5px;color:#000; font-size:14px;font-family:'楷体';float:right;list-style:none;margin-left:10px; 
}
.btnChart ul li:hover {color: orange; cursor:pointer;
}   
.Line {border-bottom: 1px solid #e1e1e1;width: 750px;margin: 0 auto; 
}
.ChartStyle{width:800px;height:500px;border:1px solid gray;margin:0 auto;display:none; 
}

html代码：

<body><div style="height:600px;width:1000px;margin:0 auto; border:1px solid gray">  <br /><div class="btnChart" ><ul>  <li class='RadarFigure'>&nbsp; 雷达图 </li><li class='PieFigure'>&nbsp; 饼状图 </li><li class='BarFigure'>&nbsp; 柱状图 </li><li class='LineFigure'>&nbsp; 折线图 </li> </ul>  </div> <div class="showCharArray"><div  class=" ChartStyle" >         <%--折线图--%> <div id="Line" style="width:800px; height:450px;margin-top:30px;" ></div> </div><div  class="ChartStyle" >          <%--柱状图--%><div id="Bar" style="width:800px; height:450px;margin-top:30px;"></div> </div><div class="ChartStyle">            <%--饼状图--%> <div id="Pie" style="width:800px; height:450px;margin-top:30px;"></div> </div><div  class="ChartStyle">           <%--雷达图--%> <div id="Radar" style="width:800px; height:450px;margin-top:30px;"></div> </div>   </div></div> 
</body>

接下来开始做Echarts的准备工作啦，先从官网下载echarts.min.js 链接：http://echarts.baidu.com/download.html ，jquery.js我就不说啦。

    <script src="Scripts/jquery-1.4.1.min.js"  type="text/javascript"></script>     <%--jquery.js--%><script src="Scripts/echarts.min.js" type="text/javascript"></script>           <%-- Echarts.js --%><link href="css/ChartPage.css" rel="stylesheet" type="text/css" />  <%--引用的css样式--%>

前台写的差不多了，我们开始写查询数据。

　　　　 static string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";string sql = @"  select Id,Num,Product from SalesVolume";       //SQL语句DataTable dt = ExecuteDataTable(sql,CommandType.Text,null);     //查询结果
List<object>  lists = new List<object>();                       //创建object类型的泛型foreach (DataRow dr in dt.Rows){var obj = new { name = dr["Product"], value = dr["Num"] };  //key，value
                lists.Add(obj);} var jsS = new JavaScriptSerializer();                           //创建json对象context.Response.Write(jsS.Serialize(lists));                   //返回数据
            } public  DataTable ExecuteDataTable(string sql, CommandType type, params SqlParameter[] pars){DataSet ds = new DataSet();DataTable dt = new DataTable();using (SqlConnection con = new SqlConnection(conStr)){con.Open();SqlCommand cmd = new SqlCommand(sql, con);cmd.CommandType = type;if (pars != null){cmd.Parameters.AddRange(pars);}SqlDataAdapter adpt = new SqlDataAdapter(cmd);adpt.Fill(ds);dt = ds.Tables[0];}return dt; }

后台查询也很简单，只要能返回key和value值就可以了。前台的js直接上代码吧，差不多都能看懂。

$(function () {  $("select").addClass("form-control");$(".LineFigure").click(function () {var $content = $(this).parent().parent().next().children("div:nth-child(1)");if ($content.is(":visible")) {$(this).css({ "color": "#000", "border-color": "gray" });$content.html("");$content.hide();} else {$(this).css({ "color": "orange", "border-color": "orange" });$(this).siblings().css({ "color": "#000", "border-color": "gray" });$content.siblings().hide();var newElement = $('<div id="Line" style="width:800px; height:450px;margin-top:30px;" ></div> ');$content.append(newElement);//-----------上下都是设置样式的可以无视掉，这里才是核心--------------------
                    $.ajax({url: "ashx/Echarts.ashx",data: { cmd: "bar" },cache: false,async: false,dataType: "json",success: function (data) {if (data) {var list = eval(data);var name = [];      //Line的数据需要object类型，所以创建name和value数组存放数据var value = [];     for (var i = 0; i < list.length; i++) {name.push(list[i].name);        value.push(list[i].value);}LineChart(name, value);     //调用封装好的Line    
                            }},error: function (msg) {alert("系统发生错误");}});//---------------------------------------------------------------------------
                    $content.show();}})$(".BarFigure").click(function () {var $content = $(this).parent().parent().next().children("div:nth-child(2)");if ($content.is(":visible")) {$(this).css({ "color": "#000", "border-color": "gray" });$content.html("");$content.hide();} else {$(this).css({ "color": "orange", "border-color": "orange" });$(this).siblings().css({ "color": "#000", "border-color": "gray" });$content.siblings().hide();var newElement = $('<div id="Bar" style="width:800px; height:450px;margin-top:30px;" ></div> ');$content.append(newElement);//-----------上下都是设置样式的可以无视掉，这里才是核心--------------------
                    $.ajax({url: "ashx/Echarts.ashx",data: { cmd: "bar" },cache: false,async: false,dataType: "json",success: function (data) {if (data) { var list = eval(data);var name = [];var value = [];for (var i = 0; i < list.length; i++) {name.push(list[i].name);value.push(list[i].value);}BarChart(name, value);          //调用封装好的BarChart
                            }},error: function (msg) {alert("系统发生错误");}});//---------------------------------------------------------------------------
                    $content.show();}})$(".PieFigure").click(function () {var $content = $(this).parent().parent().next().children("div:nth-child(3)");if ($content.is(":visible")) {$(this).css({ "color": "#000", "border-color": "gray" });$content.html("");$content.hide();} else {$(this).css({ "color": "orange", "border-color": "orange" });$(this).siblings().css({ "color": "#000", "border-color": "gray" });$content.siblings().hide();var newElement = $('<div id="Pie" style="width:800px; height:450px;margin-top:30px;" ></div> ');$content.append(newElement);//-----------上下都是设置样式的可以无视掉，这里才是核心--------------------
                    $.ajax({url: "ashx/Echarts.ashx",data: { cmd: "bar" },cache: false,async: false,dataType: "json",success: function (data) { if (data) { var list = eval(data); var name = [];var value = [];for (var i = 0; i < list.length; i++) { name.push(list[i].name);value.push(list[i].value);} PieChart(data, name);       // 圆形不同的是数据类型是这样的：{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'}
                            }},error: function (msg) {alert("系统发生错误");}});//---------------------------------------------------------------------------
                    $content.show();}})$(".RadarFigure").click(function (e) {var $content = $(this).parent().parent().next().children("div:nth-child(4)");if ($content.is(":visible")) {$(this).css({ "color": "#000", "border-color": "gray" });$content.html("");$content.hide();} else {$(this).css({ "color": "orange", "border-color": "orange" });$(this).siblings().css({ "color": "#000", "border-color": "gray" });$content.siblings().hide(); var newElement = $('<div id="Radar" style="width:800px; height:450px;margin-top:30px;" ></div> ');$content.append(newElement);//-----------上下都是设置样式的可以无视掉，这里才是核心--------------------
                    $.ajax({url: "ashx/Echarts.ashx",data: { cmd: "bar" },cache: false,async: false,dataType: "json",success: function (data) {if (data) {var list = eval(data);var name = [];var value = [];for (var i = 0; i < list.length; i++) {name.push(list[i].name);value.push(list[i].value);}RadarChart(name, value, data);          //调用封装好的RadarChart
                            }},error: function (msg) {alert("系统发生错误");}});//---------------------------------------------------------------------------
                    $content.show();}})})
View Code 
<script type="text/javascript">     //封装好的图表类，传入数据即可function LineChart(name, value) {var myChart = echarts.init(document.getElementById('Line'));// 指定图表的配置项和数据var option = {title: {text: '汽车销量统计',subtext: '纯属虚构',x: 'center'},tooltip: {},xAxis: {data: name          //恒坐标的值name
            },yAxis: {},series: [{name: '销量',type: 'line',data: value         //纵坐标的值value
            }]};// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);}function BarChart(name,value) {var myChart = echarts.init(document.getElementById('Bar'));// 指定图表的配置项和数据var option = {title: {text: '汽车销量统计',subtext: '纯属虚构',x: 'center'},tooltip: {}, xAxis: {data: name},yAxis: {},series: [{name: '销量',type: 'bar',data: value}]};// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option); }function PieChart(data,name) {var myChart = echarts.init(document.getElementById('Pie'));option = {title: {text: '汽车销量统计',subtext: '纯属虚构',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: name},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: data,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};myChart.setOption(option);}function RadarChart(name,value,data) { var myChart = echarts.init(document.getElementById('Radar'));option = {title: {text: '汽车销量统计(纯属虚构)',subtext: '纯属虚构',x: 'right',y: 'bottom'},tooltip: {trigger: 'item',backgroundColor: 'rgba(0,0,250,0.2)'},legend: {data: name},visualMap: {color: ['red', 'yellow']},radar: {indicator: (function () {var indicator = [];for (var i = 0; i < name.length; i++) {indicator.push({text: name[i],max: 4000       //限制最大数数值
                        })}return indicator;})() },series: (function () {var series = [];for (var i = 0; i < data.length; i++) {series.push({ type: 'radar',symbol: 'none',itemStyle: {normal: {lineStyle: {width: 1}},emphasis: {areaStyle: { color: 'rgba(0,250,0,0.3)' }}},data: [{value: value,name: name[i]}]  });}return series;})()};myChart.setOption(option);} 
</script>
View Code

到这里功能都能实现了，给大家展示一下我的成品，前端编写能力有些差，大伙凑合的看吧^_^。

 

 

 

本文到这里就完事儿了，当然哪里写的不好大神可以加以点评，欢迎拍砖扶正，共同进步^_^~

这篇关于.NET+Ajax+ashx 实现Echarts图表动态交互的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/763288。

相关文章

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
第10章 中断和动态时钟显示

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
动态规划---打家劫舍

动态规划---打家劫舍

题目： 你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组，计算你 不触动警报装置的情况下 ，一夜之内能够偷窃到的最高金额。 思路： 动态规划五部曲： 1.确定dp数组及含义 dp数组是一维数组，dp[i]代表
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
poj 1258 Agri-Net（最小生成树模板代码）

poj 1258 Agri-Net（最小生成树模板代码）

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码：效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2