Echarts与.net后端动态交互

最新推荐文章于 2024-08-18 10:27:18 发布
最新推荐文章于 2024-08-18 10:27:18 发布
阅读量224 收藏
点赞数
文章标签： javascript 后端 ViewUI
原文链接：http://www.cnblogs.com/yixtx/p/9372244.html
版权

1.效果图

2.使用技术

　　@1.Echarts模块化引入开发。

　　官方地址：http://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts1

　　博主地址：https://blog.csdn.net/danielinbiti/article/details/44560075

　　@2 .net后端查询数据（oracle）到前端，前端解析

3.前端代码

@{
    ViewBag.Title = "tradecount";
}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    @Scripts.Render("~/Scripts/jquery-1.11.2-min.js")
    @Scripts.Render("~/Common/echarts/echarts.js")
    <style>
        .my_table {
            /*border-spacing: 0;
            border: solid 10px #257ad4;*/
            padding: 0;
            margin: 0;
            width: 94%;
            height: 100%;
            margin-top: 40px;
            margin-left: 50px;
            margin-right: 50px;
        }
    </style>
    <title>交易量</title>
</head>
<body>
    <div class="page-container">
        <table border="0" class="my_table">
            <colgroup style="width:50%"></colgroup>
            <colgroup style="width:50%"></colgroup>
            <tr>
                <td style="height:50%;border:solid 10px #fff;">
                    <div id="et_pie" style="width:100%;height:100%;"></div>
                </td>
                <td style="height:50%;border:solid 10px #fff;">
                    <div id="et_pie1" style="width:100%;height:100%;"></div>
                </td>
            </tr>
            <tr>
                <td style="height:50%;padding-top:10px;border:solid 10px #fff;">
                    <div id="et_bar" style="width:100%;height:100%;"></div>
                </td>
                <td style="height:50%;padding-top:10px;border:solid 10px #fff;">
                    <div id="et_line" style="width:100%;height:100%;"></div>
                </td>
            </tr>
        </table>
    </div>

    <script>
        $(function () {
            require.config({
                paths: {
                    echarts: '../Common/echarts/'

                }
            });

            require(
                [
                    'echarts',
                    'echarts/theme/macarons',
                    'echarts/chart/bar',
                    'echarts/chart/line',
                    'echarts/chart/pie'
                ], function (ec) {

                    var pieChart = ec.init(document.getElementById('et_pie'));
                    $.ajax({
                        url: '@Url.Action("TradeCount", "PersonalContract")',
                        type: 'post',
                        data: { type: "pie"} ,
                        async: true,
                        dataType: 'json',
                        success: function (result) {
                            //console.log(result);
                            var res = JSON.parse(result);
                            pieChart.setOption({
                                theme: "macarons",
                                title: {
                                    text: '当月交易情况',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    x: 'left',
                                    data: ['中介交易', '个人交易']
                                },

                                calculable: true,
                                series: [
                                    {
                                        name: '访问来源',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: res
                                    }
                                ]
                            })
                            pieChart.setTheme('macarons');
                        }
                    })


                    var pieChart1 = ec.init(document.getElementById('et_pie1'));
                    $.ajax({
                        url: '@Url.Action("TradeCount", "PersonalContract")',
                        type: 'post',
                        data: { type: "pie1"} ,
                        async: true,
                        dataType: 'json',
                        success: function (result) {
                            //console.log(result);
                            var res = JSON.parse(result);
                            pieChart1.setOption({
                                theme: "macarons",
                                title: {
                                    text: '当日交易情况',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    x: 'left',
                                    data: ['中介交易', '个人交易']
                                },

                                calculable: true,
                                series: [
                                    {
                                        name: '访问来源',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: res
                                    }
                                ]
                            })
                            pieChart1.setTheme('macarons');
                        }
                    })


                    var bar = ec.init(document.getElementById('et_bar'));
                    $.ajax({
                        url: '@Url.Action("TradeCount", "PersonalContract")',
                        type: 'post',
                        data: { type: "bar"} ,
                        async: true,
                        dataType: 'json',
                        success: function (result) {
                            console.log(result);
                            var res = JSON.parse(result);
                            bar.setOption({
                                theme: "macarons",
                                title: {
                                    text: '今年每月交易情况',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    y: 'bottom',
                                    data: ['中介交易', '个人交易']
                                },

                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '中介交易',
                                        type: 'bar',
                                        data: res.agency,
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        },
                                        markLine: {
                                            data: [
                                                { type: 'average', name: '平均值' }
                                            ]
                                        }
                                    },
                                    {
                                        name: '个人交易',
                                        type: 'bar',
                                        data: res.personal,
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        },
                                        markLine: {
                                            data: [
                                                { type: 'average', name: '平均值' }
                                            ]
                                        }
                                    }
                                ]
                            })
                            bar.setTheme('macarons');
                        }
                    })

                    var chartLine = ec.init(document.getElementById('et_line'));
                    $.ajax({
                        url: '@Url.Action("TradeCount", "PersonalContract")',
                        type: 'post',
                        data: { type: "line"} ,
                        async: true,
                        dataType: 'json',
                        success: function (result) {
                            //console.log(result);
                            var res = JSON.parse(result);
                            chartLine.setOption({
                                theme: "macarons",
                                title: {
                                    text: '最近两周交易情况',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    y: 'bottom',
                                    data: ['本周', '上周']
                                }, 
                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '本周',
                                        type: 'line',
                                        stack: '总量',
                                        data: res.ThisWeek
                                    },
                                    {
                                        name: '上周',
                                        type: 'line',
                                        stack: '总量',
                                        data: res.LastWeek
                                    }
                                ]
                            })
                            chartLine.setTheme('macarons');
                        }
                    })
                }
            );
        });

        $(function () {
            $(".page-container").height($(window).height() - 80);

            $(window).resize(function () {
                setTimeout(function () {
                    $(".page-container").height($(window).height() - 80);
                    //$.loading($(".main"));
                }, 0);
            }).trigger("resize");
        });

    </script>
