.NET C# + ECharts 初学笔记后台加载统计图表数据 - 简单示例

最新推荐文章于 2023-06-25 10:56:52 发布

笑歪了狗头

最新推荐文章于 2023-06-25 10:56:52 发布

阅读量4.3k

点赞数 3

分类专栏：原创文章标签： ECharts 统计图图表

本文链接：https://blog.csdn.net/qq_18816201/article/details/100656662

版权

原创专栏收录该内容

9 篇文章 1 订阅

订阅专栏

上面是全部源码下载地址↑↑↑↑↑↑↑↑↑↑↑

ECharts官方下载地址：https://www.echartsjs.com/zh/download.html

我用的是当时最新的 4.2.1

一共就4个js文件 -

前端页面↓

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!-- 引入 echarts.js -->
    <script src="../../peizhi/echartsjs/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:900px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var options = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: [] //'销量'
            },
            xAxis: {
                data: [] //"衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"
            },
            yAxis: {},
            series: []
            /*
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 20]
            }
            */
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(options);

        //ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件
        // 处理点击事件并且跳转到相应的百度搜索页面
        myChart.on('click', function (params) {
            window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        });

        
        //通过Ajax获取数据
        $.ajax({
            type: "POST",
            async: false, 
            url: "ZFB_char.aspx?action=LoadChart",
            dataType: "json",
            beforeSend: function () {
                myChart.showLoading(); //显示加载动画效果
            },
            success: function (obj) {
                console.log(obj);
                
                if (obj) {
                    options.xAxis.data = obj.xList; //给X轴数据
                    options.series = obj.series;  //给series数据
                    options.legend.data = obj.legend; //给legend数据
                    myChart.hideLoading(); //隐藏动画加载效果
                    myChart.setOption(options);  //设置图表实例的配置项以及数据
                }
            },                    
            error: function (XMLHttpRequest, textStatus, errorThrown) 
            {                       
                alert(XMLHttpRequest.responseText);
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus); 
            }
        });            
    </script>
</body>
</html>

创建Series类

/// <summary>
/// 图表Series参数 
/// </summary>
public class Series
{
    /// series序列组名称
    public string name
    {
        get;
        set;
    }
    /// series序列组呈现图表类型
    public string type
    {
        get;
        set;
    }
    /// series序列组呈现对应的Y轴刻度
    public int yAxisIndex
    {
        get;
        set;
    }
    /// series序列组的数据为数据类型数组
    public List<int> data
    {
        get;
        set;
    }
}

C#后台代码↓

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

public partial class admin_Chart_ZFB_char : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string action = Request["action"];
        switch (action)
        {
            case "LoadChart"://查询数据 
                LoadChart();
                break;
            
            default:
                break;
        }
    }

    private void LoadChart()
    {
        //legend集合
        List<string> legendList = new List<string>();
        legendList.Add("销量");
        //X轴集合
        List<string> xList = new List<string>();//"衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"
        xList.Add("衬衫"); xList.Add("羊毛衫"); xList.Add("雪纺衫"); xList.Add("裤子"); xList.Add("高跟鞋");
        //series集合
        List<Series> seriesList = new List<Series>();
        //定义一个Series对象
        Series seriesObj = new Series();
        //seriesObj.id = 1;
        seriesObj.name = "销量";
        seriesObj.type = "bar"; //柱形
        seriesObj.data = new List<int>(); //先初始化 不初始化后面直直接data.Add(x)会报错   
        int[] sz = new int[] { 5, 20, 36, 10, 20 };
        for (int i = 0; i < sz.Length; i++)
        {
            seriesObj.data.Add(sz[i]);
        }
        seriesList.Add(seriesObj);

        var newObj = new
        {
            xList = xList, //X轴集合
            series = seriesList, //series集合
            legend = legendList //legend集合
        };
        String json = JSON.Encode(newObj);
        Response.Write(json);
    }
    


}