asp.net+echarts2.0线状态柱状图联动示例

好久没有写echarts的文章了，主要是一直以来的项目没有用到echarts的。在最近的一个项目中又用到了echarts，因为还得考虑echarts2.0最新的报表样式，所以采用了echarts2.0，支持地图、变化瀑布图等等。今天先分享一个线状态和柱状图联动的例子。

效果图：

 

当点击月份的时候，出现第一个报表数据，点击月份的每一个节点，出现下面按照地区分类的柱状图，我们就成为A报表和B报表吧。

下面一步一步的贴出代码和说明

1、首先是有数据，我定义了A报表的3个数据：用户总数、用户认证总数、以及X轴的数据。同时每个日期对应一组城市数据，我采用数组的方式存放。

请看一下实体：
public partial class MonthWeekCity
    {
      /// <summary>
      /// 月份日期
      /// </summary>
        public DateTime  MonthDate { get; set; }
      /// <summary>
      /// 描述。为月  或者周几 周几
      /// </summary>
        public string  DateText { get; set; }
      /// <summary>
      /// 总量
      /// </summary>
        public int AllCount { get; set; }
      /// <summary>
      /// 认证总量
      /// </summary>
        public int AuthCount { get; set; }
      /// <summary>
      /// 该时间内的城市数据列表
      /// </summary>
        public List<CityData> CityList { get; set; }
    }
    public partial class CityData
  {
      public City Cityinfo { get; set; }
      public int AllCount { get; set; }
      public int AuthCount { get; set; }
  }
然后我通过一般处理程序ashx返回数据，我这个数据是从数据库取的，大家可以自行修改：

