在ASP.NET中从控制器中获取数据构建ECharts图表

本文主要是介绍在ASP.NET中从控制器中获取数据构建ECharts图表，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端显示：
HTML：

    <div id="AdminECharts1" style="width: 96%;height:400px;margin:auto">
    </div>

js包的引用：
技术获取链接：
链接：提取地址
提取码：mpxk

<script src="~/TemplateFile/ECharts/echarts.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>

js代码区域：

<script type="text/javascript">

    function loadTwoLine() {
        var myChart = echarts.init(document.getElementById('AdminECharts1'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '博文数量变化'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['博文']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: {
                type: 'category',
                boundaryGap: false, //取消左侧的间距
                data: []
            },
            yAxis: {
                type: 'value',
                splitLine: { show: false },//去除网格线
                name: ''
            },
            series: [{
                name: '博文',
                type: 'line',
                symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                data: []
            }]
        });
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var names = [];    //类别数组（实际用来盛放X轴坐标值）
        var series1 = [];
        $.ajax({
            url: "/Administrators/AdminIDateEc",
            type: "post",
            success: function (result) {
                console.log(result);
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result, function (index, item) {
                    names.push(item.DateTimeBlog);    //挨个取出类别并填入类别数组
                    series1.push(item.BlogNum);
                });
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        data: series1
                    }]
                });
            }
            ,
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    };
    loadTwoLine();
</script>

控制器端方法：

        //ECharts数据源1
        public JsonResult AdminIDateEc()
        {
            //声明博客集合
            List<BlogDates> blogdate = new List<BlogDates>();
            //添加
            var stateid1 = db.BlogState.FirstOrDefault(p => p.BlogSateName == "审核").BlogSateID;
            var stateid2 = db.BlogState.FirstOrDefault(p => p.BlogSateName == "通过").BlogSateID;
            //循环加入数据
            for (int i = 0; i < 7; i++)
            {
                BlogDates dates = new BlogDates();
                var time = DateTime.Parse(DateTime.Now.AddDays(-i).ToString("yyyy-MM-dd"));
                var nums = db.Blog.Where(p => p.ReleseaTime <=time&&p.BlogSateID == stateid1 || p.BlogSateID == stateid2).Count();
                dates.DateTimeBlog = time.ToString("yyyy-MM-dd");
                dates.BlogNum = nums;
                //添加进博客集合
                blogdate.Add(dates);
            }
            //转换为JSON数据
            return Json(blogdate, JsonRequestBehavior.AllowGet);
        }

效果图：

这篇关于在ASP.NET中从控制器中获取数据构建ECharts图表的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！