专栏首页ASP.NET MVC5 后台权限管理系统ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts

ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts

ECharts 特性介绍

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

丰富的图表类型

ECharts 提供了常规的折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。

你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。

前言:

居然在大百度搜索不到ASP.NET MVC与ECharts的结合使用!好吧....

ECharts提供健全的帮助文档,本节只演示其JSON的格式,MVC返回符合EChart适合的格式来动态显示报表的展现。

ECharts的Json格式对于初学者来说是比较复杂的。其中包括多种形式,我们可以从下面Json格式看出,这只是一个简单的柱状图

但是复杂的图形,其中几个变化都离不开这种格式

var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

开始

1.下载插件

我这里下载的是完整的组件JS,下载成功并复制到项目下

或者你需要更多的主题,那么需要下载CSS

2.入门

使用必须引入下载的JS与主题样式(除非你不想要主题)

<script src="@Url.Content("~/Scripts/echarts.min.js")"></script>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main"></div>

报表将展现在ID为main的DIV内

优先初始化报表的对象,写在$(function(){ });内

 var myChart = echarts.init(document.getElementById('main'));

3.柱状图

我这里演示商品的售价和成本价的对比!代码可以下载58节代码来一起制作58节(包含了一张商品价格表),或者到文章结尾直接下载本节代码!

利用EasyUI分页动态显示。当用户点击下一页时候刷新ECharts数据

所以我们必须在Datagrid加载成功时进行刷新

添加EasyUI加载成功的方法

 onLoadSuccess: function (data) {
                var grid = $('#List');
                var options = grid.datagrid('options');
                var m_page = options.pageNumber;
                var m_rows = options.pageSize;
                var m_sort = options.sortName;
                var m_order = options.sortOrder
                $.post("@Url.Action("GetOptionByBarChart")", { page: m_page, rows: m_rows, order: m_order, sort: m_sort }, function (option) {
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                });
            },

获得当前页码,页数,排序等属性到后台数据库查询数据

hmyChart.setOption(option); 加载报表从后台获得的Json数据

根据ECahrts的Json格式获得对应的Json数据

包含的data其实是个List,所以们必须在返回的数据中序列化其数据格式,当然你返回的数据必须都包含以上属性

后台方法:

 public JsonResult GetOptionByBarChart(GridPager pager, string queryStr)
        {
            List<Spl_ProductModel> list = m_BLL.GetList(ref pager, queryStr);
            List<decimal?> costPrice = new List<decimal?>();
            list.ForEach(a => costPrice.Add(a.CostPrice));
            List<decimal?> price = new List<decimal?>();
            list.ForEach(a => price.Add(a.Price));
            List<string> names= new List<string>();
            list.ForEach(a=> names.Add(a. Name));
            List<ChartSeriesModel> seriesList = new List<ChartSeriesModel>();
            ChartSeriesModel series1 = new ChartSeriesModel() {
                name = "成本价",
                type = "bar",
                data = costPrice
            };
            ChartSeriesModel series2 = new ChartSeriesModel()
            {
                name = "零售价",
                type = "bar",
                data = price
            };
            seriesList.Add(series1);
            seriesList.Add(series2);
            var option= new
            {
                title= new{text= "成本价零售价对照表" }, 
                tooltip= new{},
                legend = new { data = "成本价零售价对照表" },
                xAxis= new{ data= names},
                yAxis= new{},
                series = seriesList
            };
            return Json(option);
        }

4.运行

数据正确我们直接得出效果

5.总结

本节没有过多的解析,大家下载源码一看便知

其实其他报表大同小异(如:hightcharts),我们只要返回了其正确的JSon格式,就能展示报表

同理我们可以看到饼图的数据

参考资料:http://echarts.baidu.com/demo.html

官方网站:http://echarts.baidu.com/index.html

API文档:http://echarts.baidu.com/api.html#echarts

本节示例代码下载   访问密码 69fd

代码中修改Index.cshtml代码:

@{
    ViewBag.Title = "主页";
    Layout = "~/Views/Shared/_Index_Layout.cshtml";

}
<script src="~/Scripts/echarts.min.js"></script>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main"></div>


