ASP.NET+Echarts绘制图表

ASP.NET Web/MVC+Echarts 专栏收录该内容
2 篇文章 0 订阅

本文介绍了在ASP.NET中使用ECharts的详细过程,希望对使用该方法的朋友有所帮助。

相关的js文件下载:https://pan.baidu.com/s/1y9AIdlzhMzXINlRGjp3BAQ,文件包含:[jquery-3.4.1.min.js、echarts-wordcloud.min.js、echarts.min.js、china.js]
相关Echarts的js文件包
提取码:tfr3

一、首先去百度搜索Echarts去下载需要的图表实例

Echarts图表实例下载。其中可以自定义下载,也可以下载全部,根据个人需求进行实例的下载即可!

二、创建好DAL层和BLL层

需要显示的数据信息利用DAL层以及BLL层写好!例如 DAL层

         /// <summary>
        /// 查询Project表,显示后台图表需要显示的数据
        /// </summary>
        /// <returns></returns>
        public static DataTable SelectProjectTubiao()
        {
            string sql = @"select ProjectTypes,sum(AllMoney) AllMoney,sum(ToFinance) ToFinance from Project group by Project.ProjectTypes";
            DataTable dt = DBHelper.GetDataSet(sql);
            return dt;
        }

BLL层:

         /// <summary>
        /// 查询Project表,显示后台图表需要显示的数据
        /// </summary>
        /// <returns></returns>
        public static DataTable SelectProjectTubiao()
        {
            return DAL.ProjectDAL.SelectProjectTubiao();
        }

三、在js文件夹中新建一个js文件(该js文件写绘制图表的js代码)

四、在项目中创建一个新.aspx页面或者打开你需要放图表的页面

在新的.aspx页面或者你需要显示图表的页面中创建div,并且为div设置CSS样式;同时引用jquery-3.4.1.min.js、echarts.min.js和你刚刚新建的js文件。【注意】必须先引用jquery-3.4.1.min.js,不然会报错!因为Echarts是基于JQuery库;width和height根据自己的需要自行设定。

<%@ Page Title="" Language="C#" MasterPageFile="~/BackStage.Master" AutoEventWireup="true" CodeBehind="Tubiao.aspx.cs" Inherits="ZMCrowdfunding.Tubiao" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="icon" href="images/zm.ico" type="image/x-icon" />
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/myEcharts.js"></script>
    <style>
        .tb{
            width:100%;
            margin-top:20px;
        }
        #bar {
            width:1300px;
            height:600px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="tb">
        <%-- 柱状图 --%>
        <div id="bar"></div>
    </div>
</asp:Content>

五、在项目中创建ajax文件夹并且在该文件夹下创建一般处理程序

  1. 引用BLL层
  2. 添加程序集类库引用:在引用中右键,选择添加引用,搜索json=>勾选json.NET .NET 4.0
    右键,选择添加引用
    在这里插入图片描述
    返回JSON数据
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BLL;
using System.Web.Script.Serialization;

