说明：开发环境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 = ;

            hgModel.COMGSCount = ;

            hgModel.COMGXCount = ;

            hgModel.EmployeesCount = ;

            hgModel.MudTax = ;

            hgModel.OutPutValue = ;

            hgModel.PLArea = ;

            hgModel.PLCount = ;

            hgModel.TCYDArea = ;

            hgModel.TCYDCount = ;

            hgModel.TotalArea = ;

            hgModel.TotalCount = ;

            hgModel.TotalTax = ;

            hgModel.WGArea = ;

            hgModel.WGCount = ;

            hgModel.WGYDArea = ;

            hgModel.WGYDCount = ;

            hgModel.WJArea = ;

            hgModel.WJCount = ;

            hgModel.YSWPArea = ;

            hgModel.YSWPCount = ;

            hgModel.ZJWYArea = ;

            hgModel.ZJWYCount = ;

            GSValueModel gsMoldel1 = new GSValueModel() {  id=, IsoK=, text="选项1"};

            GSValueModel gsMoldel2 = new GSValueModel() { id = , IsoK = , 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

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. ADO:DataSet合并两张表( ds.Merge(ds1))

    原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  2. AC日记——线段树练习5 codevs 4927

    4927 线段树练习5  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 有n个数和5种操作 add a b ...

  3. AC日记——Super Mario hdu 4417

    Super Mario Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. luogu P1018 乘积最大

    题目描述 今年是国际数学联盟确定的"2000――世界数学年",又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你的一 ...

  5. (BruteForce)暴力破解经典题目总结

    在算法竞赛中,很多问题是来不及用数学公式推导出来的.或者说根本就找不到数学规律,这时我们就需要使用枚举来暴力破解. 不过枚举也是需要脑子的,一味的暴力只能超时.因此我这里选择了几道mooc上经典的题目 ...

  6. Android 沉浸式全屏

    Android 4.4 带来了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可 以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 “身临其境” 的体验. A ...

  7. SilverLight: 数据绑定(1)-绑定到数据对象

    ylbtech-SilverLight-DataBinding: Binding to Data Objects(绑定到数据对象) 1.A, Building  a Data Object(创建一个数 ...

  8. POJ2503字典树

    此代码原始出处:http://blog.csdn.net/cnyali/article/details/47367403 #include<stdio.h> #include<str ...

  9. iOS加急审核之2015年总结

    就在今天到公司的一会,查看了一下邮件,收到Apple的回复,今年的第六次加急审核通过了. 然后,想想明天就是西方的圣诞节假期了,从22日到29日的这段时间,Apple会暂时关闭iTunesconnec ...

  10. 每天一个 Linux 命令（16）：which whereis locate命令

    which  查看可执行文件的位置. whereis 查看文件的位置. locate   配合数据库查看文件位置.#whereis 和locate是从文件数据库里查找 数据库默认一个星期更新一次,所有 ...