返回数据集合：

 private List<MonthWeekCity> GetMonthList()
    {
        List<MonthWeekCity> list = new List<MonthWeekCity>();
        DateTime date = CheckResponse.GetDateTimeResponse("dt");
        ShopStay ds = new ShopStay();
        try
        {
           IAnalysisService APService = KtContainer.Instance.Resolve<IAnalysisService>();
           //本月第一天时间     
           DateTime dt_First = date.AddDays(1 - (date.Day));
           //获得某年某月的天数   
           int year = date.Date.Year;
           int month = date.Date.Month;
           int dayCount = DateTime.DaysInMonth(year, month);
            
           DateTime dt_Last = dt_First.AddDays(dayCount - 1);
            List<Tb_Statistic> listcity = new List<Tb_Statistic>();
            listcity = APService.GetCityDayCount(dt_First, dt_Last, 0);
            for (int i = 0; i <= dayCount; i++)
            {
                MonthWeekCity oneday = new MonthWeekCity();
                oneday.MonthDate = dt_First.AddDays(i);
                oneday.CityList = new List<CityData>();
                oneday.AuthCount = 0;
                oneday.AllCount = 0;
  
                list.Add(oneday);
            }
                foreach (Tb_Statistic cd in listcity)
                {
MonthWeekCity temp = list.SingleOrDefault(a => a.MonthDate == cd.StatisticDate);
if (temp == null)
{
               
     
           
}
else
{
    temp.AuthCount = temp.AuthCount + cd.AuthenNum;
    temp.AllCount = temp.AllCount + cd.AllNum;
    temp.CityList.Add(new CityData { AllCount = cd.AllNum, AuthCount = cd.AuthenNum, Cityinfo = cd.city });
}
                }
            return list;
        }
2、html结构

<%@ Page Title="" Language="C#" MasterPageFile="~/Content.master" AutoEventWireup="true" CodeFile="MonthWeekGroup.aspx.cs" Inherits="Page_NewStat_MonthWeekGroup" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="content">
        <!-- content starts -->
        <div>
            <ul class="breadcrumb">
                <li>首页 <span class="divider">/</span>
                </li>
                <li><a href="#">活跃用户分析</a> </li>
            </ul>
        </div>
        <div class="row-fluid sortable">
            <div class="box-content">
                <fieldset>
<div class="control-group ">
    <div class="controls">
        选择月份：<input type="text" style="width:100px;" id="SDate"
             onfocus="WdatePicker({dateFmt:'yyyy年MM月',readOnly:true,onpicked:btnGetData,maxDate:'%yyyy-%MM'})" />
 
        <span id="divlast">
        </span>
    </div>
</div>
                </fieldset>
                <div class="clearfix"></div>
                   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="mainmonth" style="height:400px"></div>
             <div id="mainmonthcity" style="height:300px"></div>
            </div>
                <div class="box-content">
                <fieldset>
<div class="control-group ">
    <div class="controls">
        选择周：
        <input type="text" style="width:100px;" id="SDate2"
             onfocus="WdatePicker({dateFmt:'yyyy年WW周',readOnly:true,onpicked:btnGetData,maxDate:'%yyyy-%WW'})" />
         
    </div>
</div>
                </fieldset>
                <div class="clearfix"></div>
                <div id="divTiShi" style=" display:none;">正在统计请稍后......</div>
                   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="mainweek" style="height:400px"></div>
             <div id="mainweekcity" style="height:300px"></div>
            </div>
            
        <!--/row-->
        <!-- content ends -->
        </div>
    </div>
    <!--/#content.span10-->
    <script src="../../js/echart2.2.1/build/dist/echarts.js"></script>
    <script src="../../BusinessJs/NewStat/MonthWeek.js"></script>
</asp:Content>
            <div id="mainmonth" style="height:400px"></div>  A报表容器

             <div id="mainmonthcity" style="height:300px"></div> B报表容器

    <script src="../../js/echart2.2.1/build/dist/echarts.js"></script> 这段是引用echarts。这是echarts2.0中最新的一种方式。

http://echarts.baidu.com/doc/doc.html#引入ECharts2 

3、关键JS代码：

题外话：生成最近的日期

function LoadLastMonth() {
    var html = "";
    var thismonth = new Date();
    for (var i = 1;i < 10; i++) {
        var months = thismonth.DateAdd('m', -i);
        html = html + "&nbsp;&nbsp;&nbsp;&nbsp; <a onclick='ClickGetData(\"" + months.Format("yyyy年MM月") + "\");'>" + months.Format("yyyy年MM月") + "</a>";
    }
    $("#divlast").html(html);
}
js日期的格式化请看:[Javacript对Date日期的格式化及转换]

配置参数：

// 路径配置
require.config({
    paths: {
        echarts: '../../js/echart2.2.1/build/dist'
    }
});

js ajax获取数据，并绑定A报表，绑定A报表的时候设置点击事件，因为代码不好完全分离开写，我就全贴出来

var staticsdt;
$(document).ready(function () {
    $("#SDate").val((new Date()).Format("yyyy年MM月"));
    LoadLastMonth();
    btnGetData();
});
function LoadLastMonth() {
    var html = "";
    var thismonth = new Date();
    for (var i = 1;i < 10; i++) {
        var months = thismonth.DateAdd('m', -i);
        html = html + "&nbsp;&nbsp;&nbsp;&nbsp; <a onclick='ClickGetData(\"" + months.Format("yyyy年MM月") + "\");'>" + months.Format("yyyy年MM月") + "</a>";
    }
    $("#divlast").html(html);
}
function ClickGetData(datee) {
    $("#SDate").val(datee);
    btnGetData();
}
function btnGetData() {
    
    staticsdt = $("#SDate").val();
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
        ],
       showdatacllback
    );
}
var echarts;
function showdatacllback(ec) {
    echarts = ec;
    GetDetailData(ec);
}
var MonthData;
function GetDetailData(ec) {
    var AjaxUrl = "../../Service/MonthWeekStat.ashx";
      
    if (staticsdt.length == 0) {
        alert("请选择月份进行统计"); return;
    }
    $.ajax({
        type: "post",
        dataType: 'json',
        url: AjaxUrl,
        data: {
            dt: staticsdt,
            oper: "month"
        },
        success: function (data, textStatus) {
            if (data != null) {
                var customfre = eval(data);
                //设置点击事件
                var ecConfig = require('echarts/config');
                if (customfre != null && customfre != "undefined") {
        
var Xdata = new Array();
var MonthAllCount = new Array();
var MonthRenZhengCount = new Array();
var myChart = ec.init(document.getElementById('mainmonth'));
customfre.sort();
$.each(customfre, function (i, val) {
    Xdata.push((new Date(val.MonthDate)).Format("yyyy-MM-dd"));
    MonthRenZhengCount.push(val.AuthCount);
    MonthAllCount.push(val.AllCount);
});

MonthData = customfre;
//oneday.MonthDate = cd.StatisticDate;
//oneday.CityList = new List<CityData>();
//oneday.AuthCount = oneday.AuthCount + cd.AuthenNum;
//oneday.AllCount = oneday.AllCount + cd.AllNum;
//oneday.CityList.Add(new CityData {  AllCount=cd.AllNum, AuthCount=cd.AuthenNum, Cityinfo=cd.city});
//---------------------------------------------------------------------------------------------------------------
           
var option = {
    title: {
        text: staticsdt + '--月分析',
        subtext: '活跃用户'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['用户总数', '用户认证总数']
    },
    toolbox: {
        show: false,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: Xdata
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series: [
        {
            name: '用户总数',
            type: 'line',
            data: MonthAllCount,
            markLine: {
                data: [
{ type: 'average', name: '平均值' }
                ]
            }
        },
        {
            name: '用户认证总数',
            type: 'line',
            data: MonthRenZhengCount,
            markLine: {
                data: [
{ type: 'average', name: '平均值' }
                ]
            }
        }
    ]
};
myChart.setOption(option);
myChart.on(ecConfig.EVENT.CLICK, function (param) { 
    var selected = param;
    var date = selected.name;
    OpenPage(date);
})
//---------------------------------------------------------------------------------------------------------------
                }
                else {
alert("加载数据失败！"); return;
                }
            }
        },
        complete: function (XMLHttpRequest, textStatus) {
        },
        error: function (e) {
            alert("加载数据失败！"); return;
        }
    });
}
function OpenPage(datet) {
    SelectedMonthDate = datet;
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
       showdatacllback2
    );
}
var SelectedMonthDate;
function showdatacllback2(ec) {    
    var onday = null;
    $.each(MonthData, function (i, val) {
        if ((new Date(val.MonthDate)).Format("yyyy-MM-dd") == SelectedMonthDate) {
            onday = val;
        }
    });
    if (onday == null) { return; }
    var Xdata = new Array();
    var MonthAllCount = new Array();
    var MonthRenZhengCount = new Array();
    var myChart = ec.init(document.getElementById('mainmonthcity'));
    onday.CityList.sort();
    $.each(onday.CityList, function (i, val) {
        Xdata.push(val.Cityinfo.Name);
        MonthRenZhengCount.push(val.AuthCount);
        MonthAllCount.push(val.AllCount);
    });
    var option = {
        title: {
            text: SelectedMonthDate + '--按照城市',
            subtext: '城市用户'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['用户总数', '认证用户数']
        },
        toolbox: {
            show: false,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: Xdata
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '用户总数',
                type: 'bar', stack: '认证用户数',
                data: MonthAllCount
            },
            {
                name: '认证用户数',
                type: 'bar',
                stack: '用户总数',
                data: MonthRenZhengCount
            }
        ]
    };
    myChart.setOption(option);
    //myChart.on(ecConfig.EVENT.CLICK, function (param) {
    //    var selected = param;
    //    var date = selected.name;
    //    OpenPage(date);
    //})
}
1
 