<table id="List"></table>
<div id="modalwindow" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>
<script type="text/javascript">
    $(function () {
        $('#List').datagrid({
            url: '@Url.Action("GetList")',
            width: SetGridWidthSub(10),
            methord: 'post',
            height: $(window).height()/2-30,
            fitColumns: true,
            sortName: 'CreateTime',
            sortOrder: 'desc',
            idField: 'Id',
            pageSize: 15,
            pageList: [15, 20, 30, 40, 50],
            pagination: true,
            striped: true, //奇偶行是否区分
            singleSelect: true,//单选模式
            remoteFilter:true,
            //rownumbers: true,//行号
            onLoadSuccess: function (data) {
                var grid = $('#List');
                var options = grid.datagrid('options');
                var m_page = options.pageNumber;
                var m_rows = options.pageSize;
                var m_sort = options.sortName;
                var m_order = options.sortOrder
                $.post("@Url.Action("GetOptionByBarChart")", { page: m_page, rows: m_rows, order: m_order, sort: m_sort }, function (option) {
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                });
            },
            columns: [[
                { field: 'Id', title: 'Id', width: 80,hidden:true},
                { field: 'Name', title: '产品名称', width: 80, sortable: true },
                { field: 'Code', title: '产品代码', width: 80, sortable: true },
                { field: 'Price', title: '产品价格', width: 80, sortable: true },
                { field: 'Color', title: '产品颜色', width: 80, sortable: true },
                { field: 'Number', title: '产品数量', width: 80, sortable: true },
                {
                    field: 'CategoryId', title: '类别', width: 80, sortable: true, formatter: function (value, row, index) {
                        return row.ProductCategory;
                    }
                },
                { field: 'ProductCategory', title: '类别', width: 80, sortable: true,hidden:true },
                { field: 'CreateTime', title: 'CreateTime', width: 80, sortable: true },
                { field: 'CreateBy', title: 'CreateBy', width: 80, sortable: true }
            ]]
        });

        // 基于准备好的dom,初始化echarts实例
        $("#main").width($(window).width()-10).height($(window).height() / 2 - 10);
        var myChart = echarts.init(document.getElementById('main'));

    });
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ASP.NET MVC5+EF6+EasyUI 后台管理系统--任务调度系统解析

    1.任务主界面。任务可以被挂起,启动,和删除。来自著名Quartz扩展 2.任务可以是执行的SQL命令,存储过程,或者是一个后台方法 3.极其复杂的调度任务,循...

    用户1149182
  • ASP.NET MVC5+EF6+EasyUI 后台管理系统(39)-在线人数统计探讨

    基于web的网站在线统计一直处于不是很精准的状态!基本上没有一种方法可以确实的统计在线用户! Discuz!NT 在线用户功能算是做得比较好的!参考资料 他的原...

    用户1149182
  • .Net 转战 Android 4.4 日常笔记(10)--PullToRefresh下拉刷新使用

    这里我们使用一个开源的库叫:PullToRefresh 开源地址:https://github.com/chenyoca/pull-to-refresh 下载地...

    用户1149182
  • day21 02 包的进阶

           根据day21 01 包的初识,建立的glance包,直接import glance后通过“包点包。。点方法”是不能执行所要的方法的,必须通过在一...

    py3study
  • day21 01 包的初识

           包:把解决一类问题的模块放在同一个文件夹里面-----包(一个包里面通常会含有_init_.py文件(python2里面必须有),但是后面的就没有...

    py3study
  • 网络犯罪分子采取新策略,勒索软件增长超118%

    McAfee Labs在2019第一季度的最新威胁报告中称,平均每分钟在网络空间发现504个新的威胁,而伴随着犯罪分子采取新的策略和代码创新,勒索软件正在不断复...

    FB客服
  • Scalaz(30)- Free :Natural Tranformation ~> - map higher kinded types for free

        当我们需要定义一些对应高阶类型进行相互类型转换的操作函数时,我们发现scala语言并不提供能定义这种函数的支持。举例来说:如果我们希望定义一个函数把对于...

    用户1150956
  • 【编程工具】sublime使用技巧

    ★ 编程工具 ★ Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器...

    程序员互动联盟
  • slim.l2_regularizer()

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    于小勇
  • 我用了7年时间成长为阿里Java架构师,你呢?

    合格的程序员对于明确分配的任务会完成的很好,但是大部分情况下“架构”这个词意味着架构师并不会涉及太多细节,架构图和代码实现之间总还是有些距离,你无法保证所有人都...

    用户1257215

扫码关注云+社区

领取腾讯云代金券