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

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部分的数据:


<html>
<head>
    <meta charset="utf-8">
    <title>EChartstitle>
    
    @*<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>
    
    <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下对应的视图的路径即可。
执行结果如下(丑是丑了点,但是也算是从一个小白凑活出了一些东西):
ASP.NET MVC+ ECharts+JSON+Oracle用JSON调用数据库的内容展示统计图_第1张图片

你可能感兴趣的:(ASP.NET MVC+ ECharts+JSON+Oracle用JSON调用数据库的内容展示统计图)