现在位置首页 / 项目实战 /正文

echarts教程-asp.net+ashx实现堆积柱状图说明及demo下载

作者: IT小兵 | 2014年4月29日| 热度:℃ | 评论: |参与:

从基础echarts到现在在项目中实际应用起来,已经很长时间了。今天分享一个项目完成对比效果的堆积柱状图demo。

先看图:

堆积柱状图实现斜线、对比、拖拽等效果。可以多个维度再现大数据。

Demo百度网盘下载地址:

http://pan.baidu.com/s/10A5Hk


本文知识点有:

1、jquery基本知识:参考[Jquery+asp.net 后台数据传到前台js进行解析的办法说明]

2、jquery插件编写:参考 [Jquery 自定义插件开发教程]

3、asp.net的一般处理程序   参考[Jquery+asp.net 后台数据传到前台js进行解析的办法说明

[aspx,ascx和ashx怎么使用及场景]

4、jquery/js中对象的处理  


流程:

1、数据由ashx提供,序列化好的数组字符串。

var datajs = "
{
    "tooltip": {
        "show": true, 
        "axisPointer": {
            "type": "shadow"
        }, 
        "trigger": "item"
    }, 
    "title": {
        "text": "测试分析", 
        "x": "right", 
        "y": "bottom"
    }, 
    "legend": {
        "data": [
            "测试2", 
            "测试1", 
            "测试3", 
            "测试44"
        ]
    }, 
    "series": [
        {
            "name": "测试2", 
            "type": "bar", 
            "itemStyle": {
                "barWidth": 40, 
                "normal": {
                    "label": {
                        "show": true, 
                        "position": "inside"
                    }
                }
            }, 
            "stack": "总数", 
            "data": [
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                14, 
                4, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2, 
                2
            ]
        }, 
        {
            "name": "测试1", 
            "type": "bar", 
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": true, 
                        "position": "inside"
                    }
                }
            }, 
            "stack": "总数", 
            "data": [
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                7, 
                2, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1, 
                1
            ]
        }, 
        {
            "name": "测试3", 
            "type": "bar", 
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": true, 
                        "position": "inside"
                    }
                }
            }, 
            "stack": "总数", 
            "data": [
                "-", 
                2, 
                1, 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-"
            ]
        }, 
        {
            "name": "测试44", 
            "type": "bar", 
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": true, 
                        "position": "inside"
                    }
                }
            }, 
            "stack": "总数", 
            "data": [
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                2, 
                1
            ]
        }
    ], 
    "xAxis": [
        {
            "type": "category", 
            "data": [
                "0", 
                "1", 
                "2", 
                "3", 
                "4", 
                "5", 
                "6", 
                "7", 
                "8", 
                "9", 
                "10", 
                "11", 
                "12", 
                "13", 
                "14", 
                "15", 
                "16", 
                "17", 
                "18", 
                "19", 
                "20", 
                "21", 
                "22", 
                "23"
            ]
        }
    ], 
    "yAxis": [
        {
            "type": "value"
        }
    ]}
";

上面的字符串我放在js中,方便修改。

2、自定义逻辑插件:jquery-time_analysis.js

完成参数的读取和返回,完成ashx地址的配置,echarts src、zrender src 的路径配置;

   
    $.fn.time_analysis.defaults = {
        query_url: 'test.ashx',
        echarts_path: './echarts/src',
        zrender_path: './zrender/src'
    };


完成事件绑定,鼠标点击支持;

 //定义图表对象
            require.config({
                packages: [{
                    name: 'echarts',
                    location: settings.echarts_path,
                    main: 'echarts'
                }, {
                    name: 'zrender',
                    location: settings.zrender_path,
                    main: 'zrender'
                }]
            });
            var option_data = _getOption(settings);
            $this.data('option', option_data);
            require(
              ['echarts', 'echarts/chart/bar'],
              function (ec) {
                  echarts = ec;
                  if (chart && chart.dispose) {
                      chart.dispose();
                  }
                  chart = echarts.init($this[0]);
                  chart.setOption(option_data);
                  //鼠标点击事件
                  ecConfig = require('echarts/config');
                  chart.on(ecConfig.EVENT.CLICK, _clickHandler);
                  window.onresize = chart.resize;
              });

关键代码:data对象是服务器端返回的字符串。

 function _getOption(settings) {
        var option = {};
        $.ajax({
            type: "post",
            dataType: "text",
            data: settings.query_param,
            async: false,
            url: settings.query_url,
            success: function (data) {
                
                if (data) { option = eval('(' + data+ ')'); }
            }
        });
        return option;
    };


 3、调用:

    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/esl.js"></script>
    <script src="BusinessJs/jquery-time_analysis.js"></script>
    <script>
        var query = { query_param: { oper: "bar", seId:1, mobile: "", queryTime: "", slot: 1 } };
        var legend_check = { message: 0, call: 0, power_on: 0, power_off: 0 };
        $(document).ready(function () {
            init();
        });
        function init() {
         
            $('#time_behavior_bar').time_analysis(query); 
        }
        var PhoneList = [];
        var Suspect = {};
        var MonthList = [];
        function _clickHandler(param) {
            var option = $('#time_behavior_bar').time_analysis('option');
            var relation_type;
            alert(param.seriesIndex + "  代表:" + option.series[param.seriesIndex].name + "  数据有:" + option.series[param.seriesIndex].data.length);
        }
    </script>

注意引用jquery.js、 esl.js;

对象说明:echarts会提供一个opertion的对象,这个对象在js中保存了和报表相关的所有东西。

  var option = $('#time_behavior_bar').time_analysis('option');

param.seriesIndex 是鼠标点击事件的对象,代表了点击那个legend。我们可以通过 option.series[param.seriesIndex]获取到这个对象。

 option.series[param.seriesIndex].name代表了测试1 测试2  这样的legend名称。其他大家可以再发挥。

系列教程:

[基于html5、js的超强报表控件Echarts系列教程(1)-与其他报表的区别和介绍]

[基于html5、js的超强报表控件Echarts系列教程(2)-使用及环境部署]

[基于html5、js的超强报表控件Echarts系列教程(3)--事件使用]

[Echarts asp.net+ashx项目部署及代码实例(附demo)]

[echarts教程-asp.net+ashx实现堆积柱状图说明及demo下载]

[ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发(1)]

[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件]

[ECharts--完善的人物关系图-连线点击事件/样式/标注文字及源代码]

[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条]



更多知识,请继续关注我的博客。









点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询