</body>

4.后端代码

　　业务层

using DbService;
using Frame.Base;
using Frame.Model;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Odbc;
using System.Linq;
using System.Text;

namespace Frame.Business.PersonalContract
{
    public class Contract_TradeCount : XT_CONTRACT
    {
        public static DataTable GetDataTable(String flg)
        {
            var db = BaseOperate.CreateDatabase();
            try
            {
                if (flg.Equals("1"))
                {
                    var sql = new Sql("select count(*) as total,'中介交易' as name from XT_CONTRACT  where MEDIATION_PERSON=1 and to_char(CREATE_TIME,'mm')=to_char(sysdate,'mm')" +
                    " union all select count(*) as total,'个人交易'as name from XT_CONTRACT  where MEDIATION_PERSON=0 and to_char(CREATE_TIME,'mm')=to_char(sysdate,'mm')");
                    var dbo = db.Query4DataTable(sql.SQL);
                    return dbo;
                }
                else if(flg.Equals("2"))
                {
                    var sql = new Sql("select count(*) as total,'中介交易' as name from XT_CONTRACT  where MEDIATION_PERSON=1 and trunc(CREATE_TIME)=trunc(sysdate)" +
                    " union all select count(*) as total,'个人交易'as name from XT_CONTRACT  where MEDIATION_PERSON=0 and trunc(CREATE_TIME)=trunc(sysdate)");
                    var dbo = db.Query4DataTable(sql.SQL);
                    return dbo;
                }
                else if (flg.Equals("3"))
                {
                    var sql = new Sql("SELECT DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '01', A_AREA, 0)),0,0,count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '01', A_AREA, 0))) M1,"  
                         +" DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '02', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '02', A_AREA, 0))) M2,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '03', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '03', A_AREA, 0))) M3,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '04', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '04', A_AREA, 0))) M4,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '05', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '05', A_AREA, 0))) M5,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '06', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '06', A_AREA, 0))) M6,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '07', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '07', A_AREA, 0))) M7,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '08', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '08', A_AREA, 0))) M8,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '09', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '09', A_AREA, 0))) M9,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '10', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '10', A_AREA, 0))) M10,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '11', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '11', A_AREA, 0))) M11,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '12', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '12', A_AREA, 0))) M12," +
                         "'个人交易' as name "
                         + " FROM XT_CONTRACT"
                         + " WHERE MEDIATION_PERSON=0 and TO_CHAR(CREATE_TIME, 'yyyy') = TO_CHAR(sysdate, 'yyyy')" +
                         " union all " +
                         " SELECT DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '01', A_AREA, 0)),0,0,count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '01', A_AREA, 0))) M1,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '02', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '02', A_AREA, 0))) M2,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '03', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '03', A_AREA, 0))) M3,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '04', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '04', A_AREA, 0))) M4,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '05', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '05', A_AREA, 0))) M5,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '06', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '06', A_AREA, 0))) M6,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '07', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '07', A_AREA, 0))) M7,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '08', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '08', A_AREA, 0))) M8,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '09', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '09', A_AREA, 0))) M9,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '10', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '10', A_AREA, 0))) M10,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '11', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '11', A_AREA, 0))) M11,"
                         + " DECODE(SUM(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '12', A_AREA, 0)), 0, 0, count(DECODE(TO_CHAR(CREATE_TIME, 'MM'), '12', A_AREA, 0))) M12," +
                         "'中介交易' as name"
                         + " FROM XT_CONTRACT"
                         + " WHERE MEDIATION_PERSON=1 and TO_CHAR(CREATE_TIME, 'yyyy') = TO_CHAR(sysdate, 'yyyy')");
                    var dbo = db.Query4DataTable(sql.SQL);
                    return dbo;
                }
                else 
                {
                    var sql = new Sql("select '上周' as type,to_number(to_char(CREATE_TIME,'D')-1) as myweek,count(*) as total from XT_CONTRACT  where CREATE_TIME between (trunc(sysdate,'iw') - 7) and  (trunc(sysdate,'iw') - 1) group by to_number(to_char(CREATE_TIME,'D')-1)" +
                                     "  union all "
                                     + "select '本周' as type, to_number(to_char(CREATE_TIME, 'D') - 1) as myweek, count(*) as total from XT_CONTRACT where to_char(CREATE_TIME, 'iw') = to_char(sysdate, 'iw') group by to_number(to_char(CREATE_TIME, 'D') - 1)");
                    var dbo = db.Query4DataTable(sql.SQL);
                    return dbo;
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                db.Dispose();
            }
        }
    }
}

　　视图层

