关于Echarts动态数据之图形变换

    我使用的是.net作为后台语言,而与前台aspx中的js进行数据流通是很多人不知道的地方,那么我就先从这里说起。
1. 学过java的都知道java是jsp的脚本语言,同理.net也是aspx的脚本语言,例如调用后台数组使用<%=arr[i]%>,当然这里定义的数组必须是public才能调用,不然会报错,如下图:
2.当然是使用js的一些方法,如ajax,get之类的,下面我就以ajax为例
$('.bt').click(function(){
$.ajax({ 
                url: "all.aspx", 
                type: "Post", 
                 async:false
                dataType: "Text",  //请求到服务器返回的数据类型 
                data: { "year": "2018" },  
                success: function (data) {  
                    var obj = $.parseJSON(data); //这个数据  
                 alert(obj)
                } 
 
            }) 
alert(33)
})
async.默认是true,即为异步方式,$.Ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.Ajax里的success方法,这时候执行的是两个线程。若要将其设置为false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行,也就是说如果没有在获取到数据之前是不会往下进行操作的,就不会有弹窗。

后台获取前台数据, string id = Request["id"]; Response.Write(id); 
            Response.End();
这就是获取数据的方法,那么依据这些动态数据就能有一个可变的图表了。至于实现下拉框选择一个值,展现不同的图表,我有两点建议:1.就是把你要查的东西全部查出来,通过jquery实现切换  2.就是ajax获取后台数据,把数据替换掉。我使用的是第一种方法,前提是下拉框的数据不多,ajax的话,我没有找到把数组转json,好了就到这里了,如果有不对的请指教。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts是一个基于JavaScript的开源可视化库,用于构建交互式的数据可视化图表。它支持多种图表类型,包括折线图、柱状图、饼图、散点图等,并且可以通过动态数据实现实时更新和交互效果。 要实现ECharts动态数据效果,可以通过以下几个步骤: 1. 初始化ECharts实例:首先需要创建一个ECharts实例,并指定一个DOM元素作为容器。 2. 定义图表配置项:通过配置项可以设置图表的样式、数据和交互行为。在配置项中,可以定义一个或多个系列(series),每个系列对应一种图表类型。 3. 更新数据:通过调用ECharts实例的setOption方法,可以更新图表的数据。可以通过定时器、Ajax请求或其他方式获取最新的数据,并将数据更新到配置项中。 4. 刷新图表:调用ECharts实例的方法(如refresh)可以刷新图表,使其显示最新的数据。 下面是一个简单的示例代码,展示了如何使用ECharts实现动态数据效果: ```javascript // 初始化ECharts实例 var myChart = echarts.init(document.getElementById('chartContainer')); // 定义图表配置项 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; // 更新数据 function updateData() { // 模拟获取最新数据 var newData = [150, 180, 200, 90, 120, 160, 140]; option.series.data = newData; // 刷新图表 myChart.setOption(option); } // 每隔一段时间更新数据 setInterval(updateData, 2000); ``` 这段代码创建了一个柱状图,x轴表示星期几,y轴表示某项指标的数值。通过定时器每隔2秒更新一次数据,实现了动态效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值