回到顶部

MVC实现EChatrs动态折线图

时间:3年前   作者:个人天使   浏览:566   [站内原创,转载请注明出处]

标签: ECharts   ASP.NET  

namespace Echarts数据搭配.Controllers
{
    public class HomeController : Controller
    {
        Random r = new Random();
        int index = 0;
        #region 静态带面积折线图
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetJson()
        {
            int[] data1 = { 120, 132, 101, 134, 90, 230, 210 };
            int[] data2 = { 20, 232, 11, 144, 90, 30, 90 };
            int[] data3 = { 180, 12, 161, 84, 60, 230, 10 };
            var id1 = new { name = "测试数据1", data = data1, };
            var id2 = new { name = "测试数据2", data = data2, };
            var id3 = new { name = "测试数据3", data = data3, };
            List<object> data = new List<object>();
            data.Add(id1);
            data.Add(id2);
            data.Add(id3);
            string[] xcontent = { "a", "b", "c", "d", "e", "f", "g" };
            var tld = new
            {
                xcontent = xcontent,
                data = data
            };
            return Json(tld);
        }
        #endregion
        #region 动态折线图 多条
        public ActionResult NextLine()
        {



            return View();
        }
        public ActionResult GetNextLineJson()
        {

            List<Record> records = new List<Controllers.Record>();
            for (int i = 0; i < 200; i++)
            {
                records.Add(new Record(i, r));
            }

            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(List<Record>));
            MemoryStream stream = new MemoryStream();
            serializer.WriteObject(stream, records);
            byte[] dataBytes = new byte[stream.Length];
            stream.Position = 0;
            stream.Read(dataBytes, 0, (int)stream.Length);
            string jsonstring = Encoding.UTF8.GetString(dataBytes);
            return Content(jsonstring);
        }
        public ActionResult GetNetxtLineAjax()
        {
            index++;
            var records = new Record(index, r);
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Record));
            MemoryStream stream = new MemoryStream();
            serializer.WriteObject(stream, records);
            byte[] dataBytes = new byte[stream.Length];
            stream.Position = 0;
            stream.Read(dataBytes, 0, (int)stream.Length);
            string jsonstring = Encoding.UTF8.GetString(dataBytes);

            return Content(jsonstring);
        }
        #endregion
        #region 动态折线图 一条
        public ActionResult NetTowLine()
        {
            return View();
        }
        #endregion
    }
    [Serializable]
    public class Record
    {

        private string taizhan_num;    //台站名
        private String tem;            //温度
        private String hum;            //湿度
        private String pa;            //压强
        private String rain;        //雨量
        private String win_dir;        //风向
        private String win_sp;        //风速
        private String dateStr;        //观测日期(用于Echarts显示格式)
        private DateTime date;        //观测日期(原始格式)

        public Record(int i, Random r)
        {
            this.taizhan_num = "台站名" + i;
            date = DateTime.Now;
            tem = (r.Next(0, 100)).ToString();
            hum = (r.Next(0, 100)).ToString();
            pa = (r.Next(0, 1000)).ToString();
            rain = "0.0";
            win_dir = (r.Next(0, 100)).ToString();
            win_sp = (r.NextDouble() * 20).ToString();
            dateStr = date.ToString();



        }
        /// <summary>
        /// @return 观测日期值
        /// </summary>
        /// <returns></returns>
        public String getDateStr()
        {
            return dateStr;
        }
        /// <summary>
        /// 设置观测日期(用于echarts图表展示
        /// </summary>
        /// <param name="dateStr">待设置观测日期值</param>
        public void setDateStr(String dateStr)
        {
            this.dateStr = dateStr;
        }
        /// <summary>
        /// 获取产生该观测记录的台站名称;       
        /// </summary>
        /// <returns>台站名称</returns>
        public string getTaizhan_num()
        {
            return taizhan_num;
        }

        /// <summary>
        /// 设置产生该观测记录的台站名称;
        /// </summary>
        /// <param name="taizhan_num">待设置台站名称</param>
        public void setTaizhan_num(String taizhan_num)
        {
            this.taizhan_num = taizhan_num;
        }

        /// <summary>
        /// 获取温度;
        /// </summary>
        /// <returns>温度值</returns>
        public String getTem()
        {
            return tem;
        }

        /// <summary>
        /// 设置温度;
        /// </summary>
        /// <param name="tem">待设置温度值</param>
        public void setTem(String tem)
        {
            this.tem = tem;
        }

        /// <summary>
        /// 获取湿度;
        ///</summary>
        /// <returns>湿度值</returns>
        public String getHum()
        {
            return hum;
        }

        /// <summary>
        /// 设置湿度;
        /// </summary>
        /// <param name="hum">待设置湿度值</param>
        public void setHum(String hum)
        {
            this.hum = hum;
        }

        /// <summary>
        /// 获取压强;
        /// </summary>
        /// <returns>压强值</returns>
        public String getPa()
        {
            return pa;
        }

        /// <summary>
        /// 设置压强;
        /// </summary>
        /// <param name="pa">待设置压强值</param>
        public void setPa(String pa)
        {
            this.pa = pa;
        }

        /// <summary>
        ///  获取雨量;
        /// </summary>
        /// <returns>雨量值</returns>
        public String getRain()
        {
            return rain;
        }

        /// <summary>
        /// 设置雨量;
        /// </summary>
        /// <param name="rain">待设置雨量值</param>
        public void setRain(String rain)
        {
            this.rain = rain;
        }

        /// <summary>
        /// 获取风向;
        /// </summary>
        /// <returns>风向值</returns>
        public String getWin_dir()
        {
            return win_dir;
        }

        /// <summary>
        /// 设置风向;
        /// </summary>
        /// <param name="win_dir">待设置风向值</param>
        public void setWin_dir(String win_dir)
        {
            this.win_dir = win_dir;
        }

        /// <summary>
        /// 获取风速;
        /// </summary>
        /// <returns>风速值</returns>
        public String getWin_sp()
        {
            return win_sp;
        }

        /// <summary>
        /// 设置风向;
        /// </summary>
        /// <param name="win_sp">待设置风向值</param>
        public void setWin_sp(String win_sp)
        {
            this.win_sp = win_sp;
        }

        /// <summary>
        /// 获取观测日期;
        /// </summary>
        /// <returns>观测日期</returns>
        public DateTime getDate()
        {
            return date;
        }

        /// <summary>
        /// 设置观测日期; 
        /// </summary>
        /// <param name="date">观测日期值</param>
        public void setDate(DateTime date)
        {
            this.date = date;
        }


    }



效果图展示:

图一:

图二:

图三:






个人天使最后编辑于:2年前

内容均为作者独立观点,不代表八零IT人立场,如涉及侵权,请及时告知。

评论努力加载中...
暂无评论
暂无评论

手机扫码阅读

热门相关

加载中...
关于我们   联系我们   申请友链   赞助记录   站点地图
© 2014 - 2017 www.80iter.com All Rights Reserved. 京ICP备14042174号-1
本站遵循 CC BY 4.0 协议,转载请注明出处 。