c#图标、显示图表、图形、json echarts实例 数据封装【c#】

page:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ViewxxxxChartsInfo.ascx.cs" Inherits="DotNetNuke.Modules.HRAddUser.ViewxxxxChartsInfo" %>
  <style type="text/css">
            .GridHead th {
                text-align: center;
            }
        </style>
<asp:Panel ID="panMain" runat="server">
    <table style="border: 1px solid #e1e0e0">
        <tr>
            <td>
                   <asp:Label ID="Label3" runat="server" Text="查询范围:"></asp:Label>
                    <asp:DropDownList ID="ddlDateArray" runat="server">
                        <asp:ListItem Selected="True" Text="选择一" Value="选择一"></asp:ListItem>
                        <asp:ListItem Text="选择二" Value="选择二"></asp:ListItem>
                        <asp:ListItem Text="全部" Value="全部"></asp:ListItem>
                    </asp:DropDownList>
                    <asp:Label ID="Label4" runat="server" Text="xxxx名称:"></asp:Label>
                    <asp:TextBox ID="tbxInfoxxxxxName" runat="server"></asp:TextBox>
                <asp:Button ID="btnselect" runat="server" Text="查询" OnClick="btnselect_Click" ControlStyle-BackColor="#0ea915" ControlStyle-ForeColor="White" />
            </td>
        </tr>

        <tr>
            <td>

                <div id="container" style="height: 600px; width: 1000px"></div>
            </td>
        </tr>
        <asp:Label ID="Type1" runat="server"  Style="display: none;"></asp:Label>
        <asp:Label ID="Type2" runat="server"  Style="display: none;"></asp:Label>
        <asp:Label ID="Type3" runat="server"  Style="display: none;"></asp:Label>
        <asp:Label ID="Type4" runat="server"  Style="display: none;"></asp:Label>
        <asp:Label ID="Type5" runat="server"  Style="display: none;"></asp:Label>
    </table>
    <script type="text/javascript" src="http://www.shicishu.com/down/echarts.min.js"></script>
    <script type="text/javascript" src="http://www.shicishu.com/down/echarts-gl.min.js"></script>
    <script type="text/javascript">
        var span1 = document.getElementById('<%=Type1.ClientID%>').innerHTML;
        var sp1 = JSON.parse(span1);
        var span2 = document.getElementById('<%=Type2.ClientID%>').innerHTML;
        var sp2 = JSON.parse(span2);
        var span3 = document.getElementById('<%=Type3.ClientID%>').innerHTML;
        var sp3 = JSON.parse(span3);
        var span4 = document.getElementById('<%=Type4.ClientID%>').innerHTML;
        var sp4 = JSON.parse(span4);
        var span5 = document.getElementById('<%=Type5.ClientID%>').innerHTML;
        var sp5 = JSON.parse(span5);

        let maxValue2 = Math.max.apply(null, sp2);
        let maxValue3 = Math.max.apply(null, sp3);
        let maxValue4 = Math.max.apply(null, sp4);
        let maxValue5 = Math.max.apply(null, sp5);
        var arr = [maxValue2, maxValue3, maxValue4,maxValue5];
        let maxval = Math.max.apply(null, arr);

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['营业收入', '应缴管理费', '实缴管理费','尚欠管理费']
            },
            xAxis: [
                {
                    type: 'category',
                    data: sp1,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '金额(元)',
                    min: 0,
                    max: maxval,
                    interval: maxval/10,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }

            ],
            series: [
                {
                    name: '营业收入',
                    type: 'bar',
                    data: sp2
                },
                {
                    name: '应缴管理费',
                    type: 'bar',
                    data: sp3
                },
                {
                    name: '实缴管理费',
                    type: 'bar',
                    data: sp4
                },
                {
                    name: '尚欠管理费',
                    type: 'bar',
                    data: sp5
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</asp:Panel>

　　

controller:

using System;
using System.Data;
using System.Web.UI.WebControls;
using DotNetNuke.Modules.ControllerData;
using DotNetNuke.Security;
using DotNetNuke.Services.Localization;

namespace DotNetNuke.Modules.ControllerData
{
    public partial class ViewxxxxChartsInfo : DotNetNuke.Entities.Modules.PortalModuleBase, DotNetNuke.Entities.Modules.IActionable
    {
        private ControllerData CD = new ControllerData();
        private DataTable dtTosxxxInfo = new DataTable();

        protected void Page_Load(object sender, EventArgs e)
        {

            FillDG();

            if (!IsPostBack)
            {
                FillUI();
            }
        }

        private void FillDG()
        {

            string swhere = " where xxxxName like '%" + tbxInfoxxxxxName.Text + "%' ";
            bool OnlyExpire;
            if (ddlDateArray.Text == "全部")
                OnlyExpire = false;
            else
                OnlyExpire = true;

            dtTosxxxInfo = CD.GetTosxxxxChartsInfo(swhere, ddlDateArray.Text);
        }

        private void FillUI()
        {
            Type1.Text = Convert.ToString(dtTosxxxInfo.Rows[0]["jsons"]);
            Type2.Text = Convert.ToString(dtTosxxxInfo.Rows[1]["jsons"]);
            Type3.Text = Convert.ToString(dtTosxxxInfo.Rows[2]["jsons"]);
            Type4.Text = Convert.ToString(dtTosxxxInfo.Rows[3]["jsons"]);
            Type5.Text = Convert.ToString(dtTosxxxInfo.Rows[4]["jsons"]);
        }
		//页面响应移动代码
        #region IActionable 成员

        DotNetNuke.Entities.Modules.Actions.ModuleActionCollection DotNetNuke.Entities.Modules.IActionable.ModuleActions
        {
            get
            {
                Entities.Modules.Actions.ModuleActionCollection Actions = new
                Entities.Modules.Actions.ModuleActionCollection();
                Actions.Add(GetNextActionID(),
                Localization.GetString(Entities.Modules.Actions.ModuleActionType.AddContent,
                LocalResourceFile), Entities.Modules.Actions.ModuleActionType.AddContent, "", "",
                EditUrl(), false, SecurityAccessLevel.Edit, true, false);
                return Actions;
            }
        }

        #endregion
        protected void btnselect_Click(object sender, EventArgs e)
        {
            FillDG();
            FillUI();
        }
    }
}

　　

data:

     /// <summary>
        /// 获取xxxxxx收入、应缴、实缴、尚欠金额统计json.
        /// </summary>
        /// <param name="where"></param>
        /// <param name="DateA"></param>
        /// <returns></returns>
        public DataTable GetTosxxxChartsInfo(string where, string DateA)
        {
            DataTable dtchart = new DataTable();
            dtchart.Columns.Add("jsons");

            List<string> list1 = new List<string>();
            List<decimal> list2 = new List<decimal>();
            List<decimal> list3 = new List<decimal>();
            List<decimal> list4 = new List<decimal>();
            List<decimal> list5 = new List<decimal>();

            DataTable dtbc = GetTosxxxViewInfo(where, DateA);//数据层-统计计算封装表
            if (dtbc.Rows.Count > 0)
            {
                string Tosxxxname = "";
                decimal  Total2 = 0, Total3 = 0, Total4 = 0, Total5 = 0;
                for (int t = 0; t < dtbc.Rows.Count; t++)
                {
                    Tosxxxname = Convert.ToString(dtbc.Rows[t]["OAxxxxName"]);
                    Total2 = Convert.ToDecimal(dtbc.Rows[t]["xxxxIngahter"]);
                    Total3 = Convert.ToDecimal(dtbc.Rows[t]["xxxxAdminFee"]);
                    Total4 = Convert.ToDecimal(dtbc.Rows[t]["xxxAdminFee"]);
                    Total5 = Convert.ToDecimal(dtbc.Rows[t]["xxxxAdminFee"]);
                    list1.Add(Tosxxxname);
                    list2.Add(Total2);
                    list3.Add(Total3);
                    list4.Add(Total4);
                    list5.Add(Total5);
                }
            }
            dtchart.Rows.Add(new object[] { Newtonsoft.Json.JsonConvert.SerializeObject(list1) });
            dtchart.Rows.Add(new object[] { Newtonsoft.Json.JsonConvert.SerializeObject(list2) });
            dtchart.Rows.Add(new object[] { Newtonsoft.Json.JsonConvert.SerializeObject(list3) });
            dtchart.Rows.Add(new object[] { Newtonsoft.Json.JsonConvert.SerializeObject(list4) });
            dtchart.Rows.Add(new object[] { Newtonsoft.Json.JsonConvert.SerializeObject(list5) });
            return dtchart;
        }