@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="2000">
<meta name="viewport" content="width=device-width" />
<title>传感器状态及数据</title>
<!-- <link href="~/Content/bootstrap.css" rel="stylesheet" />-->
<script src="~/Scripts/vue.js"></script>
<!--<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>-->
<!--<script src="~/Scripts/lib/echarts-all-3.js"></script>-->
<script src="~/Scripts/lib/echarts.js"></script>
<!-- <script src="~/Scripts/lib/echarts.all.js"></script>-->
<!--<script src="~/Scripts/axios.js"></script>-->
<script src="~/Scripts/js/jquery.min.js"></script>
<script src="~/Scripts/js/bootstrap.min.js"></script>
<link href="~/Scripts/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/css/index.css" rel="stylesheet" />
<style type="text/css">
table {
margin: 10px auto auto 10px;
}
</style>
</head>
<body>
<header>实时状态</header>
<div class="container m-20">
<form id="loginForm">
<button type="button" name="login" id="login">登陆</button>
</form>
<form action="Contact/turnPage" method="post">
用户名: <input type="text" name="fname" /></br>
密码: <input type="text" name="lname" /></br>
提交<input type="submit" value="Submit" />
<div>
<!--利用HtmlHelper创建TextBox时，使用名称与ViewData中的Key一致， 就会自动实现值绑定-->
@Html.TextBox("name")
@ViewData["name"]
@ViewData["message"]
</div>
</form>
<div id="main" style="height: 500px;"></div>
<div id="sample1" style="height: 300px;"></div>
<div id="client" style="height: 500px;"></div>
<script>
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 }
}
},
dataZoom: [{
startValue: '2018-10-04'
}, {
type: 'inside'
}],
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
calculable: true,
xAxis: [
{
type: 'category',
name: '时间',
data: [],
//设置轴线的属性
axisLine: {
lineStyle: {
color: '#FF0000',
8,//这里是为了突出显示加上的
}
}
}
],
yAxis: [
{
type: 'value',
name: '摄氏度',
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',
'2'
}
}, axisLabel: {
// formatter: '{value} M3'
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'red',
fontSize: 16
}
}
}
},
// axisLabel: {
// formatter: '{value} Y'
// },
splitArea: { show: true }
},
{
type: 'value',
name: '状态',
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',
'2'
}
},
axisLabel: {
// formatter: '{value} M3'
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'red',
fontSize: 16
}
}
}
},
splitArea: { show: true }
}
],
visualMap: {
top: 10,
right: 10,
pieces: [{
gt: 0,
lte: 30,
color: '#096'
}, {
gt: 30,
lte: 50,
color: '#ffde33'
}, {
gt: 50,
lte: 70,
color: '#ff9933'
}, {
gt: 70,
lte: 80,
color: '#cc0033'
}, {
gt: 80,
lte: 90,
color: '#660099'
}, {
gt: 100,
color: '#7e0023'
}],
outOfRange: {
color: '#999'
}
},
series: []
};
function echartRefresh() {
//通过Ajax获取数据
$.ajax({
type: "POST",
async: false,
contentType: 'application/json; charset=utf-8',
url: "Contact/SensorData",
// dataType: "json",
// type: "post",
dataType: "json", //返回数据形式为json
success: function (result) {
var obj = JSON.parse(result); //一定要注意大小写，本语句中，一直把Data写成data，总是取不出数据，耽误了半天
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.yAxis[0].data = obj.value;
options.xAxis[0].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);
}
});
setTimeout("echartRefresh()", 6000);
}
window.onload = echartRefresh;
</script>
</div>
</body>
</html>
using Aspose.Cells.Charts;
using FirstVue.BLL.Web.SystemSetting;
using FirstVue.Models;
using FirstVue.Repository;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace FirstVue.Controllers
{
class Series
{
/// series序列组名称
public string name
{
get;
set;
}
/// series序列组呈现图表类型
public string type
{
get;
set;
}
/// series序列组呈现对应的Y轴刻度
public int yAxisIndex
{
get;
set;
}
/// series序列组的数据为数据类型数组
public List<double> data
{
get;
set;
}
}
public class ContactController : Controller
{
private static ContactRepository contactRepository = new ContactRepository();
private SenSorDataService sensorService = new SenSorDataService();
public ActionResult Index()
{
return View();
}
public ActionResult turnPage()
{
ViewData["name"] = Request.Form["fname"];
ViewData["message"] = Request.Form["lname"];
return View("turnPage");
}
[HttpGet]
public JsonResult Get()
{
return Json(contactRepository.Get(), JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult Add(Contact contact)
{
contactRepository.Put(contact);
return Json(contactRepository.Get());
}
[HttpPost]
public JsonResult Update(Contact contact)
{
contactRepository.Post(contact);
return Json(contactRepository.Get());
}
[HttpPost]
public JsonResult Delete(string id)
{
var contact = contactRepository.Get(id);
contactRepository.Delete(id);
return Json(contactRepository.Get());
}
[HttpPost]
public JsonResult SensorData(SensroData sensordata)
{
////考虑到图表的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>();
//// contactRepository.Put(contact);
//object data = sensorService.SearchHPEmployeeYN(sensordata.id);
////return Json(data);
//JsonSerializerSettings setting = new JsonSerializerSettings()
//{
// ReferenceLoopHandling = ReferenceLoopHandling.Ignore
//};
//var ret = JsonConvert.SerializeObject(data, setting);
//return Json(ret, JsonRequestBehavior.AllowGet);
//考虑到图表的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[,] { { "201701", "10110020" }, { "201702", "2000000" }, { "201703", "3500000" }, { "201704", "4590876" }, { "201705", "5809833" }, { "201706", "5309902" }, { "201707", "7388332" }, { "201708", "2000000" }, { "201709", "19879802" }, { "2017010", "2378945" } };
//string[,] ProjectVal = new string[,] { { "201701", "3000" }, { "201702", "7500" }, { "201703", "9500" }, { "201704", "10000" }, { "201705", "12000" }, { "201706", "10050" }, { "201707", "30050" }, { "201708", "7893" }, { "201709", "7312" }, { "2017010", "8905" } };
DataTable linedata = sensorService.SearchSensorDataByIDDate("");
Random rdata = new Random();
Double randnow = rdata.Next(100);
//设置数据
for (int i = 0; i < linedata.Rows.Count; i++)
{
//加入category刻度数组
// categoryList.Add(MonthCost[i, 0]);
//加入数据值series序列数组 这里提供为了效果只提供一组series数据好了
// seriesObj.data.Add(Convert.ToDouble(MonthCost[i, 1])); //数据依次递增
//加入category刻度数组
categoryList.Add(linedata.Rows[linedata.Rows.Count - 1 - i]["DDATETIME"].ToString().Trim());
//加入数据值series序列数组 这里提供为了效果只提供一组series数据好了
seriesObj.data.Add(randnow + Convert.ToDouble(linedata.Rows[linedata.Rows.Count - 1 - i]["T"].ToString().Trim())); //数据依次递增
}
seriesList.Add(seriesObj);
//填写第二个Series
seriesObj = new Series();
seriesObj.name = "温控状态";
seriesObj.type = "bar"; //线性图呈现
seriesObj.yAxisIndex = 1;
seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错
//设置数据
for (int i = 0; i < linedata.Rows.Count; i++)
{
Double nowd = 0;
if (randnow + Convert.ToDouble(linedata.Rows[linedata.Rows.Count - 1 - i]["T"].ToString().Trim()) > 100)
{
nowd = 100;
}
else
{
nowd = 0;
}
// seriesObj.data.Add(Convert.ToDouble(ProjectVal[i, 1])); //数据依次递增
seriesObj.data.Add(nowd); //数据依次递增
}
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;
}
}
}