C#ASP.NET使用Echarts制作统计图

卓越项目需要所以想要用ASP绘制统计图，但是从来没有接触过echarts和ajax,于是在哔哩哔哩上看了一些简短的课程大致了解了一下echarts和ajax.

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="lib/echarts.js"></script>
    <script src="lib/new_file.js"></script>
</head>
<body>
    <form id="form1" runat="server">
      <div id="myecharts" style="height: 600px;width: 600px;">
            
        </div>
    </form>
</body>
    <script>
        //讲echarts图表放入到指定的容器中
        var myChart = echarts.init(document.querySelector("#myecharts"));
        var option;
        
        option = {
            //图表标题
            title: {
                text: '浅尝Echarts'
            },
            tooltip: {},
            legend: {
                data: []
            },
            //x轴的值
            xAxis: {
                data: []
            },
            //Y轴的值,一般不用设置，会自动适配生成
            yAxis: {},
            series: [
                //{
                //    name: '销售量', 
                //    type: 'bar', 统计图的类型
                //    data: [5, 20, 36, 10, 10, 20] 各项的值
                //}
            ]
        };
        $.ajax({
            type: "POST", //获取数据的方式
            async: false, //是否异步，默认为true
            url: "WebForm1.aspx?action=LoadChart", //数据来源
            dataType: "json", //获取数据的类型
            success: function (obj){ //获取成功执行的事件
                console.log(obj);
                if (obj) {
                    option.xAxis.data = obj.xlist;
                    option.series = obj.series;
                    option.legend.data = obj.legend;
                    myChart.setOption(option);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) { //获取失败执行的事件
                alert(XMLHttpRequest.responseText);
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    </script>
</html>

后台代码：

创建一个类，用来存储option对象中的series的值

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication2
{
    public class Class1
    {
        public string name { get; set; }
        public string type { get; set; }
        public int yAxisIndex { get; set; }
        public List<int> data { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;

namespace WebApplication2
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string action = Request["action"];
            switch (action)
            {
                case "LoadChart":
                    LoadChart();
                    break;
                default:
                    break;
            }
        }
        private void LoadChart()
        {
            //创建lengend集合
            List<string> legendlist = new List<string>();
            legendlist.Add("销量");
            //创建X轴集合
            List<string> axixAxislist = new List<string>();
            axixAxislist.Add("水果");
            axixAxislist.Add("电器");
            axixAxislist.Add("生鲜");
            axixAxislist.Add("副食");
            axixAxislist.Add("烟酒");
            axixAxislist.Add("生活用品");
            //创建series集合
            List<Class1> serieslist = new List<Class1>();
            Class1 seriesobj = new Class1();
            seriesobj.name = "销量";
            seriesobj.type = "bar";
            seriesobj.data = new List<int>();
            int[] sz = new int[] { 20,50,90,120,150,190};
            for(int i = 0; i < sz.Length; i++)
            {
                seriesobj.data.Add(sz[i]);
            }
            serieslist.Add(seriesobj);
            var newobj = new
            {
                xlist = axixAxislist,
                lenged = legendlist,
                series=serieslist
            };
            //将数据转化为json格式
            string json = JsonConvert.SerializeObject(newobj);
            Response.Write(json);
            Response.Flush();
            Response.Close();
           
        }
    }
}

注意：要记得引用Newtonsoft.Json，并在项目中写上using Newtonsoft.Json;

效果图如下：

C#ASP.NET使用Echarts制作统计图

猜你喜欢