namespace WebApplication1
{
    /// <summary>
    /// Handler 的摘要说明
    /// </summary>
    public class Handler : IHttpHandler
    {
        public string jsonData = "";	//声明变量
        public void ProcessRequest(HttpContext context)
        {
            //调用命令
            string command = context.Request["cmd"];
            switch (command)
            {
                case "bar":
                    GetBars(context);
                    break;
            };
        }
        /// <summary>
        /// 绘制柱状图的json数据方法
        /// </summary>
        /// <param name="context"></param>
        public void GetBars(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";
            //数据Json化
           //JobBLL.Job_analysisDAL(),这是调用三层架构中的BLL层
            jsonData = JsonConvert.SerializeObject(ProjectBLL.SelectProjectTubiao());
            context.Response.Write(jsonData);

        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

六、在之前新建的js文件中编写绘制图表的js代码

在Echarts官网中有相关的图表的代码属性。例如柱状图:柱状图。可在页面中动态的修改代码!筛选出自己所需要的代码片段!使用Ajax读取后台数据 ;并将定义的数组中的数据对象赋值给options对象内的data

//各部们平均薪资
$(function () {
    Pie();
});
//定义数组
var department_name =[];
var Salary = [];
function Pie() {
    $.ajax({
        type: "post",
        async: false,
        data: { cmd: "pie" },
        url: "ajax/Handler.ashx",	//一般处理程序的路由:一般处理程序的路径
        dataType: "json",	//传输过来的数据格式
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                department_name.push(data[i].bumen);
                Salary.push({ name: data[i].bumen, value: data[i].avgSalary });	//存储为键值对的json数据
            }
        //将返回的names和scores对象赋值给options对象内的data
            InitPie(department_name, Salary);
        },
        error: function (xhr, textStatus, errorThrown) {
            /*错误信息处理*/
            alert("进入error---");
            alert("状态码:" + xhr.status);
            alert("状态:" + xhr.readyState); //当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。
            alert("错误信息:" + xhr.statusText);
            alert("返回响应信息:" + xhr.responseText);//这里是详细的信息
            alert("请求状态:" + textStatus);
            alert(errorThrown);
            alert("请求失败"); 
        }
    });
}
function InitPie(department_name, Salary) {
	//
    var myChartPie = echarts.init(document.getElementById('pie'));
    option_Pie = {
        title: {
            text: '各部门薪资分析',	//可视化主标题
            textStyle: {
                color: 'red',
                fontWeight: 'bold',
                fontStyle: 'italic',
                fontFamily: '微软雅黑'
            },	//主标题的样式
            subtext: '各部门平均薪资对比',	//副标题
            subtextStyle: {
                color: 'black',
                fontFamily: '微软雅黑'
            },	//副标题的样式
            x: 'center'
        },
	//图例
        legend: {
            data: department_name,
            orient: 'vertical',	//图例列表的布局朝向,取值:'vertical'/'horizontal'
            left: '10%',
        },
	//提示框组件
        tooltip: {
            trigger: 'item',	//触发类型;item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用;axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
            formatter: "{a}<br/>{b} :{c}元 ({d}%)"
        },
        toolbox: {
            feature: {
                saveAsImage: { show: true }
            }
        },
        label: {
            show: true,
        },
        series: [{
            name:'部门',
            radius: '50%',
            center:['50%','55%'],
            data: Salary,
            type: 'pie',
        }]
    };
        // 使用刚指定的配置项和数据显示图表-绑定数据
    myChartPie.setOption(option_Pie);
}

//部门柱状图
$(function () {
    Bar();
});

var names = new Array();	//定义数组
var scores = new Array();
function Bar() {
        // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    $.ajax({
        type: "post",
        async: false,
        data: { cmd: "bar" },
        url: "ajax/Handler.ashx",
        dataType: "json",
        success: function (data) {
        //循环
            for (var i = 0; i < data.length; i++) {
                names.push(data[i].department_name);
                scores.push(data[i].number);
            }
        //将返回的names和scores对象赋值给options对象内的data
            InitChart(names, scores);
        },
        error: function (error) {
            alert("Ajax获取服务器数据出错了!" + error);
        }
    });
}
function InitChart(names, scores) {
        // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    option = {
        title: {
            text: '部门分析',
            textStyle: {
                color: 'red',
                fontWeight: 'bold',
                fontStyle: 'italic',
                fontFamily: '微软雅黑'
            },
            subtext: '各部门人数对比',
            subtextStyle: {
                color: 'black',
                fontFamily: '微软雅黑'
            },
            x: 'center'
        },
        grid: {
            top: '20%',
        },
        xAxis: {
            name: '部门名称',
            type: 'category',
            data: names,
            axisLabel: {
                rotate: '35',
                interval:0
            }
        },
        tooltip: {
            trigger: 'axis',
        },
        toolbox: {
            feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        yAxis: {
            type: 'value',
            name: '人数'
        },
        series: [{
            data: scores,
            type: 'bar',
            label: {
                normal: {
                    formatter:"{c}"+"人",
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: 'black',
                        fontFamily:'微软雅黑'
                    }
                }
            },
        }]
    };
        // 使用刚指定的配置项和数据显示图表-绑定数据
    myChart.setOption(option);
}
  • 3
    点赞
  • 6
    评论
  • 11
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值