备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2017-12-14 1765
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前言：　　使用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
关键词：
ECharts图表
ajax动态
ajax .net
.NET ajax
.NET交互
swjian1997
目录
相关文章
穆雄雄.
|
1月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
穆雄雄.
30 1
祈澈菇凉
|
5月前
|
前端开发 JavaScript
Echarts堆叠折线图ajax获取数据展示
Echarts堆叠折线图ajax获取数据展示
祈澈菇凉
70 0
漏刻有时
|
9月前
|
JSON JavaScript 前端开发
超燃，拿来即用！Echarts动态排名柱状图(自适应电脑和手机端)说明文档
超燃，拿来即用！Echarts动态排名柱状图(自适应电脑和手机端)说明文档
漏刻有时
179 0
GoodTime
|
1月前
|
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
174 2
漏刻有时
|
9月前
|
前端开发 数据可视化 JavaScript
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
漏刻有时
76 0
祈澈菇凉
|
5月前
|
JSON 数据格式
Echarts+ajax实现一个简单折线图
Echarts+ajax实现一个简单折线图
祈澈菇凉
33 0
祈澈菇凉
|
5月前
|
JSON 前端开发 数据格式
Echarts+ajax实现多条折线图
Echarts+ajax实现多条折线图
祈澈菇凉
40 0
祈澈菇凉
|
5月前
|
JSON 数据格式
Echarts+ajax实现叠堆柱状图
Echarts+ajax实现叠堆柱状图
祈澈菇凉
28 0
祈澈菇凉
|
5月前
|
JSON 前端开发 数据格式
Echarts饼状图数据交互请求ajax自定义颜色
Echarts饼状图数据交互请求ajax自定义颜色
祈澈菇凉
23 0
祈澈菇凉
|
5月前
|
JSON 数据格式
Echarts饼状图交互数据
Echarts饼状图交互数据
祈澈菇凉
32 0

热门文章

最新文章

  • 1
    C#/.NET/.NET Core优秀项目和框架2024年3月简报
  • 2
    【干货】Java开发者快速上手.NET指南
  • 3
    MQTT常见问题之调用.net sdk 报“不知道这样的主机”如何解决
  • 4
    .NET智慧手术室管理平台源码
  • 5
    .NET开源、免费、强大的交互式绘图库
  • 6
    .NET开源免费、功能强大的 Windows 截图录屏神器
  • 7
    .NET开源、免费、跨平台的Git可视化管理工具
  • 8
    .NET开源快速、强大、免费的电子表格组件
  • 9
    对象存储oss使用问题之OSS SDK .net 使用下载例程报错如何解决
  • 10
    .NET从入门到精通，零基础也能搞定的基础知识教程
  • 1
    echarts 关于折线统计图常用的属性设置--超详细（附加源码）
    17
  • 2
    echarts图表
    8
  • 3
    echarts 横纵分割线颜色透明度
    13
  • 4
    【统计图】Echarts实现多条折线图渐变堆叠效果
    13
  • 5
    Vue引入Echarts图表的使用
    12
  • 6
    Spring Boot整合 mybatisplus（后端） Vue+echarts+Element UI+axios（前端）---前后端项目实例demo
    27
  • 7
    web前端-Echarts-5.3高级可视化和图表组合布局
    39
  • 8
    web前端-Echarts-5.3安装配置和案例
    20
  • 9
    【数学建模竞赛】超赞作图网站分享Apache ECharts
    38
  • 10
    ECharts helloworld
    23

    • 相关课程

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

    • 相关电子书

    更多
  • WEB浏览器中即将发生的安全变化
  • 基于浏览器的实时构建探索之路
  • 现代Javascript高级教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • WEB网页编程实战
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）