echart案例

最新推荐文章于 2023-09-21 14:22:39 发布
最新推荐文章于 2023-09-21 14:22:39 发布
阅读量719 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29072049/article/details/80105547
版权

选择要分析的数据01
显示为折线图
显示为柱状图
首先要做的就是下载百度echarts的包，我下载的是echarts-2.2.7，懒得找的童鞋，可以从这里下载：http://download.csdn.net/detail/sunping177/9721547 
找到build下的dist文件夹，复制里面所有文件到项目中，如下图 
这里写图片描述 
下面我们看一下代码 
先看前台页面 
AnalysisSP.aspx 
AjaxEcharts.js是写好的echarts于后台交互的代码

  <div style="height: 600px;" id="main"></div>
    <script src="../Content/assets/scripts/echarts/echarts.js"></script>
    <script src="../Content/assets/scripts/echarts/AjaxEcharts.js">            </script>
  • 1
  • 2
  • 3

在这里需要说的就是需要查询的数据，在前台页面中设置隐藏域，后台对隐藏域进行赋值 
例如下面代码是需要分析的条件之一，其他就不一一列举了。

                                   <span class="input-group-addon ie_widthauto">&nbsp 现居住省份&nbsp:</span>
                                <asp:DropDownList ID="ddlProviceType" runat="server" CssClass="form-control ie_widthauto">
                                    <asp:ListItem Value="-2">全部</asp:ListItem>
                                </asp:DropDownList>                              
                                <input type="hidden" id="HidddlProviceTypeV" runat="server" />
  • 1
  • 2
  • 3
  • 4
  • 5

下面是AjaxEcharts.js 
即echarts于后台交互的代码

