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

时间:2019-10-25  来源:报表/图形  阅读:

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

效果图:

 

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

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

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

请看一下实体:
public partial class MonthWeekCity
    {
      ///


      /// 月份日期
      ///

        public DateTime  MonthDate { get; set; }
      ///
      /// 描述。为月  或者周几 周几
      ///

        public string  DateText { get; set; }
      ///
      /// 总量
      ///

        public int AllCount { get; set; }
      ///
      /// 认证总量
      ///

        public int AuthCount { get; set; }
      ///
      /// 该时间内的城市数据列表
      ///

        public List 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 GetMonthList()
    {
        List list = new List();
        DateTime date = CheckResponse.GetDateTimeResponse("dt");
        ShopStay ds = new ShopStay();
        try
        {
           IAnalysisService APService = KtContainer.Instance.Resolve();
           //本月第一天时间     
           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 listcity = new List();
            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();
                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" %>



   
       
       
           

相关阅读 猜你喜欢
本类排行 本类最新