AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

.NET+Ajax+ashx 实现Echarts图表动态交互

2017-12-14 1799
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前言：　　使用Echarts展示图表效果，在这里只做了四种案例：折线、柱状、圆形、雷达。当初是一位朋友用到Echarts展示数据，他没有太多时间弄，所以我就帮他搞出来，当初刚接触的时候也是一头雾水，不知道该怎么下手，网上类似的案例有也不多，并且不是自己想要的效果。

前言：

　　使用Echarts展示图表效果，在这里只做了四种案例：折线、柱状、圆形、雷达。当初是一位朋友用到Echarts展示数据，他没有太多时间弄，所以我就帮他搞出来，当初刚接触的时候也是一头雾水，不知道该怎么下手，网上类似的案例有也不多，并且不是自己想要的效果。正好今天整理电脑时候发现还有实现的案例，就放在自己的博客上留着以后用。

实现步骤：

　　既然说到了动态数据，当然离不开查询，我在这用SQL Server建一个简单的库，只为展示其效果。

       

看到数据大家伙都知道这是一个车品牌的图例（说了一句废话^_^），接下来开始画前台页面，效果大概是这个样子的：

　　

当然这是根据个人爱好，我喜欢比较规整的东西，所以就浪费了一些时间画出一个样式。

css样式代码：

body,ul,li,div,a,span{
    margin:auto; 
} 
 
.btnChart{
    width:750px;
    height:40px; 
    margin:0 auto;
}
.BarFigure {
    BACKGROUND: url(/chartImg/column3d.gif) no-repeat 4px 4px; 
}
.RadarFigure {
    BACKGROUND: url(/chartImg/leidatu.gif) no-repeat 4px 4px; 
} 
.PieFigure {
    BACKGROUND: url(/chartImg/pie.gif) no-repeat 4px 4px; 
}
.LineFigure {
    BACKGROUND: url(/chartImg/donut.gif) no-repeat 4px 4px; 
}
.btnChart ul li{
    text-decoration:none;
    border:1px solid gray;
    padding:5px;
    border-radius:5px;
    color:#000; 
    font-size:14px;
    font-family:'楷体';
    float:right;list-style:none;
    margin-left:10px; 
}
.btnChart ul li:hover {
    color: orange; 
    cursor:pointer;
}   
.Line {
    border-bottom: 1px solid #e1e1e1;
    width: 750px;
    margin: 0 auto; 
}
.ChartStyle{
    width:800px;
    height:500px;
    border:1px solid gray;
    margin:0 auto;
    display:none; 
}

html代码：

<body>
    <div style="height:600px;width:1000px;margin:0 auto; border:1px solid gray">  
        <br />
        <div class="btnChart" >
            <ul>  
                <li class='RadarFigure'>&nbsp; 雷达图 </li>
                <li class='PieFigure'>&nbsp; 饼状图 </li>
                <li class='BarFigure'>&nbsp; 柱状图 </li>
                <li class='LineFigure'>&nbsp; 折线图 </li> 
            </ul>  
        </div> 
        <div class="showCharArray">
            <div  class=" ChartStyle" >         <%--折线图--%> 
                <div id="Line" style="width:800px; height:450px;margin-top:30px;" ></div> 
            </div>
            <div  class="ChartStyle" >          <%--柱状图--%>
                <div id="Bar" style="width:800px; height:450px;margin-top:30px;"></div> 
            </div>
            <div class="ChartStyle">            <%--饼状图--%> 
                <div id="Pie" style="width:800px; height:450px;margin-top:30px;"></div> 
            </div>
            <div  class="ChartStyle">           <%--雷达图--%> 
                <div id="Radar" style="width:800px; height:450px;margin-top:30px;"></div> 
            </div>   
        </div>
    </div> 
</body>

接下来开始做Echarts的准备工作啦，先从官网下载echarts.min.js 链接：http://echarts.baidu.com/download.html ，jquery.js我就不说啦。

    <script src="Scripts/jquery-1.4.1.min.js"  type="text/javascript"></script>     <%--jquery.js--%>
    <script src="Scripts/echarts.min.js" type="text/javascript"></script>           <%-- Echarts.js --%>
    <link href="css/ChartPage.css" rel="stylesheet" type="text/css" />  <%--引用的css样式--%>

