eacharts 根据后台数据生成柱状图

说明：开发环境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 根据后台数据生成柱状图的更多相关文章

Java读取数据库数据生成柱状图
此案例是用swing显示数据的.须要引入jfreechart相关包.不同版本号可能包不同样.本人用的是此案例在ssi框架下会报错,不用框架就没问题. Java后台逻辑代码: public class ...
如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图
如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
SpringBoot18 Swagger、API接口文档生成、WireMock、模拟后台数据
1 Swagger 1.1 简述前后端分离的项目需要前后端开发人员协同工作,后台开发人员需要给到前端开发者一套API文档:利用Swagger可以简单高效的帮助后台开发者生成RestfulAPI开发文 ...
在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化的情况,后来测试了一下,发现多 ...
【POI】java服务生成List数据集合，后台服务生成xlsx临时文件，并将临时文件上传到腾讯云上
场景: java服务生成List数据集合,后台服务生成xlsx临时文件,并将临时文件上传到腾讯云上今日份代码: 1.先是一个变量,作为文件名 private static final String ...
Java获取后台数据，动态生成多行多列复选框
本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择效果如下: 一.后台查询数据库,返回List ...
使用Asp.net WebAPI 快速构建后台数据接口
现在的互联网应用,无论是web应用,还是移动APP,基本都需要实现非常多的数据访问接口.其实对一些轻应用来说Asp.net WebAPI是一个很快捷简单并且易于维护的后台数据接口框架.下面我们来快速构 ...
【AS3】Flash与后台数据交换四种方法整理
随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...
html5生成柱状图（条形图）
<html> <canvas id="a_canvas" width="1000" height="700">< ...

随机推荐

SPOJ QTREE4 - Query on a tree IV
You are given a tree (an acyclic undirected connected graph) with N nodes, and nodes numbered 1,2,3. ...
gcc 编译时库链接
gcc -l参数和-L参数 -l参数就是用来指定程序要链接的库,-l参数紧接着就是库名,那么库名跟真正的库文件名有什么关系呢?就拿数学库来说,他的库名是m,他的库文件名是libm.so,很容易看出,把 ...
使用C语言和i2c-dev驱动
原文地址:blog.csdn.NET/wyt2013/article/details/20740659 感谢作者分享. 在本博客的<使用Beaglebone Black的I2C(一)>中, ...
(4)DataTable
引用 using System.Data; 创建DataTable DataTable dt = new DataTable(); //指定表明,当把这个table添加到dataset时你就可以用da ...
SpringMVC (<context:include-filter>和<context:exclude-filter>的使用)
eg: 1.现在给定一个项目包的结构: com.yk.controller com.yk.service 2.在SpringMVC.XML有以下的配置: <!--扫描@controller注解- ...
Linux Root下的.gvfs出现异常解决办法(导致source失败,自启动失败)
原文地址: http://www.cnblogs.com/tdyizhen1314/p/4142991.html 在linux系统下安装软件或复制文件的时候,复制不成功,出现错误如下: error ...
Oracle服务扫描工具Oscanner
Oracle服务扫描工具Oscanner Oracle是甲骨文公司推出的关系型数据库,适用于中大规模数据存储,如大型企业.电信.银行等行业.Kali Linux集成了Oracle服务扫描专向工具O ...
UVALive 5135 Mining Your Own Business 双连通分量
据说这是一道Word Final的题,Orz... 原题链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&a ...
Springboot构建问题集
最近在搭建框架时遇到很多细节问题,时间久了就很容易忘记,在此记录一下. 1.问题:Warning:java: 来自注释处理程序 'org.antlr.v4.runtime.misc.NullUsage ...
jQuery使用on()绑定动态生成元素的事件无效
jquery on()方法是jquery1.7+后才使用的由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...

eacharts 根据后台数据生成柱状图

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

随机推荐

热门专题