MVC實現EChatrs動態折線圖

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;
        }


    }

效果圖展示：

圖一：

圖二：

圖三：

由個人天使最後編輯於：3年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。