话不多说,先上几张效果图 给大家看看

1:echart所用到的文件包需要事先引入好具体可见 http://echarts.baidu.com/doc/start.html

2:本例中所有的数据都是通过ajax异步获得,后台用.net服务端 mvc 框架

3: 我后台返回的是json格式的数据 

后台是得到一个DataSet集合,在写一个方法进行检查,要保证ds里面每一张dt都有相同行数并且时间字段数据相同,在这个案例中我的js里面只用到 时间 指标名称 数值三个字段,具体的表怎么设计可根据具体情况具体对待

具体方法 :

public ArrayList CheckDatable(DataSet ds, ArrayList list)
        {
            //1. 获取年份集合.
            IList<string> li_year = new List<string>();
            string strYear = "";
            foreach (DataTable dt in ds.Tables)
            {
                foreach (DataRow dr in dt.Rows)
                {
                    if (dr["年份"] != null)
                    {
                        strYear = dr["年份"].ToString();
                        if (!li_year.Contains(strYear))
                        {
                            li_year.Add(strYear);
                        }
                    }
                }
            }
            DataTable dtTmp = null;
            DataView dvTmp = null;
            DataRow srcRow = null;
            DataRow tgtRow = null;
            DataRow[] drs = null;
            foreach (DataTable item in ds.Tables)//item不要用var dt很大的时候装箱很费时间 最好写明确的DataTable 
            {
                if (item != null && item.Rows.Count > 0)
                {
                    srcRow = item.Rows[0];
                    foreach (string curYear in li_year)
                    {
                        drs = item.Select("年份='" + curYear + "'");
                        if (drs == null || drs.Length == 0)
                        {
                            tgtRow = item.NewRow();
                            CopyDataRow(ref tgtRow, srcRow, item);
                            tgtRow["年份"] = curYear;
                            tgtRow["数值"] = DBNull.Value;
                            item.Rows.Add(tgtRow);
                        }
                    }
                    //产生临时顺排充满的局部数据表.
                    dtTmp = item.Copy();
                    dvTmp = item.DefaultView;
                    dvTmp.Sort = "年份";
                    dtTmp = dvTmp.ToTable();
                    if (dtTmp.Rows.Count > 0)
                    {
                        list.Add(dtTmp);
                    }
                }
            }
            return list;
        }

后台调用并返回json格式方法

ArrayList list = new ArrayList();

 list = Gchart.CheckDatable(ds, list);
    return Content(JsonConvert.SerializeObject(list));

4.下面是前端接收到后台数据并解析的过程

