說明：開發環境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="width:400px;">
<div id="divChart1" style="width:100%;height:300px;">
</div>
<div id="divChart2" style="width:100%;height:300px;">
</div>
<div id="divChart3" style="width:100%;height:300px;">
</div>
<div id="divChart4" style="width: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