绑定echarts的事件，必须要引用config文件：
var ecConfig = require('echarts/config');
然后根据你要的事件，进行处理：

 
myChart.on(ecConfig.EVENT.CLICK, function (param) { 
    var selected = param;
    var date = selected.name;
    OpenPage(date);
})

 

时间： 2024-09-11 21:43:24

asp.net+echarts2.0线状态柱状图联动示例的相关文章

ASP.NET 2.0 页面状态持续程序

asp.net|程序|页面 ASP.NET 控件的开发人员利用 ViewState 和控件状态来保持浏览器发出的各请求之间的状态信息.通常,该信息作为由页面呈现的 HTML 标记中的隐藏字段传送给客户端.然后,该页面状态作为下一个窗体提交的一部分传回服务器并还原给控件或页面.即使浏览器使用 HTTP 协议(该协议定义为无状态),但利用临时存储状态信息的功能,控件的开发人员能够轻松地提供更丰富的应用程序体验. ASP.NET 2.0 允许您修改临时保持页面状态的位置和方式.在某些情况下,避免在客户

ASP.NET 2.0页面状态持续程序

ASP.NET 控件的开发人员利用 ViewState 和控件状态来保持浏览器发出的各 请求之间的状态信息.通常,该信息作为由页面呈现的 HTML 标记中的隐藏字段 传送给客户端.然后,该页面状态作为下一个窗体提交的一部分传回服务器并还 原给控件或页面.即使浏览器使用 HTTP 协议(该协议定义为无状态),但利用临 时存储状态信息的功能,控件的开发人员能够轻松地提供更丰富的应用程序体验 . ASP.NET 2.0 允许您修改临时保持页面状态的位置和方式.在某些情况下, 避免在客户端与服务器之间往

