ASP.NET+Echarts绘制图表

本文介绍了在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层：

         /// 

        /// 查询Project表，显示后台图表需要显示的数据
        /// 
        /// 
        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层：

         /// 

        /// 查询Project表，显示后台图表需要显示的数据
        /// 
        /// 
        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
{
    /// 

    /// Handler 的摘要说明
    /// 
    public class Handler : IHttpHandler
    {
        public string jsonData = "";	//声明变量
        public void ProcessRequest(HttpContext context)
        {
            //调用命令
            string command = context.Request["cmd"];
            switch (command)
            {
                case "bar":
                    GetBars(context);
                    break;
            };
        }
        /// 

        /// 绘制柱状图的json数据方法
        /// 
        /// 
        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}
{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);
}