假设获取数据的js方法是getData 后台服务端的方法是 GetGChartHealthStatisticsNationalEverywhere(这里用的是mvc)

 function getData(obj) {
        var url = "/chart/GChart/GetGChartHealthStatisticsNationalEverywhere/";
        if (!obj) {
            obj = {};
        }
        $.ajax({
            type: "post",
            url: url,
            data: obj,
            timeout: 60000,
            success: function (ret) {
                var data = eval("(" + ret + ")");
                if (data.length == 0) {
                    $('#SpecificGraphics').load("/chart/GChart/pvGChart404");//没有数据是转向一个提示页面 提示没有查询到相关数据 $("select").load(url); 这里是异步刷新页面的一个部分,load的也是一个子页面.net  mvc里面的部分视图               }
                else {
                    initChartHealthStatisticsNationalEverywhere(ret);//假设有数据的情况下会初始化图表区,重新画图。
                }
            },
            error: function (request, error) {
                if (error == "timeout") {
                }
                else {
                }
            }
        });
    }

//初始化函数

 function initChartHealthStatisticsNationalEverywhere(data) {
        var option = getOptionHealthStatisticsNationalEverywhere(data);//设置option 最主要的部分
        if (chart && chart.dispose) {
            chart.dispose();
        }
        var eleChart = document.getElementById('mainleft');//要展示图表的div的id
        var chart = echarts.init(eleChart);
        window.onresize = chart.resize;
        ption(option, true);
    }
    function getOptionHealthStatisticsNationalEverywhere(data) {
        /*将所有需要的变量给解析出来*/
        var L_xAxis = [];
        var L_series = [];
        var L_legend = [];
        var cur_list = [];
        var yearlist = [];
        var ret = eval("(" + data + ")");
        var unit = " ";
        var MaxData = 0;
        var starnum;
        var endnum;
        var ss;
        var ratelength = 0;
        $.each(ret, function (i, item) { //每次都是通过循环去取得指标名称 放到一个数组 变量中
            var zitem = item;
            if (i == 0) {
                starnum = zitem[0]["指标名称"].indexOf("(");
                endnum = zitem[0]["指标名称"].indexOf(")");
                ss = zitem[0]["指标名称"].substring(starnum + 1, endnum); //我这里是要取到指标的单位
            }
            cur_list.push(zitem[0]["指标名称"]);
        });
        L_legend = cur_list;
        $.each(ret, function (i, item) {  //这里是因为在我的项目中 如果含有百分比的指标名称 并且只有一个指标的时候是y轴向左看 如果含百分比并且不止一个指标名称 那么就让百分比的指标y轴向右看齐 变成折线图 其他指标y轴向左看齐 以柱状图的形式展示
            var current_item = item;
            if (item[0]["指标名称"].indexOf("%") > 0 || item[0]["指标名称"].indexOf("‰") > 0) {
                ratelength++;
            }
            $.each(current_item, function (i, zitem) {
                L_xAxis.push(zitem["年份"]);
            });
        });
        $.each(L_xAxis, function (i, item) {
            if ($.inArray(item, yearlist) == -1) {
                yearlist.push(item);
            }
        });
        L_xAxis = yearlist;
        L_xAxis.sort();
        $.each(ret, function (i, item) {
            var current_item = item;
            var current_data = [];
            $.each(current_item, function (i, zitem) {
                if (zitem["数值"] != null) {
                    //保留两位小数字
                    zitem["数值"] = Math.round(zitem["数值"] * 100) / 100;
                    if (MaxData < zitem["数值"])
                    { MaxData = zitem["数值"] }
                    current_data.push(zitem["数值"]);
                } else {
                    current_data.push('-');
                }
            });
            if (L_legend.length <= ratelength) {
                var l_data = {
                    name: item[0]["指标名称"], 'yAxisIndex': 0, type: 'line', itemStyle: {
                        normal: {
                            color: env.dic.get(parseInt(Math.random() * 4) + 1), label: { show: true }, barBorderRadius: 150
                        }, emphasis: {
                            barBorderRadius: 150
                        }
                    }, data: current_data
                }
            } else if (item[0]["指标名称"].indexOf("%") > 0 || item[0]["指标名称"].indexOf("‰") > 0) {
                var l_data = {
                    name: item[0]["指标名称"], 'yAxisIndex': 1, type: 'line', itemStyle: {  // 'yAxisIndex': 1  y轴向右看齐  type: 'line' 折线图
                        normal: {
                            color: env.dic.get(parseInt(Math.random() * 4) + 1), label: { show: true }
                        }
                    }, data: current_data
                }
            } else {
                var l_data = {
                    name: item[0]["指标名称"], 'yAxisIndex': 0, type: 'bar', itemStyle: {  //'yAxisIndex': 0   y 轴向左看齐  type: 'bar' 柱状图
                        normal: {
                            color: env.dic.get(parseInt(Math.random() * 4) + 1), label: { show: true }, barBorderRadius: 150          //env.dic.get(parseInt(Math.random() * 4) + 1)   这里是我自己写的一个方法 配置颜色 这里可以写具体的rgb颜色值
                        }
                    }, data: current_data
                }
            }
            L_series.push(l_data);
        });
        //alert(L_series);
        //alert(JSON2.stringify(L_xAxis));
       //alert(JSON2.stringify(L_series)); //调试的时候 遇到错误可以讲对象原型打印出来 看到他的结构
        var option = {
            title: {
                text: '全国卫生统计各省市',
                subtext: '统计数据',
                x: 0,
                y: 0
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: L_legend
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: { show: true, type: ['line', 'bar'] },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            grid: { y: 70, y2: 30, x2: 20 },
            xAxis: [
                 {
                     type: 'category',
                     data: L_xAxis
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: { formatter: '{value} ' },
                    name: ss,
                    max: MaxData * 3 / 2   //这里是取得所有数据中最大的一个值,然后用黄金比例设置y轴的高度,是图表展示的好看一些
                }, {
                    type: 'value',
                    axisLabel: { formatter: '{value} ' },
                    name: "百分比%"
                }
            ],
            series: L_series
        };
        return option;
    }

echart图表展示数据-简单的柱状图的更多相关文章

  1. 【Leafletjs】7.结合echart图表展示信息

    1.popup中添加图表信息 //定义marker var marker = L.marker(val.location).addTo(map); var content = '<div sty ...

  2. 假期学习【十】首都之窗百姓信件JavaWweb+Echarts图表展示

    今天主要对昨天爬取的数据进行处理,处理后用Echart图表展示, 效果如下:

  3. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  4. highcharts 图表库的简单使用

    Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...

  5. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

  6. echart 图表 在.net中生成图片的方法

    经过中午近两个小时的努力,终于可以实现了:echart 图表 在.net中生成图片 以下源代码: 前台页面: <!DOCTYPE html><html><head> ...

  7. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  8. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  9. Highcharts创建一个简单的柱状图

    新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了. 1.创建div容器 在页面的 body部分创建一个div,并指定div 的 id,高度和宽度 ...

随机推荐

  1. centos7 gearmand-1.1.15打包rpm

    wget https://github.com/gearman/gearmand/releases/download/1.1.15/gearmand-1.1.15.tar.gz -O /root/rp ...

  2. Linux 下安装使用 oh-my-zsh

    Ubuntu 下安装 oh-my-zsh 安装 zsh sudo apt install zsh 安装 git(如果你的系统没有自带的话) sudo apt install git 安装 oh-my- ...

  3. outlook添加邮箱账户时,测试成功,下一步显示请求失败

    今天在给公司同事添加邮箱账户时,全部设置正常,测试也成功了,但是点击下一步时,出现了请求失败的提示.     1.  看到这个提示,我首先重启了一下outlook,发现进去添加还是不行  2.重启了电 ...

  4. simotion读写CF卡,保存/读取变量

    simotion读写CF卡功能 1 使用西门子的Simotion运动控制器时,有时需要用到 读/写 CF卡的功能.主要来自以下几个方面的需求. 1)用户数据量较大,可保持(retain)存储区的容量不 ...

  5. AFNetworking 使用总结 (用法+JSON解析

    AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其他方法为基础的. 下面这个例子是用来处理json请求的: NSURL *url =  ...

  6. SQL语句关于时间的查询小心得,希望大家给点意见

    完全使用时间函数去搞定查询日期,之前写的可能有些问题,现在删了修正一下 本月记录: SELECT * FROM 表 WHERE datediff(month,[dateadd],getdate())= ...

  7. 使用selenium 检测js报错

    背景:接到一个需求,想检测页面是否能检测js报错,何为js报错,如下图所示,在控制台中,使用console,如果有js报错,就会出现错误 如何检测,简单版操作,打开一个url,使用manage获取浏览 ...

  8. 通过ODBC接口访问人大金仓数据库

      国产化软件和国产化芯片的窘境一样,一方面市场已经存在性能优越的同类软件,成本很低,但小众的国产化软件不仅需要高价买入版权,并且软件开发维护成本高:另一方面,国产软件目前普遍难用,性能不稳定,Bug ...

  9. 【P3398]】仓鼠找sugar

    暴力lca 题目 有一种情况肯定不行 较深得lca深度比浅的两个点还深,直接不行 如果可能存在解 则解一定是介中情况 较深的lca一定在另一个lca路径上. 判读呢? 就是用深的lca和浅的lca的两 ...

  10. C# 命名空间与语句

    C#采用命名空间(namespace)来组织程序.命名空间可以嵌套.using指示符可以用来简化命名空间类型的引用.using指示符有两种用法."using System;"语句可 ...