ECharts 从后台动态获取数据 （asp.net）
(一) 使用工具 visual studio 2017；Web开发：asp.net
（代码中的js引用路径以及ajax方法调用的url，记得修改哦）
(二) 准备工作（此处写给和我一样小白）
1.动态从后台获取数据，需使用Ajax获取后台Json，为此我们需要做一些准备工作，安装两个包（在vs的NuGet包管理）
一个json的包，一个mvc的包。
2.添加必要的js。
ECharts和jQuery均可在各自官网下载到。Echarts依赖zrender，但好像项目中是否引用并不影响。原谅我对Echarts还只是初识，理解不够深刻。
(三) 开始吧~
然后现在开始我们的小练习。
先准备一个Series类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; /// <summary>
/// Series 的摘要说明
/// </summary>
public class Series
{
public string name;
public string type;
public int yAxisIndex;
public List<double> data;
}
Series
然后我们添加一个web服务
是的，就是这个~ 我给的名字叫 wsComm
（VS很智能的告诉我要取消如下注释，然而我一开始仍然没有看到，瞎了大概）
然后我们需要在这里面写一个webmethod，以便在前台进行数据获取（关于webmethod的问题，这里不做详述）。
/// <summary>
/// wsComm 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class wsComm : System.Web.Services.WebService
{ /// <summary>
/// ECharts图表数据获取
/// </summary>
/// <returns></returns>
[WebMethod]
public JsonResult getdataechart()
{
//考虑到图表的category是字符串数组 这里定义一个string的List
List<string> categoryList = new List<string>();
//考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
List<string> legendList = new List<string>();
//考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
List<Series> seriesList = new List<Series>();
//设置legend数组
legendList.Add("月支出金额"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("月工作量"); //这里的名称必须和series的每一组series的name保持一致
//填写第一个Series
//定义一个Series对象
Series seriesObj = new Series();
seriesObj.name = "月支出金额";
seriesObj.type = "line"; //线性图呈现
seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错 //模拟两组数据，都放在二组数组中。该数据你可以从数据库中获取，关于如何从后台数据库进行读取，本文不再详述。
string[,] MonthCost = new string[,] { { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" } };
string[,] ProjectVal = new string[,] { { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" }, { "", "" } };
//设置数据
for (int i = ; i < ; i++)
{
//加入category刻度数组
categoryList.Add(MonthCost[i, ]);
//加入数据值series序列数组 这里提供为了效果只提供一组series数据好了
seriesObj.data.Add(Convert.ToDouble(MonthCost[i, ])); //数据依次递增
}
seriesList.Add(seriesObj);
//填写第二个Series
seriesObj = new Series();
seriesObj.name = "月工作量";
seriesObj.type = "bar"; //线性图呈现
seriesObj.yAxisIndex = ;
seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错
//设置数据
for (int i = ; i < ; i++)
{
seriesObj.data.Add(Convert.ToDouble(ProjectVal[i, ])); //数据依次递增
}
seriesList.Add(seriesObj);
//最后调用相关函数将List转换为Json
//因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象
JsonResult json = new JsonResult();
var newObj = new
{
category = categoryList,
series = seriesList,
legend = legendList
};
json.Data = JsonConvert.SerializeObject(newObj);
return json;
}
}
wsComm
前台：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/jscript" src="../JS/jquery-3.3.1.js"></script>
<script type="text/jscript" src="../JS/echarts.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="main" style="height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
//定义图表options
var options = {
title: {
text: "测试报表1",
},
//右侧工具栏
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
calculable: true,
xAxis: [
{
type: 'category',
name: '月份',
data: []
}
],
yAxis: [
{
type: 'value',
name: '金额',
axisLabel: {
formatter: '{value} Y'
},
splitArea: { show: true }
},
{
type: 'value',
name: '工作量',
axisLabel: {
formatter: '{value} M3'
},
splitArea: { show: true }
}
],
series: []
};
//通过Ajax获取数据
$.ajax({
type: "POST",
async: false,
contentType: 'application/json; charset=utf-8',
url: "../wsComm.asmx/getdataechart",
dataType: "json", //返回数据形式为json
success: function (result) {
var obj = JSON.parse(result.d.Data); //一定要注意大小写，本语句中，一直把Data写成data，总是取不出数据，耽误了半天
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.yAxis[].data = obj.value;
options.xAxis[].data = obj.category;
options.series= obj.series;
options.legend.data = obj.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
</script>
</form>
</body>
</html>
html
嗯，然后就完成了。
参考原文：https://blog.csdn.net/guoxy_nb/article/details/78943185
ECharts 从后台动态获取数据 （asp.net）的更多相关文章
- echarts通过ajax动态获取数据的方法
echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...
- echarts中跨域动态获取数据时，当某些对应的数据为空时，鼠标滑动到所在位置卡死
才疏学浅,万望指点. formatter: function (params) { var rel = params[0].name + "<br />"; rel + ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说). 柱状图的动态传值: //获取后台数据 va ...
- fullCalendar动态获取数据
fullCalendar http://fullcalendar.io/docs/event_data/events_function $('#calendar').fullCalendar({ he ...
- ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】
具体实现的效果如图:
- thymeleaf下拉框从后台动态获取集合数据并回显选中
今天遇到从后台集合中取出对象在前台页面下拉列表展示: <select name="signature" lay-search="" class=" ...
- asp.net mvc Areas 母版页动态获取数据进行渲染
经常需要将一些通用的页面元素抽离出来制作成母版页,但是这里的元素一般都是些基本元素,即不需要 进行后台数据交换的基本数据,但是对于一些需要通过后台查询的数据,我们应该怎么传递给前台的母版页呢 这里描述 ...
- Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决
前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...
随机推荐
- Python语言:Day11练习题
24.实现一个整数加法计算器:如:content=input('请输入内容:')#如:5+9或5+ 9或5 + 9 content = input("请输入需要计算的:") #如: ...
- SpringBoot 2.0 pom.xml 配置（热启动）
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...
- ubuntu16.04 登陆不进桌面
ubuntu 16.04 登陆不进桌面 问题描述: 系统软件升级之后,重启,在登陆界面输入密码后,回车,闪现一次黑屏和一些代码,然后又重新回到登陆界面. 原因分析: 有两种可能: 1.主目录下的.Xa ...
- 单链表数据结构 - java简单实现
链表中最简单的一种是单向链表,每个元素包含两个域,值域和指针域,我们把这样的元素称之为节点.每个节点的指针域内有一个指针,指向下一个节点,而最后一个节点则指向一个空值.如图就是一个单向链表 一个单向链 ...
- Android四大组件之Service --- 活动与服务的绑定
Acticity与Service进行通信如何在活动中指挥service去做事情? 这里就借助onBind()方法了比如说,目前我们希望在MyService里提供一个下载功能,然后在活动中可以决定何时开 ...
- python ---split()函数讲解
python ---split()函数讲解 split中文翻译为分裂. 在python用于分割字符串使用. split()就是将一个字符串分裂成多个字符串组成的列表. split()可以传入参数,也可 ...
- Python元组的一点用法
#python的基本语法网上已经有很多详细的解释了,写在这里方便自己记忆一些 元组可以理解为不可变动的列表,访问元组中元素的方式和列表相同,但是需要注意的是元组中的元素是不可修改(增删)的 1.列表的 ...
- js实现图片局部放大效果
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...
- `TypeError: torch.mm received an invalid combination of arguments - got (torch.FloatTensor, Variable),
`TypeError: torch.mm received an invalid combination of arguments - got (torch.FloatTensor, Variable ...
- 2016/12/22 dplの课练
1.sort -nk 1 -t - 3 2.sort -nk 1 -t - 2 3.sort -nk 2 -t - 1 3./etc/passwd根据用户id的大小排序,从小到大的排序输出 sort ...