前台写的差不多了，我们开始写查询数据。

　　　　 static string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string sql = @"  select Id,Num,Product from SalesVolume";       //SQL语句
            DataTable dt = ExecuteDataTable(sql,CommandType.Text,null);     //查询结果

            List<object>  lists = new List<object>();                       //创建object类型的泛型
            foreach (DataRow dr in dt.Rows)
            {
                var obj = new { name = dr["Product"], value = dr["Num"] };  //key，value
                lists.Add(obj);
            } 
            var jsS = new JavaScriptSerializer();                           //创建json对象
            context.Response.Write(jsS.Serialize(lists));                   //返回数据
            
        } 
        public  DataTable ExecuteDataTable(string sql, CommandType type, params SqlParameter[] pars)
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            using (SqlConnection con = new SqlConnection(conStr))
            {
                con.Open();
                SqlCommand cmd = new SqlCommand(sql, con);
                cmd.CommandType = type;
                if (pars != null)
                {
                    cmd.Parameters.AddRange(pars);
                }
                SqlDataAdapter adpt = new SqlDataAdapter(cmd);
                adpt.Fill(ds);
                dt = ds.Tables[0];
            }
            return dt; 
        }

后台查询也很简单，只要能返回key和value值就可以了。前台的js直接上代码吧，差不多都能看懂。

$(function () {  
            $("select").addClass("form-control");
            $(".LineFigure").click(function () {
                var $content = $(this).parent().parent().next().children("div:nth-child(1)");
                if ($content.is(":visible")) {
                    $(this).css({ "color": "#000", "border-color": "gray" });
                    $content.html("");
                    $content.hide();
                } else {
                    $(this).css({ "color": "orange", "border-color": "orange" });
                    $(this).siblings().css({ "color": "#000", "border-color": "gray" });
                    $content.siblings().hide();

                    var newElement = $('<div id="Line" style="width:800px; height:450px;margin-top:30px;" ></div> ');
                    $content.append(newElement);
                    //-----------上下都是设置样式的可以无视掉，这里才是核心--------------------
                    $.ajax({
                        url: "ashx/Echarts.ashx",
                        data: { cmd: "bar" },
                        cache: false,
                        async: false,
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                var list = eval(data);
                                var name = [];      //Line的数据需要object类型，所以创建name和value数组存放数据
                                var value = [];     
                                for (var i = 0; i < list.length; i++) {
                                    name.push(list[i].name);        
                                    value.push(list[i].value);
                                }
                                LineChart(name, value);     //调用封装好的Line    
                            }
                        },
                        error: function (msg) {
                            alert("系统发生错误");
                        }
                    });
                    //---------------------------------------------------------------------------
                    $content.show();
                }
            })

            $(".BarFigure").click(function () {

                var $content = $(this).parent().parent().next().children("div:nth-child(2)");
                if ($content.is(":visible")) {
                    $(this).css({ "color": "#000", "border-color": "gray" });
                    $content.html("");
                    $content.hide();
                } else {
                    $(this).css({ "color": "orange", "border-color": "orange" });
                    $(this).siblings().css({ "color": "#000", "border-color": "gray" });
                    $content.siblings().hide();

                    var newElement = $('<div id="Bar" style="width:800px; height:450px;margin-top:30px;" ></div> ');
                    $content.append(newElement);

                    //-----------上下都是设置样式的可以无视掉，这里才是核心--------------------
                    $.ajax({
                        url: "ashx/Echarts.ashx",
                        data: { cmd: "bar" },
                        cache: false,
                        async: false,
                        dataType: "json",
                        success: function (data) {
                            if (data) { 
                                var list = eval(data);
                                var name = [];
                                var value = [];
                                for (var i = 0; i < list.length; i++) {
                                    name.push(list[i].name);
                                    value.push(list[i].value);
                                }
                                BarChart(name, value);          //调用封装好的BarChart
                            }
                        },
                        error: function (msg) {
                            alert("系统发生错误");
                        }
                    });
                    //---------------------------------------------------------------------------
                    $content.show();
                }
            })


            $(".PieFigure").click(function () {
                var $content = $(this).parent().parent().next().children("div:nth-child(3)");
                if ($content.is(":visible")) {
                    $(this).css({ "color": "#000", "border-color": "gray" });
                    $content.html("");
                    $content.hide();

                } else {
                    $(this).css({ "color": "orange", "border-color": "orange" });
                    $(this).siblings().css({ "color": "#000", "border-color": "gray" });
                    $content.siblings().hide();

                    var newElement = $('<div id="Pie" style="width:800px; height:450px;margin-top:30px;" ></div> ');
                    $content.append(newElement);

                    //-----------上下都是设置样式的可以无视掉，这里才是核心--------------------
                    $.ajax({
                        url: "ashx/Echarts.ashx",
                        data: { cmd: "bar" },
                        cache: false,
                        async: false,
                        dataType: "json",
                        success: function (data) { 
                            if (data) { 
                                var list = eval(data); 
                                var name = [];
                                var value = [];
                                for (var i = 0; i < list.length; i++) { 
                                    name.push(list[i].name);
                                    value.push(list[i].value);
                                } 
                                PieChart(data, name);       // 圆形不同的是数据类型是这样的：{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'}
                            }
                        },
                        error: function (msg) {
                            alert("系统发生错误");
                        }
                    });
                    //---------------------------------------------------------------------------
                    $content.show();
                }
            })


            $(".RadarFigure").click(function (e) {
                var $content = $(this).parent().parent().next().children("div:nth-child(4)");
                if ($content.is(":visible")) {
                    $(this).css({ "color": "#000", "border-color": "gray" });
                    $content.html("");
                    $content.hide();
                } else {
                    $(this).css({ "color": "orange", "border-color": "orange" });
                    $(this).siblings().css({ "color": "#000", "border-color": "gray" });
                    $content.siblings().hide(); 
                    var newElement = $('<div id="Radar" style="width:800px; height:450px;margin-top:30px;" ></div> ');
                    $content.append(newElement);

                    //-----------上下都是设置样式的可以无视掉，这里才是核心--------------------
                    $.ajax({
                        url: "ashx/Echarts.ashx",
                        data: { cmd: "bar" },
                        cache: false,
                        async: false,
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                var list = eval(data);
                                var name = [];
                                var value = [];
                                for (var i = 0; i < list.length; i++) {
                                    name.push(list[i].name);
                                    value.push(list[i].value);
                                }
                                RadarChart(name, value, data);          //调用封装好的RadarChart
                            }
                        },
                        error: function (msg) {
                            alert("系统发生错误");
                        }
                    });
                    //---------------------------------------------------------------------------
                    $content.show();
                }
            })
        })