 public ActionResult TradeCount()
        {
            var type = Params("type");
            if (!type.IsNullOrEmpty()) { 
                var result = new JsonResult();
                var flg = "";
                if (type.Equals("pie"))
                {
                    flg = "1";
                }
                else if (type.Equals("pie1"))
                {
                    flg = "2";
                }
                else if (type.Equals("bar"))
                {
                    flg = "3";
                }
                else if (type.Equals("line"))
                {
                    flg = "4";
                }
                

                DataTable dto = Contract_TradeCount.GetDataTable(flg);
                List<object> lists = new List<object>();
                Dictionary<String, Object> week = new Dictionary<String, Object>();
                Dictionary<String, Object> year = new Dictionary<String, Object>();
                if (flg.Equals("4"))
                {
                    int[] snum = new int[7];
                    int[] bnum = new int[7];
                    foreach (DataRow dr in dto.Rows)
                    {
                        int[] num = new int[] { 1, 2, 3, 4, 5, 6, 7 };
                        if (dr["type"].Equals("上周"))
                        {
                            for(int i = 0; i < num.Length; i++)
                            {
                                if(Convert.ToInt32(dr["myweek"]) == num[i])
                                {
                                    snum[i] = Convert.ToInt32(dr["total"]);
                                }
                            }
                        }
                        else
                        {
                            for (int i = 0; i < num.Length; i++)
                            {
                                if (Convert.ToInt32(dr["myweek"]) == num[i])
                                {
                                    bnum[i] = Convert.ToInt32(dr["total"]);
                                }
                                else
                                {
                                    bnum[i] = 0;
                                }
                            } 
                        } 
                    }
                    week.Add("LastWeek", snum);
                    week.Add("ThisWeek", bnum);
                    result.Data = JsonHelper.Serialize(week);
                    //result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
                    return result;
                }
                else if (flg.Equals("3"))
                {
                    int[] znum = new int[12];
                    int[] gnum = new int[12];
                    foreach (DataRow dr in dto.Rows)
                    {
                        String[] str = new String[] { "M1","M2","M3","M4","M5","M6","M7","M8","M9","M10","M11","M12" };
                        if (dr["name"].Equals("个人交易"))
                        {
                            for (int i = 0; i < str.Length; i++)
                            {
                                gnum[i] = Convert.ToInt32(dr[str[i]]);
                            }
                        }
                        else
                        {
                            for (int i = 0; i < str.Length; i++)
                            {
                                znum[i] = Convert.ToInt32(dr[str[i]]);
                            }
                        }
                    }
                    year.Add("personal", gnum);
                    year.Add("agency", znum);
                    result.Data = JsonHelper.Serialize(year);
                    //result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
                    return result;
                }
                else
                {
                    foreach (DataRow dr in dto.Rows)
                    {
                        var obj = new { value = dr["total"], name = dr["name"] };
                        lists.Add(obj);
                    }
                    result.Data = JsonHelper.Serialize(lists);
                    //result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
                    return result;
                }
                
            }
            else
            {
                return View();
            }

 

5.总结

　　@1.Echarts模块化引入为了是做配置开发，更灵活，更全面

　　@2.后端.net查询数据并转为前端需要的json格式，前端做解析即可。

6.难点

　　@1.后端查询本周和上周每天的数据量count(*),写sql发现只查出了有数据的，如果星期一没数据则不会在结果集显示，

　　　　而前端需要一周每天的数据量，所以这个工作就交给实体层在传给前端时做数据组装，如果星期几没有数据则自动为其填充默认值0，组装完之后传给前端即可

　　@2.后端查询今年"个人交易"和"中介交易"每个月的数据量count(*)，此sql是由网上查询"oracle查询本年每个月的数据"，从一位博主文章中的sql修改而来。

　　　　博主文章地址：https://www.cnblogs.com/lidj/p/5482389.html

　　　　本按钮的sql是由以上的博主文章的sql变更的，关键有两点：首先是做if else判断语句，sql语句中肯定不能带有逻辑判断语句，所以需要用一个函数DECODE来到达同样的效果。

　　　　最后是查询的字段（除了时间字段之外），该字段必须是有值并且能做统计计算，这样查询出的数据才正确。

7.提升

　　以前写前端的Echarts报表页面，都是采用公司封装好的写，优点是写代码快，但是缺点很多，样式固定、不清楚执行原理、移植性差。

经过此次用原生的开发方式，echarts报表开发，现在已经了然于胸，以后遇到此种需求，自己可以自定义化开发。

　　

　　　　

　　

转载于:https://www.cnblogs.com/yixtx/p/9372244.html

weixin_34032621
关注
ASP.NET与Echarts实现前后端数据的交互
04-01
在帮公司做一个小项目用到的就分享一下，这个使用ASP.NET与Echart使用的，通过在后台获取sql的数据，然后转换成Json,运用前端的Ajax读取json文档。
.NET 与 Echarts 实现前后端数据的交互
07-14
示例为在ASP.NET中使用echarts的实际应用，包括折线图，动态数据，地图，柱形图。后台数据用MVC填充，达到实际应用的目的
探索数据可视化的强大工具：ECharts .Net类库
最新发布
gitblog_00500的博客
08-18 420
探索数据可视化的强大工具：ECharts .Net类库 EChartsSDKECharts的.NET类库,从ECharts的Java类库移植.项目地址:https://gitcode.com/gh_mirrors/ec/EChartsSDK 在数据驱动的时代，如何高效、直观地展示数据成为了开发者面临的重要挑战。ECharts .Net类库，作为.Net平台上的一个强大工具，为开发者提供了一个便捷...
echarts 在.net 中和数据库交互
weixin_34405557的博客
09-04 669
需求描述： 在FineUIMVC中加载图形控件echarts　其官网中只有静态的json语句的数据源，没有关于取数据库的资料，几天下午百度了一些方法。坑太多了， 但是 只要方向没错， 总有成功的方法： 1.起初从简单的Webform 中处理开始（思路：从数据库中取数据保留在datatable 中， 再把datatable 转成json 格式的数据 ； ajax 怎样和后台交互：（通过一般处...
ECharts多图表与后台交互
冲出仁川，走出马德里，故事还会再继续
12-14 648
ECharts多图表与后台交互 多图表交互目前暂时的想法是多绑定一个DOM 1、效果： 2、test2.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入Echarts文件--> <script src="js/echarts.min.js"&gt
echarts .NET类库开源
weixin_34209406的博客
03-03 275
前言： 　　２０１２年从长沙跑到深圳，２０１６年又从深圳回到长沙，兜兜转转一圈，又回到了原点．４年在深圳就呆了一家公司，回长沙也是因为深圳公司无力为继，长沙股东老板挽留，想想自己年纪也不小了．就回来了，在长沙工作几月，也没什么太多的不适应．不用赶着项目上线，不用加班，想想其实也不错.　 　　从１２年在长沙就想写点开源的东西，不过实在不敢献丑．这次机缘巧合，有个朋友一个项目需要用到大量报表，我找...
新手指南：ASP.NET后端配合Echarts动态绘制饼状图与SQL数据交互
本篇文章介绍如何在ASP.NET后端支持下，使用Echarts实现动态获取SQL数据库中的数据，并在前端页面上进行图表展示。 首先，前端开发者需要从百度Echarts官网下载所需的JavaScript文件（`echarts.js`），并在HTML中...
ECharts前台后台数据交互Demo
11-26
本教程将深入讲解如何通过AJAX技术实现ECharts与后台MySQL数据库的数据交互，以创建动态、实时的数据展示Demo。 一、ECharts简介 ECharts是一款轻量级的图表库，支持多种图表类型，可以灵活地进行配置和定制，满足...
ASP.NET操作echarts
03-27
前端页面使用 AJAX 技术与后端交互，获取这些数据并传递给 ECharts 进行渲染。可以使用 jQuery 的 `$.ajax` 或者原生的 `fetch` API 实现。以下是一个使用 jQuery 的示例： ```javascript $(document).ready...
echarts在.Net中使用实例(一) 简单的Demo
weixin_30367543的博客
10-13 1108
前言 这个必须要有前言，即便很短，对于有强迫症的人来说不容易啊。言归正传，之前做图一直使用rdlc自带的格式，虽然任务完成，但是一直觉得不太美观， 空余时间开始找其他的插件，终于找到了Highchart和echarts,这一系列主要是针对echarts. 关于Echarts 百度比我更清楚，我就不说了！ echarts的实例参考地址：http://echarts.baidu.com/do...
Echarts 后台交互
热门推荐
07-22 5万+
jsp页面 line var myChart; var eCharts; require.config({ paths : { 'echarts' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' , 'echarts/chart/line' : '${
asp.net_echarts后台动态获取数据
06-22
自己练手写的几个例子： demo1和demo2是echart两种不同的写法，数据是写死的，仅供参考，推荐以demo2为模板。 demo3、demo4、demo5是ajax动态从后台获取json数据的例子。 demo3是折线图和柱状图。 demo4是饼图。 demo5是双折线(柱状)图。
EChartsSDK.NET
05-10
ECharts .Net类库 当前版本3.6.1 Echarts java版: echart: 演示地址: 本项目是一个.Net版的ECharts开发包,参考的java版本,主要目的是方便在.NET中构件Echarts中可能用的全部数据结构,完整的Option结构. ChartOption中的数据Series,包含Line-折线图,Bar-柱状图,Pie-饼图,Scatter-散点图等,支持Echarts中所有图表.支持所有Style类,如AreaStyle,ItemStyle,LineStyle等.支持多种Data数据类型,一个通用的Data数据,以及PieData,PolarData,TreeData等个性化数据结构. 你可以使用本项目直接构件一个Option对象,使用方法JsonTools.ObjectToJson2(option),(直接使用Json方式返回存在问题,因为funct
Echarts图表 .net 封装 Dll 带源码
09-20
新手根据 DotNet Highcharts 改写 版本较老，建议参考用
.NET WinForms（C#）中使用Echarts绘制图表
weixin_44453199的博客
06-25 5445
使用.NET 6编写Winforms时，需要绘制图表，发现.NET Core中默认不支持Chart控件。经过查询，使用CefSharp控件和Echart图可以实现想要的显示效果。
ASP.NET使用ECharts展示后台数据
guoxy_nb的专栏
12-31 1万+
Baidu开源项目Echarts无论从数据的展现能力，对桌面与智能终端的友好支持，还是在使用的方便性上，慢慢成为广大程序员使用图表展示数据的首选。在使用过程中，也会出现各种坑，而网上找到的大部分资料，都是人云亦云，相互抄来抄去，需要仔细斟酌，才能在万千资料中找到自己所能用的信息。本文详细介绍了在ASP.NET中使用ECharts的详细过程，希望对初步使用该方法的同学有所帮助。 一、前端 1、从
EChartsNet：.NET中的强大数据可视化库
gitblog_00043的博客
04-05 413
EChartsNet：.NET中的强大数据可视化库 EChartsNet ECharts的Net版本映射，可用于Winform、Wpf，直接用C#更方便的显示各类图表 项目地址: https://gitcode.com/WnagoiYy/EChartsNet ...
探索ECharts .Net类库：让数据可视化变得轻松易行
gitblog_00039的博客
05-31 397
探索ECharts .Net类库：让数据可视化变得轻松易行 EChartsSDKECharts的.NET类库,从ECharts的Java类库移植.项目地址:https://gitcode.com/gh_mirrors/ec/EChartsSDK 1、项目介绍 ECharts .Net类库是一款专为.NET开发者打造的数据可视化工具，基于流行的ECharts图表库，提供了丰富的图表类型和强大的功能...
后端数据 动态修改Echarts
weixin_57605337的博客
11-24 365
for 循环 赋值拿到的数据，要放在data 中， 方便 options 配置中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值