ASP.NET MVC+ ECharts+JSON+Oracle用JSON调用数据库的内容展示统计图

最新推荐文章于 2020-06-05 11:11:11 发布

爱未眠花未开

最新推荐文章于 2020-06-05 11:11:11 发布

阅读量941

点赞数

文章标签： ECharts ASP.NET MVC JSON传值

本文链接：https://blog.csdn.net/chunfenxiaotaohua/article/details/100923781

版权

ASP.NET MVC以JSON的方式调用数据库数据生成统计图

ASP.NET MVC 简介：

ASP.NET MVC 简介：

正如名称所言的那样，该技术的特色是：M：即是Model（模型）；V：即是Views（视图）；C：即是Controller（控制器）
模型：一组类，描述了要处理的数据以及修改和操作数据的业务规则；
视图：定义应用程序用户界面的显示方式。
控制器：一组类，用于处理来自用户、整个应用程序流以及特定用用程序逻辑的通信。
到目前为止，只知道View和Controller的用法，对于Model不太会用，但是最近领导让写一个把数据库的内容转换成统计，利用ECharts来实现。艰难的实现完成以后来做个笔记。

上代码吧，越说越乱。

首先是Controller部分：

using Microsoft.AspNetCore.Mvc;
using RoadFlow.Mapper;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.Serialization.Json;

namespace RoadFlow.Mvc.Controllers
{
    public class GetEchartsController : Controller
    {
        public ActionResult Charts()
        {
            return View();
        }
       
        public JsonResult GetCharts()
        {
            ArrayList xAxisData = new ArrayList();
            ArrayList yAxisData = new ArrayList();
            System.Data.DataTable dt = new System.Data.DataTable();
            var db = new DataContext();//已经连接完数据库
            var table = db.GetDataTable("select count(receivename) num ,receivename name from ****where status = 2 group by receivename ");//此处是sql语句
            for(int i=0;i<table.Rows.Count;i++)
            {
                xAxisData.Add(table.Rows[i].ItemArray[1]);//提取出我们要的部分存入到数组中
                yAxisData.Add(table.Rows[i].ItemArray[0]);
            }
            var result = new { name = xAxisData, num = yAxisData };//设计JSON格式
            return Json(result);//返回JSON数据
        }
    }
}

接着上View部分的数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    @*<script src="echarts.common.min.js"></script>*@
    <script src="~/RoadFlowResources/scripts/echarts.common.min.js"></script>
    <script src="~/RoadFlowResources/scripts/jquery-1.12.4.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts
            // 指定图表的配置项和数据
        alert("开始执行");
        $.ajax({
            type: "post",
            async: true,
            url: "GetCharts",//一般写出相对路径的
            dataType: "json",
            success: function (result) {
                var objsx = [];
                var objsy = [];
                for (var i = 0; i < result.num.length; i++) {
                    objsy[i] = JSON.parse(result.num[i]);//以特定的JSON的格式接收数字；
                for (var i = 0; i < result.name.length; i++){
                    objsx[i] = JSON.stringify(result.name[i]);//以JSON的方式接收字符串
                }
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    title: {
                        text: '自己设计标题'
                    },
                    tooltip: {},
                    legend: {
                        data: ['给个柱的含义']
                    },
                    xAxis: {
                        data: objsx
                    },
                    yAxis: {},
                    series: [{
                        name: 'y轴的名称',
                        type: 'bar',
                        data: objsy
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!");
                myChart.hideLoading();
            }
        });
    </script>
</body>
</html>

至此完成！！！
最最重要的：
1.设计输出部分的数据，如果不止一个返回值（正常都不止一组返回值），所以一定要以一种可以被处理的可以被接收的方式转换成JSON数据返回。
2.接收数据时一定要区分开，不然会报错，而且不好找哪里犯错了（本人是吃过亏的）。
3.URL的路径一定要写对，这是视图的相对路径，只要能找到该controller下对应的视图的路径即可。
执行结果如下(丑是丑了点，但是也算是从一个小白凑活出了一些东西)：
在这里插入图片描述

爱未眠花未开

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
ASP.NET MVC+ ECharts+JSON+Oracle用JSON调用数据库的内容展示统计图

ASP.NET MVC以JSON的方式调用数据库数据生成统计图 ASP.NET MVC 简介：上代码吧，越说越乱。ASP.NET MVC 简介：正如名称所言的那样，该技术的特色是：M：即是Model（模型）；V：即是Views（视图）；C：即是Controller（控制器）模型：一组类，描述了要处理的数据以及修改和操作数据的业务规则；视图：定义应用程序用户界面的显示方式。控制器：一组...
复制链接

扫一扫