说明：开发环境vs2012 ,asp.net mvc4项目，c#语言
1、效果图
2、HTML 前端代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EchartTest.aspx.cs" Inherits="MvcAppTest.EchartTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="ewJS/jquery.js"></script>
<script src="ewJS/echarts.js"></script>
<script src="ewJS/echartObject.js"></script>
<script type="text/ecmascript">
var comArray = new Array();
var comKey = new Array();
var comValue = new Array();
var earthArray = new Array();
var earthKey = new Array();
var earthValue = new Array();
var valueArray = new Array();
var valKey = new Array();
var valValue = new Array();
var areaArray = new Array();
var areaKey = new Array();
var areaValue = new Array();
var xLocation;//图表图标的位置
$(function () {
xLocation = 300;
HuiZongChart(100);
});
function HuiZongChart(officeID) {
earthKey = [];
earthValue = [];
comKey = [];
comValue = [];
valKey = [];
valValue = [];
areaKey = [];
areaValue = [];
$.ajax({
type: 'post',
url: 'Home/GetHZdata',
async: false,
dataType: 'json',
data: { officeId: officeID },
success: function (d) {
$.each(d, function (key, val) {
if (key == "GSValueList") {
if (val.length > 0) {
for (var i = 0; i < val.length; i++) {
if (val[i].IsoK == '1') {
switch (val[i].id) {
case 1:
earthKey.push('A类用地');
earthValue.push(d.gxhzvalueModel.PLCount);
areaKey.push("A类用地");
areaValue.push(d.gxhzvalueModel.PLArea);
break;
case 2:
earthKey.push('B类用地');
earthValue.push(d.gxhzvalueModel.ZJWYCount);
areaKey.push("B类用地");
areaValue.push(d.gxhzvalueModel.ZJWYArea);
break;
}
}
}
}
}
else if (key == "gxhzvalueModel") { //$('#' + key + '').html(val);
$.each(d.gxhzvalueModel, function (index, value) {
if (index == 'TotalCount') {
totalNum = '用地数量 (' + value + '块)';
}
if (index == 'WGYDCount') {
earthKey.push('C类用地');
earthValue.push(value);
}
if (index == 'YSWPCount') {
earthKey.push('D类用地');
earthValue.push(value);
}
if (index == 'TCYDCount') {
earthKey.push('E类用地');
earthValue.push(value);
}
if (index == 'WGCount') {
earthKey.push('F类用地');
earthValue.push(value);
}
if (index == 'WJCount') {
earthKey.push('H类用地');
earthValue.push(value);
}
if (index == 'TotalArea') {
totalArea = '用地面积 (' + value + '亩)';
}
if (index == 'WGArea') {
areaKey.push("F类用地");
areaValue.push(value);
}
if (index == 'WGYDArea') {
areaKey.push("C类用地");
areaValue.push(value);
}
if (index == 'TCYDArea') {
areaKey.push("E类用地");
areaValue.push(value);
}
if (index == 'YSWPArea') {
areaKey.push("D类用地");
areaValue.push(value);
}
if (index == 'WJArea') {
areaKey.push("H类用地");
areaValue.push(value);
}
if (index == 'COMCount') {
QYCount = '企业数量 (' + value + '家 )';
}
if (index == 'COMGSCount') {
comKey.push("A类企业");
comValue.push(value);
}
if (index == 'COMGXCount') {
comKey.push("B类企业");
comValue.push(value);
}
if (index == 'EmployeesCount') {
var kRen = 0.001 * value;
var kRen02 = kRen.toFixed(3);
comKey.push("用工数量");
comValue.push(kRen02);
}
if (index == 'OutPutValue') {
valKey.push("工业产值");
valValue.push(value);
}
if (index == 'TotalTax') {
valKey.push("税收总额");
valValue.push(value);
}
if (index == 'MudTax') {
valKey.push("亩均税收");
valValue.push(value);
}
}
);
}
});
},
error: function () {
alert('error');
}
});
testChart1();
testChart2();
testChart3();
testChart4();
}
function testChart1() {
var lerg = [''];
var lerg1 = '';
var dataX = new Array();
for (var i = 0; i < earthKey.length; i++) {
dataX.push(earthKey[i]);
}
var dataY = new Array();
for (var i = 0; i < earthValue.length; i++) {
dataY.push(earthValue[i]);
}
//var obj = new creatObject('用地数量', '(单位：块)', lerg, lerg1, dataX, dataY,xLocation);
var obj = new creatObject(totalNum, '(单位：块)', lerg, lerg1, dataX, dataY, xLocation);
var myChart = echarts.init(document.getElementById('divChart1'));
myChart.setOption(obj);
}
function testChart2() {
var lerg = [''];
var lerg1 = '';
var dataX = new Array();
for (var i = 0; i < areaKey.length; i++) {
dataX.push(areaKey[i]);
}
var dataY = new Array();
for (var i = 0; i < areaValue.length; i++) {
dataY.push(areaValue[i]);
}
//var obj = new creatObject('用地面积', '(单位：亩)', lerg, lerg1, dataX, dataY,xLocation);
var obj = new creatObject(totalArea, '(单位：亩)', lerg, lerg1, dataX, dataY, xLocation);
var myChart = echarts.init(document.getElementById('divChart2'));
myChart.setOption(obj);
}
function testChart3() {
var lerg = [''];
var lerg1 = '';
var dataX = new Array();
for (var i = 0; i < comKey.length; i++) {
dataX.push(comKey[i]);
}
var dataY = new Array();
for (var i = 0; i < comValue.length; i++) {
dataY.push(comValue[i]);
}
var obj = new creatObject(QYCount, '(单位：个/1000人)', lerg, lerg1, dataX, dataY, xLocation);
var myChart = echarts.init(document.getElementById('divChart3'));
myChart.setOption(obj);
}
function testChart4() {
var lerg = [''];
var lerg1 = '';
var dataX = new Array();
for (var i = 0; i < valKey.length; i++) {
dataX.push(valKey[i]);
}
var dataY = new Array();
for (var i = 0; i < valValue.length; i++) {
dataY.push(valValue[i]);
}
var obj = new creatObject('工业产值', '(单位：亿元)', lerg, lerg1, dataX, dataY, xLocation);
var myChart = echarts.init(document.getElementById('divChart4'));
myChart.setOption(obj);
}
</script>
</head>
<body>
<div style="400px;">
<div id="divChart1" style="100%;height:300px;">
</div>
<div id="divChart2" style="100%;height:300px;">
</div>
<div id="divChart3" style="100%;height:300px;">
</div>
<div id="divChart4" style="100%;height:300px;">
</div>
</div>
</body>
</html>
3、Home控制器，后台代码
[HttpPost] public JsonResult GetHZdata(string officeId) { TotalHZModel model = new TotalHZModel(); List<GSValueModel> lists = new List<GSValueModel>(); HZModel hgModel = new HZModel(); hgModel.COMCount = 10000; hgModel.COMGSCount = 6000; hgModel.COMGXCount = 4000; hgModel.EmployeesCount = 600000; hgModel.MudTax = 20; hgModel.OutPutValue = 120; hgModel.PLArea = 1200; hgModel.PLCount = 150; hgModel.TCYDArea = 4000; hgModel.TCYDCount = 900; hgModel.TotalArea = 12300; hgModel.TotalCount = 8000; hgModel.TotalTax = 9000; hgModel.WGArea = 4500; hgModel.WGCount = 1400; hgModel.WGYDArea = 4000; hgModel.WGYDCount = 300; hgModel.WJArea = 5000; hgModel.WJCount = 2000; hgModel.YSWPArea = 3000; hgModel.YSWPCount = 600; hgModel.ZJWYArea = 400; hgModel.ZJWYCount = 6005; GSValueModel gsMoldel1 = new GSValueModel() { id=1, IsoK=0, text="选项1"}; GSValueModel gsMoldel2 = new GSValueModel() { id = 2, IsoK = 0, text = "选项2" }; lists.Add(gsMoldel1); lists.Add(gsMoldel2); model.gxhzvalueModel = hgModel; model.GSValueList = lists; return Json(model, JsonRequestBehavior.DenyGet); }
public class TotalHZModel { public List<GSValueModel> GSValueList { get; set; } public HZModel gxhzvalueModel { get; set; } }
public class GSValueModel { public int id { get; set; } public int IsoK { get; set; } public string text { get; set; } }
public class HZModel { public Int32 PLCount { get; set; } public Int32 YSWPCount { get; set; } public Int32 WGCount { get; set; } public Int32 WJCount { get; set; } public Int32 ZJWYCount { get; set; } public Int32 TCYDCount { get; set; } public Int32 TotalCount { get; set; } public Int32 WGYDCount { get; set; } public decimal WGArea { get; set; } public decimal WJArea { get; set; } public decimal PLArea { get; set; } public decimal ZJWYArea { get; set; } public decimal YSWPArea { get; set; } public decimal TCYDArea { get; set; } public decimal WGYDArea { get; set; } public decimal TotalArea { get; set; } public Int32 COMCount { get; set; } public Int32 COMGSCount { get; set; } public Int32 COMGXCount { get; set; } public Int32 EmployeesCount { get; set; } public decimal OutPutValue { get; set; } public decimal TotalTax { get; set; } public decimal MudTax { get; set; } }
4、引用文件下载
链接：https://pan.baidu.com/s/1qROFfFQfk2Neu3ei3PGTzg 提取码：jdhg