说明：开发环境vs2012 ,asp.net mvc4项目，c#语言

1、效果图

2、HTML 前端代码

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EchartTest.aspx.cs" Inherits="MvcAppTest.EchartTest" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title></title>
  9.     <script src="ewJS/jquery.js"></script>
  10.     <script src="ewJS/echarts.js"></script>
  11.     <script src="ewJS/echartObject.js"></script>
  12.     <script type="text/ecmascript">
  13.         var comArray = new Array();
  14.         var comKey = new Array();
  15.         var comValue = new Array();
  16.         var earthArray = new Array();
  17.         var earthKey = new Array();
  18.         var earthValue = new Array();
  19.         var valueArray = new Array();
  20.         var valKey = new Array();
  21.         var valValue = new Array();
  22.         var areaArray = new Array();
  23.         var areaKey = new Array();
  24.         var areaValue = new Array();
  25.         var xLocation;//图表图标的位置
  26.         $(function () {
  27.             xLocation = 300;
  28.             HuiZongChart(100);
  29.         });
  30.         function HuiZongChart(officeID) {
  31.  
  32.             earthKey = [];
  33.             earthValue = [];
  34.             comKey = [];
  35.             comValue = [];
  36.             valKey = [];
  37.             valValue = [];
  38.             areaKey = [];
  39.             areaValue = [];
  40.             $.ajax({
  41.                 type: 'post',
  42.                 url: 'Home/GetHZdata',
  43.                 async: false,
  44.                 dataType: 'json',
  45.                 data: { officeId: officeID },
  46.                 success: function (d) {
  47.                     $.each(d, function (key, val) {
  48.                         if (key == "GSValueList") {
  49.                             if (val.length > 0) {
  50.                                 for (var i = 0; i < val.length; i++) {
  51.                                     if (val[i].IsoK == '1') {
  52.  
  53.                                         switch (val[i].id) {
  54.                                             case 1:
  55.                                                 earthKey.push('A类用地');
  56.                                                 earthValue.push(d.gxhzvalueModel.PLCount);
  57.                                                 areaKey.push("A类用地");
  58.                                                 areaValue.push(d.gxhzvalueModel.PLArea);
  59.                                                 break;
  60.                                             case 2:
  61.                                                 earthKey.push('B类用地');
  62.                                                 earthValue.push(d.gxhzvalueModel.ZJWYCount);
  63.                                                 areaKey.push("B类用地");
  64.                                                 areaValue.push(d.gxhzvalueModel.ZJWYArea);
  65.                                                 break;
  66.                                         }
  67.                                     }
  68.                                 }
  69.                             }
  70.                         }
  71.                         else if (key == "gxhzvalueModel") {    //$('#' + key + '').html(val);
  72.  
  73.                             $.each(d.gxhzvalueModel, function (index, value) {
  74.                                 if (index == 'TotalCount') {
  75.  
  76.                                     totalNum = '用地数量 (' + value + '块)';
  77.                                 }
  78.                                 if (index == 'WGYDCount') {
  79.                                     earthKey.push('C类用地');
  80.                                     earthValue.push(value);
  81.                                 }
  82.                                 if (index == 'YSWPCount') {
  83.                                     earthKey.push('D类用地');
  84.                                     earthValue.push(value);
  85.                                 }
  86.  
  87.                                 if (index == 'TCYDCount') {
  88.                                     earthKey.push('E类用地');
  89.                                     earthValue.push(value);
  90.                                 }
  91.                                 if (index == 'WGCount') {
  92.  
  93.                                     earthKey.push('F类用地');
  94.                                     earthValue.push(value);
  95.                                 }
  96.                                 if (index == 'WJCount') {
  97.  
  98.                                     earthKey.push('H类用地');
  99.                                     earthValue.push(value);
  100.                                 }
  101.  
  102.                                 if (index == 'TotalArea') {
  103.  
  104.                                     totalArea = '用地面积 (' + value + '亩)';
  105.                                 }
  106.                                 if (index == 'WGArea') {
  107.  
  108.                                     areaKey.push("F类用地");
  109.                                     areaValue.push(value);
  110.                                 }
  111.                                 if (index == 'WGYDArea') {
  112.  
  113.                                     areaKey.push("C类用地");
  114.                                     areaValue.push(value);
  115.                                 }
  116.  
  117.                                 if (index == 'TCYDArea') {
  118.  
  119.                                     areaKey.push("E类用地");
  120.                                     areaValue.push(value);
  121.                                 }
  122.                                 if (index == 'YSWPArea') {
  123.  
  124.                                     areaKey.push("D类用地");
  125.                                     areaValue.push(value);
  126.                                 }
  127.  
  128.                                 if (index == 'WJArea') {
  129.  
  130.                                     areaKey.push("H类用地");
  131.                                     areaValue.push(value);
  132.                                 }
  133.  
  134.                                 if (index == 'COMCount') {
  135.  
  136.                                     QYCount = '企业数量 (' + value + '家 )';
  137.                                 }
  138.                                 if (index == 'COMGSCount') {
  139.  
  140.                                     comKey.push("A类企业");
  141.                                     comValue.push(value);
  142.                                 }
  143.                                 if (index == 'COMGXCount') {
  144.  
  145.                                     comKey.push("B类企业");
  146.                                     comValue.push(value);
  147.                                 }
  148.                                 if (index == 'EmployeesCount') {
  149.  
  150.                                     var kRen = 0.001 * value;
  151.                                     var kRen02 = kRen.toFixed(3);
  152.                                     comKey.push("用工数量");
  153.                                     comValue.push(kRen02);
  154.                                 }
  155.  
  156.                                 if (index == 'OutPutValue') {
  157.  
  158.                                     valKey.push("工业产值");
  159.                                     valValue.push(value);
  160.                                 }
  161.                                 if (index == 'TotalTax') {
  162.  
  163.                                     valKey.push("税收总额");
  164.                                     valValue.push(value);
  165.                                 }
  166.                                 if (index == 'MudTax') {
  167.  
  168.                                     valKey.push("亩均税收");
  169.                                     valValue.push(value);
  170.                                 }
  171.                             }
  172.  
  173.                             );
  174.                         }
  175.  
  176.                     });
  177.                 },
  178.                 error: function () {
  179.                     alert('error');
  180.                 }
  181.             });
  182.             testChart1();
  183.             testChart2();
  184.             testChart3();
  185.             testChart4();
  186.  
  187.         }
  188.         function testChart1() {
  189.  
  190.             var lerg = [''];
  191.             var lerg1 = '';
  192.             var dataX = new Array();
  193.             for (var i = 0; i < earthKey.length; i++) {
  194.                 dataX.push(earthKey[i]);
  195.             }
  196.             var dataY = new Array();
  197.             for (var i = 0; i < earthValue.length; i++) {
  198.                 dataY.push(earthValue[i]);
  199.             }
  200.  
  201.             //var obj = new creatObject('用地数量', '(单位：块)', lerg, lerg1, dataX, dataY,xLocation);
  202.             var obj = new creatObject(totalNum, '(单位：块)', lerg, lerg1, dataX, dataY, xLocation);
  203.             var myChart = echarts.init(document.getElementById('divChart1'));
  204.             myChart.setOption(obj);
  205.         }
  206.         function testChart2() {
  207.             var lerg = [''];
  208.             var lerg1 = '';
  209.             var dataX = new Array();
  210.             for (var i = 0; i < areaKey.length; i++) {
  211.  
  212.                 dataX.push(areaKey[i]);
  213.             }
  214.             var dataY = new Array();
  215.             for (var i = 0; i < areaValue.length; i++) {
  216.                 dataY.push(areaValue[i]);
  217.             }
  218.  
  219.             //var obj = new creatObject('用地面积', '(单位：亩)', lerg, lerg1, dataX, dataY,xLocation);
  220.             var obj = new creatObject(totalArea, '(单位：亩)', lerg, lerg1, dataX, dataY, xLocation);
  221.             var myChart = echarts.init(document.getElementById('divChart2'));
  222.             myChart.setOption(obj);
  223.         }
  224.         function testChart3() {
  225.  
  226.             var lerg = [''];
  227.             var lerg1 = '';
  228.             var dataX = new Array();
  229.             for (var i = 0; i < comKey.length; i++) {
  230.  
  231.                 dataX.push(comKey[i]);
  232.             }
  233.             var dataY = new Array();
  234.             for (var i = 0; i < comValue.length; i++) {
  235.                 dataY.push(comValue[i]);
  236.             }
  237.  
  238.             var obj = new creatObject(QYCount, '(单位：个/1000人)', lerg, lerg1, dataX, dataY, xLocation);
  239.             var myChart = echarts.init(document.getElementById('divChart3'));
  240.             myChart.setOption(obj);
  241.         }
  242.         function testChart4() {
  243.  
  244.             var lerg = [''];
  245.             var lerg1 = '';
  246.             var dataX = new Array();
  247.             for (var i = 0; i < valKey.length; i++) {
  248.  
  249.                 dataX.push(valKey[i]);
  250.             }
  251.             var dataY = new Array();
  252.             for (var i = 0; i < valValue.length; i++) {
  253.                 dataY.push(valValue[i]);
  254.             }
  255.  
  256.             var obj = new creatObject('工业产值', '(单位：亿元)', lerg, lerg1, dataX, dataY, xLocation);
  257.             var myChart = echarts.init(document.getElementById('divChart4'));
  258.  
  259.             myChart.setOption(obj);
  260.  
  261.         }
  262.     </script>
  263. </head>
  264. <body>
  265.     <div style="width:400px;">
  266.         <div id="divChart1" style="width:100%;height:300px;">
  267. </div>
  268. <div id="divChart2" style="width:100%;height:300px;">
  269. </div>
  270. <div id="divChart3" style="width:100%;height:300px;">
  271. </div>
  272. <div id="divChart4" style="width:100%;height:300px;">
  273. </div>
  274.     </div>
  275. </body>
  276. </html>

