cs html echart 刷新

 

 

 

@{
    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',
                                width: 8,//这里是为了突出显示加上的
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '摄氏度',
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#fff',
                                width: '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',
                                width: '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;
        }
    }
}

  

 

posted @ 2020-09-15 12:58  2eggs  Views(152)  Comments(0Edit  收藏  举报