ASP.NET中|ASP.NET中 Echarts动态显示及简单插入多个图表 ASP.NET中Echarts动态显示及简单插

创建项目

文件 -> 新建 -> 项目 -> ASP.NET Web应用程序(EchartsDemo) -> 选择模板（Empty) -> 确定
在项目上右击 -> 添加 -> 新建项 -> OWIN Startup 类(Startup.cs)
在项目上右击 -> 添加 -> web窗体(Default.aspx)
在项目上右击 -> 添加 -> web窗体(Default.aspx)
引用->添加引用(Newtonsoft .Json.dll)
using Newtonsoft.Json.Linq;

【ASP.NET中|ASP.NET中 Echarts动态显示及简单插入多个图表】编写JS脚本
采用Ajax进行定时刷新
采用JS for循环遍历Json

> $( function () { fetchData(); window.setInterval(fetchData, 2000); } ); function fetchData() { $.ajax({ type: 'GET', url: '/GetFileHandler.ashx', dataType: 'json', success: function (option) { for (var key in option) { var myChart = echarts.init(document.getElementById(key)); myChart.setOption(option[key]); console.log(key + " " + option[key]); //遍历json对象的每个key/value对,p为key } console.log(result); }, error: function(result) { console.log(result.responseText); } }); }

ASP.NET后台程序编写
拼接JSON 封装成函数

public JObject LineCharts(object[] date, object[] value) { return new JObject( new JProperty( "xAxis", new JObject( new JProperty("type", "category"), new JProperty("data", new JArray(date)))), new JProperty( "yAxis", new JObject( new JProperty("type", "value"), new JProperty("splitLine", new JObject( new JProperty("show", false))) )), new JProperty("series", new JArray( new object[] { new JObject(new JProperty("data", new JArray(value)), new JProperty("type", "line"), new JProperty("symbol", "triangle"), new JProperty("symbolSize", 20), new JProperty("lineStyle", new JObject(new JProperty("color", "#3FBBA7"), new JProperty("width", 4), new JProperty("type", "dashed"))), new JProperty("itemStyle", new JObject( new JProperty("borderWidth", 2), new JProperty("borderColor", "#34F2D3"), new JProperty("color", "#1F5F55")) )), } )) );

封装多个图表函数拼接成JSON 调用
将拼接的Json发送

public void ProcessRequest(HttpContext context) { Random r = new Random(); object[] date = { "03/16"........ }; //var value = https://www.it610.com/article/new[] { 820, 932, 901, 934, 1290, 1330, 1320 }; object[] value = { r.Next(0, 1000)........ }; object[] date1 = {"03/16",...... }; object[] value1 = { r.Next(0, 1000),....... }; var option = new JObject( new JProperty("LineCharts", LineCharts(date, value)), new JProperty("PieCharts", PieCharts(date1, value1)) ); Console.WriteLine(option.ToString()); context.Response.ContentType = "text/plain"; //将拼接的Json发送 context.Response.Write(option.ToString()); }

效果
可以在body里添加HTML及调用CSS 添加ECharts绘制自己想要的效果用以上方式实现多个图表并且调用其数据