Asp.net 2.0 Treeview无限级无刷新示例

本文给出了使用Asp.net 2.0的Treeview实现无限级无刷新的示例源代码,供大家参考! <%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dt

Asp.net 2.0 Treeview 无限级无刷新示例

asp.net|treeview|示例|刷新|无刷新 <%@ Page Language="C#" %><%@ Import Namespace="System.IO" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script

ASP.NET 2.0 HttpHandler实现生成图片验证码(示例代码下载)

asp.net|示例|下载|验证码 学习整理了一下(一).功能       用HttpHandler实现图片验证码       (二).代码如下  1. 处理程序文件 ValidateImageHandler.ashx代码如下  1 <%@ WebHandler Language="C#" Class="ValidateImageHandler" %> 2  3 using System; 4 using System.Web; 5 using Syst

ASP.NET 2.0 和数据绑定控件：新的角度，新的做法

asp.net|控件|数据 适用于:Microsoft ASP.NET 1.xMicrosoft ASP.NET 2.0 摘要:了解 ASP.NET 2.0 中的用于生成自定义数据绑定控件的工具是如何演变的.   本页内容 为什么需要新的数据源模型  ASP.NET 2.0 中的数据绑定控件  分析要点  数据绑定机制   列表控件  HeadlineList 示例控件  管理自定义集合  关于复合控件的一点讨论  小结 为什么需要新的数据源模型数据绑定是开发人员在 ASP.NET 1.x 中发

利用ASP.NET 2.0的客户端回调功能制作下拉框无限级联动

asp.net|客户端|下拉 记得以前做asp的时候,常会碰到下拉框多级联动,比如说在注册的时候,需要选择省和城市,这就需要二级联动,那个时候一个普遍的做法就是利用javascript脚本来实现,先把数据从数据库中读取出来,放到javascript的数组中,在下拉框的onchange事件触发时,就可以直接从javascript的数组中读取想要的数据.后来在asp.net 1.0中开发时,这种方法也通用,但如果要多级的话,有一个很大的缺点,就是它需要把数据一次性全部读到javascript的数组中

ASP.NET 2.0“插件”说

asp.net ASP.NET 2.0"插件"说 在 ASP.NET 2.0的新特性中,最"耀眼"的也就是母版页.主题/皮肤.成员资格和角色管理.用户自定义属性以及 WebPart之页面个性化设置.除了前两项,其余都是建立在***Provider提供的服务之上. 这些Provider(类)在微软文档中一般是这样定义的:为...提供...服务,似乎与一般的控件类等一样,拿来用就是了.其实这些Provider(类)已经十分强烈地暗示微软.NET的一个发展方向,这个方向就

[转]利用ASP.NET 2.0创建自定义Web控件(2)

原址:http://hi.baidu.com/sjbh/blog/item/5a8298454403a321cffca39c.html   如何生成的? Render() 方法基本上控制着 WebControl 的整个输出.默认情况下,Render() 方法实际上会依次调用 RenderBeginTag().RenderContents() 以及 RenderEndTag().尽管在 ASP.NET 1.x 中调用结构并未变化,但由于该呈现模型,修改这些调用的影响却发生了变化. 您可以覆盖 Re