ASP.NET使用百度eCharts

数据库用的是分组查询:

select count(*) as 销量,[dbo].[YC_Goods].[Name] as 名称, [dbo].[YC_Order].[GID] as 商品ID from [dbo].[YC_Order],[dbo].[YC_Goods] where [dbo].[YC_Goods].GID=[dbo].[YC_Order].GID  group by [dbo].[YC_Order].[GID],[dbo].[YC_Goods].[Name] order by count(*) desc

前端代码:

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminSite1.Master" AutoEventWireup="true" CodeBehind="Panel.aspx.cs" Inherits="UI.Admin.Panel" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>
        --后台管理首页
    </title>
    <script src="../js/jquery2.1.1.min.js" ></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <script src="../js/echarts-3.8.5/dist/echarts.min.js" ></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     管理员:<asp:Label ID="labuname" runat="server" Text="Label"></asp:Label><br />欢迎回来!<%--<asp:Button ID="btnLogout" runat="server" Text="注销" OnClick="btnLogout_Click" CssClass="btn btn-primary"/>--%>

            当前时间:<asp:Label ID="labnow" runat="server" Text="0000-00-00 00:00:00"></asp:Label><br />
    
    <!--分类销量统计-->
     <div id="main" style="width: 600px;height:400px;"></div>
     <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '销量最多统计'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["<%=_goodsnames[0]%>","<%=_goodsnames[1]%>","<%=_goodsnames[2]%>","<%=_goodsnames[3]%>","<%=_goodsnames[4]%>","<%=_goodsnames[5]%>"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [<%=_goodxl[0]%>, <%=_goodxl[1]%>, <%=_goodxl[2]%>, <%=_goodxl[3]%>,<%=_goodxl[4]%>, <%=_goodxl[5]%>]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
  <div id="main2" style="width: 600px;height:400px;"></div>
    <script>
        // 绘制图表。
        echarts.init(document.getElementById('main2')).setOption({
            title: {
                text: '销量分布'
            },
            series: {
                type: 'pie',
                data: [
                    <%
                            for (int i = 0; i < _pieName.Length; i++)
                            {
                                Response.Write("{ name: '"+_pieName[i]+"', value: "+_pieXl[i]+" },");
                            }
                        %>
                   
                   // { name: 'C', value: 1 }
                ]
            }
        });
    </script>
    <%/*这里取消掉了一个用户注册量统计*/ %>
    <%--<div id="RegCount" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">  
        //指定图标的配置和数据  
        var option = {
            title: {
                text: '用户注册量'
            },
            tooltip: {},
            legend: {
                data: ['用户来源']
            },
            xAxis: {
                data: ["9月", "10月","11月", "12月", ]
            },
            yAxis: {

            },
            series: [{
                name: '注册量',
                type: 'line',
                data: [500, 200, 360, 100]
            }]
        };
        //初始化echarts实例  
        var myChart = echarts.init(document.getElementById('RegCount'));

        //使用制定的配置项和数据显示图表  
        myChart.setOption(option);
    </script>  --%>
    </asp:Content>
后端代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace UI.Admin
{
    public partial class Panel : System.Web.UI.Page
    {
        /// <summary>
        /// 销量柱状统计图
        /// </summary>
         public  string[] _goodsnames=new string[6];//商品名称
        public string[] _goodxl= new string[6];//商品销量
                                               
        public string[] _pieXl = null;
        public string[] _pieName = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //没登录 直接跳转
                if (Session["adminuser"] == null)
                {
                    Response.Redirect("login.aspx");
                }
                labnow.Text = DateTime.Now.ToLongTimeString();
                labuname.Text = Session["adminuser"].ToString();
                //销量统计柱状图
                DataTable dt= BLL.CountBLL.xlCount();
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    if (dt.Rows[i][1].ToString().Length > 4)
                    {
                        _goodsnames[i] = dt.Rows[i][1].ToString().Substring(0, 4);
                    }
                    else
                    {
                        _goodsnames[i] = dt.Rows[i][1].ToString();
                    }
                    _goodxl[i] = dt.Rows[i][0].ToString();
                }
                //销量饼状图
                DataTable dtpie = BLL.CountBLL.pieCount();
                _pieXl = new string[dtpie.Rows.Count];
                _pieName = new string[dtpie.Rows.Count];
                for (int i = 0; i < dtpie.Rows.Count; i++)
                {
                    _pieXl[i] = dtpie.Rows[i][0].ToString(); 
                    _pieName[i]= dtpie.Rows[i][1].ToString();
                }
            }
        }
        //注销
        //protected void btnLogout_Click(object sender, EventArgs e)
        //{
        //    Session["adminuser"] = null;
        //    Response.Redirect("login.aspx");
        //}
    }
}
相关文章
相关标签/搜索