$(document).ready(function () {
    var myChart;
    var eCharts;
    // 路径配置
    require.config({
        paths: {
            echarts: '../Content/assets/scripts/echarts' //echarts路径
        }
    });
    // 使用
    require(
        [
            'echarts', //echarts路径
            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
             'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
        ], DrawEChart//异步加载的回调函数绘制图表
        );
    //创建ECharts图表方法 
    function DrawEChart(ec) {
        eCharts = ec;
        myChart = eCharts.init(document.getElementById('main'));
        myChart.showLoading({
            text: "图表数据正在努力加载..."
        });
        //定义图表options  
        var options = {
            title: {
                text: "前台咨询登记数据分析",
                subtext: ""
            },
            tooltip: {
                trigger: "axis"
            },
            legend: {
                data: ["初始化数据"]
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['小学']
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                splitArea: {
                    show: true
                }
            }],
            grid: {
                width: '90%'
            },

            series: [{
                name: '数量',
                type: 'line',
                data: [0],//必须是Integer类型的,String计算平均值会出错  
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        };
        myChart.setOption(options); //先把可选项注入myChart中  
        myChart.hideLoading();
        getChartData();//aja后台交互  
    }
    function getChartData() {
        //获得图表的options对象 
        var options = myChart.getOption();
        var hopeAnalyV = $("#hidhopeAnalyV").val();
        var hopeAnaly = $("#hidhopeAnaly").val();
        var ddlBranchV = $("#hidDDLBranchV").val();
        var ddlInfoSourceV = $("#HidddlInfoSourceV").val();
        var ddlCousultListV = $("#HidddlCousultListV").val();
        var brlCountryPartRadV = $("#HidbrlCountryPartRadV").val();

        var ddlAllRecordDepListV = $("#HidddlAllRecordDepListV").val();
        var ddlProviceTypeV = $("#HidddlProviceTypeV").val();
        var rblAllDeptRadV = $("#HidrblAllDeptRadV").val();

        var HidtxtBeginDate = $("#HidtxtBeginDate").val();
        var HidtxtEndDate = $("#HidtxtEndDate").val();

        var HidddlHopCountry = escape($("#HidddlHopCountry").val());
        var HidddlCountryGroup = escape($("#HidddlCountryGroup").val());
        var HidddlCurrentDegree = escape($("#HidddlCurrentDegree").val());
        var HidddlHopeDegree = escape($("#HidddlHopeDegree").val());
        var HidddlProvice = escape($("#HidddlProvice").val());
        //请求的参数


        if (hopeAnaly != "") {            
            //通过Ajax获取数据
            $.ajax({
                type: "post",
                async: false, //同步执行 
                url: "../Handler/EchartsData.ashx",
                data: {
                    hopeAnalyV: hopeAnalyV,
                    ddlBranchV: ddlBranchV,
                    ddlInfoSourceV: ddlInfoSourceV,
                    ddlCousultListV: ddlCousultListV,
                    brlCountryPartRadV: brlCountryPartRadV,
                    ddlAllRecordDepListV: ddlAllRecordDepListV,
                    ddlProviceTypeV: ddlProviceTypeV,
                    rblAllDeptRadV: rblAllDeptRadV,
                    HidtxtBeginDate: HidtxtBeginDate,
                    HidtxtEndDate: HidtxtEndDate,
                    HidddlHopCountry: HidddlHopCountry,

                    HidddlCountryGroup: HidddlCountryGroup,
                    HidddlCurrentDegree: HidddlCurrentDegree,
                    HidddlHopeDegree: HidddlHopeDegree,
                    HidddlProvice: HidddlProvice
                },
                dataType: "json",//返回数据形式为json 
                success: function (result) {
                    var xxlist = [];
                    var yylist = [];
                    for (var i = 0; i < result.length; i++) {
                        if (result[i].x == "") {
                            var patxx = "空";
                        } else if (result[i].x == null) {
                            var patxx = "NULL";
                        }
                        else {
                            var patxx = result[i].x;
                        }
                        var patyy = result[i].y;
                        xxlist.push(patxx);
                        yylist.push({ value: patyy, name: patxx });
                    }
                    var hpAnaly = [];
                    if (hopeAnaly != "") {
                        hpAnaly.push(hopeAnaly);
                    }
                    if (result) {
                        options.legend.data = hpAnaly;//lengend赋值数据
                        options.xAxis[0].data = xxlist;//x轴赋值数据
                        options.series[0].data = yylist;//y轴赋值数据
                        myChart.hideLoading();
                        myChart.setOption(options);
                    }
                },
                error: function (errorMsg) {
                    alert("查询数据结果为空!");
                    myChart.hideLoading();
                }
            });
        }
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188

echarts获取的json数据，就是从后台一般处理程序中获取的。 
关键代码是 
context.Response.Write(new JavaScriptSerializer().Serialize(list)); 
下面来看一般处理程序,这里传入参数很多，请自动忽略 
参数中如果有传入的汉字为乱码时，可以使用标记为汉字的方法context.Server.UrlDecode(） 
EchartsData.ashx.cs

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            #region 参数
            string hopeAnalyV = context.Request["hopeAnalyV"];
            string ddlBranchV = context.Request["ddlBranchV"];
            string ddlInfoSourceV = context.Request["ddlInfoSourceV"];
            string ddlCousultListV = context.Request["ddlCousultListV"];
            string brlCountryPartRadV = context.Request["brlCountryPartRadV"];
            string ddlAllRecordDepListV = context.Request["ddlAllRecordDepListV"];
            string ddlProviceTypeV = context.Request["ddlProviceTypeV"];
            string rblAllDeptRadV = context.Request["rblAllDeptRadV"];
            string HidtxtBeginDate = context.Request["HidtxtBeginDate"];
            string HidtxtEndDate = context.Request["HidtxtEndDate"];

            //汉字
            string HidddlHopCountry = context.Server.UrlDecode(context.Request["HidddlHopCountry"]);
            string HidddlCountryGroup = context.Server.UrlDecode(context.Request["HidddlCountryGroup"]);
            string HidddlCurrentDegree = context.Server.UrlDecode(context.Request["HidddlCurrentDegree"]);
            string HidddlHopeDegree = context.Server.UrlDecode(context.Request["HidddlHopeDegree"]);
            string HidddlProvice = context.Server.UrlDecode(context.Request["HidddlProvice"]);
            #endregion
            string userid = context.Request.Cookies["userid"].Value;
            #region PowerStr
            var powerDept = DB.Context.From<Model.tblRecepPower>()
             .Select(a => a.DepartmentID)
             .Where(a => a.IsPower == 1 && a.UserID == int.Parse(userid))
             .ToList();
            string PowerStr = string.Empty;
            if (powerDept.Count > 0)
            {
                PowerStr = "and DepartmentID in (select DepartmentID from tblRecepPower  where IsPower=1 and UserID=" + userid + ")";
            }
            else
            {
                PowerStr = "";
            }

            #endregion
            #region branchid
            int userBranchid = 0;
            string userBranchName = string.Empty;
            var branchlist = DB.Context.From<Model.view_Member>()
                .Select(a => new { a.BranchID, a.BranchName })
                .Where(a => a.id == int.Parse(userid))
                .ToList();
            foreach (var item in branchlist)
            {
                userBranchid = item.BranchID;
                userBranchName = item.BranchName;
            }
            #endregion

            #region UserBranchStr
            string UserBranchStr = string.Empty;
            string ss = ddlBranchV;
            if (string.IsNullOrEmpty(ss) || ss == "-1")
            {
                UserBranchStr = "and ( BranchID in(select BranchID from tblUserBranch where Flag=1 and FuncID=2 and UserID=" + userid + ")or BranchID=0 )";
            }
            else
            {
                UserBranchStr = "and BranchID =" + ss;
            }
            #endregion
            string AnalysisTable = "view_recepinfopart";
            string strSql = string.Empty;
            if (hopeAnalyV == "HopeCountry" || hopeAnalyV == "GroupName")
            {
                AnalysisTable = "view_RecepInfoCountry";
            }

            strSql = "SELECT  count(RecepId) as y ," + hopeAnalyV + " as x";
            strSql += " from " + AnalysisTable + " where IsShow=1 " + PowerStr + UserBranchStr;
            if (HidtxtBeginDate != "" && HidtxtEndDate == "")
            {
                strSql = strSql + " and Datediff([day],RecordDate,'" + HidtxtBeginDate + "')=0 ";
            }
            else if (HidtxtBeginDate == "" && HidtxtEndDate != "")
            {
                strSql = strSql + " and  Datediff([day],RecordDate,'" + HidtxtBeginDate + "')=0 ";
            }
            else if (!string.IsNullOrEmpty(HidtxtBeginDate) && !string.IsNullOrEmpty(HidtxtEndDate))
            {
                strSql = strSql + " and RecordDate>='" + HidtxtBeginDate + " 0:00:00' and RecordDate<='" + HidtxtEndDate + " 23:59:59' ";
            }
            if (HidddlHopCountry != "全部")
            {
                strSql = strSql + " and (RecepId in(select RecepId from tblRecepHopeCountry where HopeCountry='" + HidddlHopCountry + "'))";
            }
            if (HidddlCountryGroup != "全部")
            {
                strSql = strSql + " and (RecepId in(select RecepId from view_RecepHopeCountry where GroupName='" + HidddlCountryGroup + "'))";
            }
            if (HidddlCurrentDegree != "全部")
            {
                strSql = strSql + " and CourrentDegree='" + HidddlCurrentDegree + "'";
            }
            if (HidddlHopeDegree != "全部")
            {
                strSql = strSql + " and HopeDegree='" + HidddlHopeDegree + "'";
            }
            if (brlCountryPartRadV == "1")
            {
                if (HidddlProvice != "全部")
                {
                    strSql = strSql + " and Provice='" + HidddlProvice + "'";
                }
            }
            else
            {
                if (ddlProviceTypeV != "-2")
                {
                    strSql = strSql + " and ProviceType='" + ddlProviceTypeV + "'";
                }
            }
            if (rblAllDeptRadV=="1")
            {
                if (ddlAllRecordDepListV!="-2")
                {
                      strSql = strSql + " and RecordName='" +ddlAllRecordDepListV+ "'";
                }
            }        
            if (ddlCousultListV != "-2")//咨询类型
            {
                strSql = strSql + " and ConsultType=" + ddlCousultListV + "";
            }
            if (ddlInfoSourceV != "-2")//咨询信息来源
            {
                strSql = strSql + " and (AttainInfoType=" +ddlInfoSourceV + "  or AttainInfoType=10)";
            }          
            string orderbyStr = string.Empty;
            if (hopeAnalyV== "HopeCountry")
            {
                orderbyStr = " order by HopeCountry";
            }
            else if (hopeAnalyV == "GroupName")
            {
                orderbyStr = " order by GroupName";
            }
            else if (hopeAnalyV == "BranchName")
            {
                orderbyStr = " order by BranchName";
            }
            else
            {
                orderbyStr = " order by count(RecepId) desc";
            }
            strSql += " group by " + hopeAnalyV;
            strSql += orderbyStr;

            if (hopeAnalyV == "HopeCountry" || hopeAnalyV == "GroupName")
            {
                var analyList = DB.Context.FromSql(strSql).ToList<Model.view_RecepInfoCountry>();
                var list = new List<object>();
                if (analyList.Count > 0)
                {
                    foreach (Model.view_RecepInfoCountry recpf in analyList)
                    {
                        var obj = new { x = recpf.x, y = recpf.y };
                        list.Add(obj);
                    }
                    context.Response.Write(new JavaScriptSerializer().Serialize(list));
                }
            }
            else
            {
                var analyList = DB.Context.FromSql(strSql).ToList<Model.view_Recepinfopart>();
                var list = new List<object>();
                if (analyList.Count > 0)
                {
                    foreach (Model.view_Recepinfopart recpf in analyList)
                    {
                        var obj = new { x = recpf.x, y = recpf.y };
                        list.Add(obj);
                    }
                    context.Response.Write(new JavaScriptSerializer().Serialize(list));
                }
            }



        }
键盘侠007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts全国小例子，学习用
04-09
echarts全国小例子，全国数据显示内容，欢迎提问，欢迎指出错误，谢谢。
Java面试基础篇
m0_67392010的博客
07-29 3224
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。Java的强引用、弱引用、软引用、虚引用。Java语言基础常识。Java12新特性。JavaIO详解。...
常用echarts示例
逆风优雅的博客
08-06 6827
代码】常用echarts示例。
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 9万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
【echarts】 label 初始化 文字换行
weixin_37624436的博客
12-06 550
functionline_feed(str,num){ letnewParamsName="";//最终拼接成的字符串 letparamsNameNumber=str.length;//实际标签的个数 letprovideNumber=num; letrowNumber=Math.ceil(paramsNameNumber/p...
echart案例之一
05-14
echart案例,给初学者提供方便的学习机会,简单易懂, 很快掌握!
echart 实例
11-16
各个图标的实例
echart地图实例
08-01
echart地图应用实例，有详细的试用介绍，的的的的的的的的
百度echart五种图表案例
01-11
资源中有五个echart的案例，用了两种初始化echart的方式。最近需要做一个地图，看到echart的效果很好，并且也支持导出，做到最后发现不支持ie8，但是我在一个echarts的QQ群中看到很多人问关于echarts的问题，所以就...
echart5套前端案例.rar
09-16
前端echarts使用的5套模板案例,全套代码直接可以使用
echart示例总结（持续更新）
洛尧的博客
10-17 1263
echart示例
Echart 的实例
csdn_chenli
05-26 5462
这是我自己做的一些实例  有Echarts 部分属性的注释 学习网站：http://echarts.baidu.com/index.html ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直
【echarts&js】echarts实现数据折线图等常见可视化；以及三个案例，附带源码
weixin_52479803的博客
08-01 1551
【echarts&js】echarts实现数据折线图等常见可视化；以及三个案例，附带源码
Echart常用示例
最新发布
qq_40685414的博客
09-21 97
【代码】Echart常用示例。
ECharts案例大全（最新版），含各种案例，实例。
您的博客
02-07 3万+
前言：2022年2月以前，ECharts官网除了提供官方案例外，还额外提供了一个ECharts案例资源丰富的强大社区MakeA Pie来展示各类的ECharts案例。这对于广大开发者，特别是前端页面仔们来说简直是个福音网站。然后，现在却因无人维护，该社区被停用了。 这一停用无疑给广大ECharts使用者们带来一阵阴影（ps：要是遇上复杂的ECharts图标需求，那不得每次都是重头画起。呜呜~~） 方法一：不过不要慌张，本着遇到问题就解决问题的干劲，社区动力大佬为大家重新整理了一份几乎和原MakeA...
echarts数据可视化介绍+常用的图表案例分析（值得收藏的干活）
promise466的博客
10-28 7246
Echarts的优点比较明显体积小，免费、上手快，只需要有一些js基础，剩下的就是复制粘贴的事情，而且是国产的东西，文档看起来也比较方便
echarts简单案例
m0_65912225的博客
06-30 592
【代码】echarts简单案例。
echarts优秀使用案例
qq_38946996的博客
11-25 689
echarts优秀使用案例
vue3 使用echart的案例
08-08
import EchartDemo from './EchartDemo.vue'; export default { components: { EchartDemo } } ``` 这只是一个简单的示例，你可以根据自己的需求来配置和自定义echarts图表。 希望这个示例对你有帮助！如果你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值