3、Home控制器，后台代码

  1.  [HttpPost]
  2.         public JsonResult GetHZdata(string officeId)
  3.         {
  4.             TotalHZModel model = new TotalHZModel();
  5.             List<GSValueModel> lists = new List<GSValueModel>();
  6.             HZModel hgModel = new HZModel();
  7.             hgModel.COMCount = ;
  8.             hgModel.COMGSCount = ;
  9.             hgModel.COMGXCount = ;
  10.             hgModel.EmployeesCount = ;
  11.             hgModel.MudTax = ;
  12.             hgModel.OutPutValue = ;
  13.             hgModel.PLArea = ;
  14.             hgModel.PLCount = ;
  15.             hgModel.TCYDArea = ;
  16.             hgModel.TCYDCount = ;
  17.             hgModel.TotalArea = ;
  18.             hgModel.TotalCount = ;
  19.             hgModel.TotalTax = ;
  20.             hgModel.WGArea = ;
  21.             hgModel.WGCount = ;
  22.             hgModel.WGYDArea = ;
  23.             hgModel.WGYDCount = ;
  24.             hgModel.WJArea = ;
  25.             hgModel.WJCount = ;
  26.             hgModel.YSWPArea = ;
  27.             hgModel.YSWPCount = ;
  28.             hgModel.ZJWYArea = ;
  29.             hgModel.ZJWYCount = ;
  30.             GSValueModel gsMoldel1 = new GSValueModel() {  id=, IsoK=, text="选项1"};
  31.             GSValueModel gsMoldel2 = new GSValueModel() { id = , IsoK = , text = "选项2" };
  32.             lists.Add(gsMoldel1);
  33.             lists.Add(gsMoldel2);
  34.             model.gxhzvalueModel = hgModel;
  35.             model.GSValueList = lists;
  36.             return Json(model, JsonRequestBehavior.DenyGet);
  37.         }
  1.   public class TotalHZModel
  2.     {
  3.         public List<GSValueModel> GSValueList { get; set; }
  4.         public HZModel gxhzvalueModel { get; set; }
  5.     }
  1.     public class GSValueModel
  2.     {
  3.         public int id { get; set; }
  4.         public int IsoK { get; set; }
  5.         public string text { get; set; }
  6.     }
  1.  public class HZModel
  2.     {
  3.  
  4.         public Int32 PLCount { get; set; }
  5.         public Int32 YSWPCount { get; set; }
  6.         public Int32 WGCount { get; set; }
  7.         public Int32 WJCount { get; set; }
  8.         public Int32 ZJWYCount { get; set; }
  9.         public Int32 TCYDCount { get; set; }
  10.         public Int32 TotalCount { get; set; }
  11.         public Int32 WGYDCount { get; set; }
  12.  
  13.         public decimal WGArea { get; set; }
  14.         public decimal WJArea { get; set; }
  15.         public decimal PLArea { get; set; }
  16.         public decimal ZJWYArea { get; set; }
  17.         public decimal YSWPArea { get; set; }
  18.         public decimal TCYDArea { get; set; }
  19.         public decimal WGYDArea { get; set; }
  20.         public decimal TotalArea { get; set; }
  21.         public Int32 COMCount { get; set; }
  22.         public Int32 COMGSCount { get; set; }
  23.         public Int32 COMGXCount { get; set; }
  24.         public Int32 EmployeesCount { get; set; }
  25.         public decimal OutPutValue { get; set; }
  26.         public decimal TotalTax { get; set; }
  27.         public decimal MudTax { get; set; }
  28.     }

