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

创建项目

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

编写JS脚本
采用Ajax进行定时刷新
采用JS for循环遍历Json

  <script>
        $(
            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);
                }
            });
        }
    </script>

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 = 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绘制自己想要的效果 用以上方式 实现多个图表并且调用其数据

 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <link href="./index.css" rel="stylesheet">