View Code 
<script type="text/javascript">     //封装好的图表类，传入数据即可
    function LineChart(name, value) {
        var myChart = echarts.init(document.getElementById('Line'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '汽车销量统计',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {},
            xAxis: {
                data: name          //恒坐标的值name
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: value         //纵坐标的值value
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    function BarChart(name,value) {
        var myChart = echarts.init(document.getElementById('Bar'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '汽车销量统计',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {}, 
            xAxis: {
                data: name
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: value
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option); 
    }

    function PieChart(data,name) {
        var myChart = echarts.init(document.getElementById('Pie'));
        option = {
            title: {
                text: '汽车销量统计',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: name
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
    function RadarChart(name,value,data) { 
        var myChart = echarts.init(document.getElementById('Radar'));
        option = {
            title: {
                text: '汽车销量统计(纯属虚构)',
                subtext: '纯属虚构',
                x: 'right',
                y: 'bottom'
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,250,0.2)'
            },
            legend: {
                data: name
            },
            visualMap: {
                color: ['red', 'yellow']
            },
            radar: {
                indicator: (function () {
                    var indicator = [];
                    for (var i = 0; i < name.length; i++) {
                        indicator.push({
                            text: name[i],
                            max: 4000       //限制最大数数值
                        })
                    }
                    return indicator;
                })() 
            },
            series: (function () {
                var series = [];
                for (var i = 0; i < data.length; i++) {
                    series.push({ 
                        type: 'radar',
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 1
                                }
                            },
                            emphasis: {
                                areaStyle: { color: 'rgba(0,250,0,0.3)' }
                            }
                        },

                        data: [
                            {
                                value: value,
                                name: name[i]
                            }
                        ]  
                    });
                }
                return series;
            })()
        };
        myChart.setOption(option);
    } 
</script>
View Code

到这里功能都能实现了，给大家展示一下我的成品，前端编写能力有些差，大伙凑合的看吧^_^。

 

 

 

本文到这里就完事儿了，当然哪里写的不好大神可以加以点评，欢迎拍砖扶正，共同进步^_^~

文章标签：
前端开发
SQL
数据格式
JSON
JavaScript
关键词：
ajax交互
ECharts图表
.NET图表
.NET交互
ajax动态
swjian1997
目录
相关文章
a15034260562-24955
|
6月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
a15034260562-24955
212 1
阿珊和她的猫
|
6月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘：异步传输，高效交互
Ajax技术的秘密揭秘：异步传输，高效交互
阿珊和她的猫
215 0
宁波阿成.
|
6月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述（三）
ASP.NET AJAX使用方法概述（三）
宁波阿成.
51 1
阿珊和她的猫
|
6月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
阿珊和她的猫
124 0
泥腿子架构师
|
4月前
|
缓存 数据可视化 前端开发
使用ECharts实现动态数据可视化的最佳实践
使用ECharts实现动态数据可视化的最佳实践
泥腿子架构师
181 1
宁波阿成.
|
6月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
宁波阿成.
99 0
GoodTime
|
6月前
|
XML 开发框架 .NET
C# .NET面试系列八：ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分：ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET（通用语言运行时）： ```c# 定义：.NET 是一个软件开发框架，提供了一个通用的运行时环境，用于在不同的编程语言中执行代码。 作用：它为多语言支持提供了一个统一的平台，允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库（BCL）和其他工具。 ``` C#（C Sharp）： ```c# 定义： C# 是一种由微软设计的面向对象的编程语言，专门为.NET 平台开发而创建。 作
GoodTime
309 2
雪梅零落
|
6月前
|
SQL JavaScript 分布式数据库
使用Vue+ ECharts进行动态图表展示
Vue是一个用于构建用户界面的渐进式JavaScript框架，可以轻松构建单页面应用程序(SPA)。ECharts是一个基于JavaScript的数据可视化库，可以通过简单的配置实现各种图表的展示和交互。
雪梅零落
239 0
祈澈菇凉
ajax+json模拟一个页面多个统计图数据交互
ajax+json模拟一个页面多个统计图数据交互
祈澈菇凉
45 1
祈澈菇凉
|
JSON 数据格式
Echarts+ajax实现一个简单折线图
Echarts+ajax实现一个简单折线图
祈澈菇凉
62 0

热门文章

最新文章

  • 1
    'You Got Your Ajax in My Rails!'
  • 2
    微软AJax.net源码初步分析(2)--服务执行流程
  • 3
    安装ASP.NET AJAX (一安装)
  • 4
    Ajax学习笔记
  • 5
    ajax8-ajax封装
  • 6
    ajax第一例：helloworld|学习笔记
  • 7
    ajax教程
  • 8
    Ext.Ajax.request和formPanel.getForm().submit两种提交方法的异同
  • 9
    bboss mvc处理ajax get方法中文乱码方式纪实
  • 10
    Firefox AJAX请求readyState = 0，status = 0问题
  • 1
    Echarts+vue+java+mysql实现数据可视化
    183
  • 2
    echarts 地图点位
    59
  • 3
    Echarts是一个开源的JavaScript可视化库，用于创建各种类型的图表
    145
  • 4
    数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
    704
  • 5
    Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
    675
  • 6
    vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
    166
  • 7
    vue3+echarts可视化——记录我的2023编程之旅
    106
  • 8
    selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）（二）
    69
  • 9
    selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）（一）
    74
  • 10
    python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
    55

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • Ajax入门

    • 相关电子书

    更多
  • WEB浏览器中即将发生的安全变化
  • 基于浏览器的实时构建探索之路--玄寂
  • 基于浏览器的实时构建探索之路

    • 相关实验场景

    更多
  • WEB网页编程实战
    • 下一篇
    阿里云OSS设置跨域访问