4、引用文件下载

链接：https://pan.baidu.com/s/1qROFfFQfk2Neu3ei3PGTzg      提取码：jdhg

eacharts 根据后台数据生成柱状图的更多相关文章

  1. Java读取数据库数据生成柱状图

    此案例是用swing显示数据的.须要引入jfreechart相关包.不同版本号可能包不同样.本人用的是 此案例在ssi框架下会报错,不用框架就没问题. Java后台逻辑代码: public class ...

  2. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

  3. SpringBoot18 Swagger、API接口文档生成、WireMock、模拟后台数据

    1 Swagger 1.1 简述 前后端分离的项目需要前后端开发人员协同工作,后台开发人员需要给到前端开发者一套API文档:利用Swagger可以简单高效的帮助后台开发者生成RestfulAPI开发文 ...

  4. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  5. 【POI】java服务生成List数据集合，后台服务生成xlsx临时文件，并将临时文件上传到腾讯云上

    场景: java服务生成List数据集合,后台服务生成xlsx临时文件,并将临时文件上传到腾讯云上 今日份代码: 1.先是一个变量,作为文件名 private static final String ...

  6. Java获取后台数据，动态生成多行多列复选框

    本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...

  7. 使用Asp.net WebAPI 快速构建后台数据接口

    现在的互联网应用,无论是web应用,还是移动APP,基本都需要实现非常多的数据访问接口.其实对一些轻应用来说Asp.net WebAPI是一个很快捷简单并且易于维护的后台数据接口框架.下面我们来快速构 ...

  8. 【AS3】Flash与后台数据交换四种方法整理

    随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...

  9. html5生成柱状图（条形图）

    <html> <canvas id="a_canvas" width="1000" height="700">< ...

