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

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

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

最近在echarts群里,有很多同学问到怎么使用echarts,以及结合动态语言(java、asp.net)等的例子。

今天有空,把项目中用到的几个报表图形拿出来分享一下。

主要是饼图和柱状图,结合点击事件获取点击的数据。

直接上代码:demo下载百度网盘:http://pan.baidu.com/s/1pJNk275

效果图:

获取数据后效果

点击饼图获取到数据的效果:

html代码:

放2个div,取个id就行。引用写好的js。

 <div>
    	<div class="case_type">
   <div class="pie_chart_name">测试类型</div>
  <div id="div_pieCategory" style="height:210px;
   width: 300px; float: left;" class="pie_chart_img">
     </div>
	  </div>
           <div class="case_date">                          
            <div id="div_bar" style="height:210px; width: 300px; float: left;">
                      </div>
                    </div>
    </div>
               <input id="hid_category" type="hidden" value="" />
               <input id="hid_state" type="hidden" value="" />
              <input id="hid_date" type="hidden" value="" />   
    </form>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/esl.js"></script>
    <script src="BusinessJs/echarts.js"></script>

echarts代码:

1、在BusinessJs/echarts.js中引用echarts及zrender:

require.config({
    packages: [
      {
          name: 'echarts',
          location: './echarts/src',
          main: 'echarts'
      },
      {
          name: 'zrender',
          location: './zrender/src',// zrender与echarts在同一级目录
          main: 'zrender'
      }
    ]
});
require(
    [
        'echarts',
        'echarts/chart/bar',
        'echarts/chart/pie'
    ],
    function (ec) {
        var myChart_Category = ec.init(document.getElementById('div_pieCategory')); 
        var myChart_Bar = ec.init(document.getElementById('div_bar'));
        
        SetTestStatisticsByCategory(ec, myChart_Category); 
        SetTestStatisticsByBeginTime(ec, myChart_Bar);
        //设置点击事件
        var ecConfig = require('echarts/config');
        myChart_Category.on(ecConfig.EVENT.PIE_SELECTED, function (param) {
            var selected = param.selected;
            //debugger;
            var serie
            serie = optionpie_category.series[0];
            if (jQuery.inArray(true, selected[0]) > -1) {
                for (var i = 0; i < serie.data.length; i++) {
                    if (selected[0][i]) {
                        $("#hid_category").val(serie.data[i].name);
                        GetTestList(serie.data[i].name);
                    }
                }
            }
            else {
                $("#hid_category").val("");
            }
          
        })
         
        myChart_Bar.on(ecConfig.EVENT.CLICK, function (param) {
            var selected = param;
            var xAxis;
            xAxis = optionpie_bar.xAxis[selected.seriesIndex];
            for (var i = 0; i < xAxis.data.length; i++) {
                if (i == selected.dataIndex) {
                    if ($("#hid_date").val() != xAxis.data[i]) {
                        $("#hid_date").val(xAxis.data[i]);
                    } else {
                        $("#hid_date").val("");
                    }
                    GetTestList(xAxis.data[i]);
                }
            }
        })
    }
)

2、使用jquery ajax获取数据并绑定:

//获取测试类型统计数据
function GetTestStatisticsByCategory() {
    $.ajax({
        type: "post",
        dataType: "text", traditional: true,
        data: { oper: "bycategory" },
        url: AjaxUrl,
        async: false,//表示同步执行
        success: function (data, textStatus) {
            if (data != null) {
                 
                if (data) {
                    datapie_category = eval('(' + data + ')');
                }
                else {
                    alert("获取测试类型统计数据失败!");
                }
            }
        },
        complete: function (XMLHttpRequest, textStatus) { },
        error: function (e) {
             
            alert("获取测试类型统计数据失败,请刷新页面重新加载!");
        }
    });
}

3、ashx后台代码:

组织好字符串返回就行。完全按照这个格式来。

public class test : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string Test = CustomResponse.GetResponse("lc");
            string categroy = CustomResponse.GetResponse("cl");
            string oper = CustomResponse.GetResponse("oper");
            string condition = CustomResponse.GetResponse("cd");
            string id = CustomResponse.GetResponse("id");
            switch (oper)
            {
                
                case "bycategory":
                    GetTestStatisticsByCategory(context);//按照测试类型统计
                    break;
                case "bystate":
                    GetTestStatisticsByState(context);//按照测试状态统计
                    break;
                case "bybegintime":
                    GetTestStatisticsByBeginTime(context);//按照月份统计数据
                    break;
                default:  
                    break;
            }
        }
        /// <summary>
        /// 按照测试类型统计
        /// </summary>
        /// <param name="context"></param>
        private void GetTestStatisticsByCategory(HttpContext context)
        {
            string returnvalue = "[{ value:33,name:'其他'},
            { value:52,name:'测试类型1'},{ value:36,name:'测试类型12'},
            { value:31,name:'测试类型222121'}]";
       
            context.htm = htm&(returnvalue);
            context.Response.End();
        }
        /// <summary>
        /// 按照测试状态统计
        /// </summary>
        /// <param name="context"></param>
        private void GetTestStatisticsByState(HttpContext context)
        {
            string returnvalue = "";
           
            context.htm = htm&(returnvalue);
            context.Response.End();
        }
        /// <summary>
        /// 按照月份统计
        /// </summary>
        /// <param name="context"></param>
        private void GetTestStatisticsByBeginTime(HttpContext context)
        { 
            string returnvalue = "['2014-1','2014-2','2014-3','2013-4',
            '2014-4','2013-5'];[2,10,25,1,8,1]";
            context.htm = htm&(returnvalue);
            context.Response.End();
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }


转发注明:IT分享  http://www.suchso.com 

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

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:suchso@vip.qq.com

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

echarts教程系列
本月最热文章

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

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