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;
}
c#图标、显示图表、图形、json echarts实例 数据封装【c#】
原文：https://www.cnblogs.com/liuguiqing/p/15233694.html