随机推荐

  1. Struts2的上传与下载

    转自:http://blog.csdn.net/Mark_LQ/article/details/49822821 10.1.1 文件上传基本案例   第一步:上传组件依赖与commons-fileup ...

  2. [转载][FPGA]Quartus代码保护-生成网表文件

    0. 简介 当项目过程中,不想给甲方源码时,该如何?我们可以用网表文件qxp或者vqm对资源进行保护. 下面讲解这两个文件的具体生成步骤: 1. 基本概念 QuartusII的qxp文件为Quartu ...

  3. 洛谷—— P2880 [USACO07JAN]平衡的阵容Balanced Lineup

    https://www.luogu.org/problemnew/show/P2880 题目背景 题目描述: 每天,农夫 John 的N(1 <= N <= 50,000)头牛总是按同一序 ...

  4. GRDB使用SQLite的WAL模式

    GRDB使用SQLite的WAL模式   WAL全称是Write Ahead Logging,它是SQLite中实现原子事务的一种机制.该模式是从SQLite 3.7.0版本引入的.再此之前,SQLi ...

  5. 着陆攻击LAND Attack

    着陆攻击LAND Attack   着陆攻击LAND Attack也是一种拒绝服务攻击DOS.LAND是Local Area Network Denial的缩写,意思是局域网拒绝服务攻击,翻译为着陆攻 ...

  6. python3:requests模块-写了一点

    使用requests,它的七个主要方法,在这里只讲两个:get.post >>> import requests >>> r=requests.get(" ...

  7. [Algorithm] JavaScript Graph Data Structure

    A graph is a data structure comprised of a set of nodes, also known as vertices, and a set of edges. ...

  8. Oracle对没有主键的表分页

    普通情况对于有主键,能够做唯一表识的表.我们能够利用主键和rownum配合实现.比如: select scott.emp.* from scott.emp left join (select empn ...

  9. ios You app information could not be saved. Try again. If the problem persists, contact us

    ios You app information could not be saved. Try again. If the problem persists, contact us  大概意思:你的a ...

  10. 安装下载MySQL

    下载MySQL的地址:下面两个都行 http://dev.mysql.com/downloads/windows/ http://dev.mysql.com/downloads/installer/5 ...