Echarts 图表数据通过 Ajax 动态加载

╰+哭是因爲堅強的太久メ 2022-03-26 06:55 645阅读 0赞

#### 一、介绍 ####

Echarts 配合使用 Ajax 进行数据的动态加载，主要解决了加载一次页面只能加载一次图表的问题，其次在动态加载时衔接合理。

#### 二、HTML代码 ####

<head>
    	<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    </head>
    <body style="height: 50%;">
    	
    	<div id="mydiv"></div>
    </body>

#### 三、JavaScript代码 ####

<script type="text/javascript">
    //创建一个 ECharts 实例
    var myChart = echarts.init(document.getElementById("mydiv"));
    $.ajax({
    	url:$$pageContextPath+"test/test!getData.do",
    	type:'post',
    	data:{'id':id},
    	dataType:'json',
    	success:function(data) {
    		var option = {
    			xAxis: {
    				type: 'category',
    				data: data[0]
    			},
    			yAxis: {
    				type: 'value'
    			},
    			series: [{
    				data: data[1],
    				type: 'bar'
    			}]
    		};
    		//设置图表实例的配置项以及数据
    		if (option != null && typeof option === "object") {
    			myChart.setOption(option, true);
    		}
    	}
    });
    		
    //定时：每500毫秒向后台请求数据
    setInterval(function () {
    	/*
    	 * 动态数据加载
    	 *
    	 * 方式一：（官网不推荐此种方式，
    	 * 因为在上面使用了myChart.setOption(option, true)时已经将一些项设置上了默认值，
    	 * 再使用下面语句时这些默认项将失效，再重新设置）
    	 * option.xAxis.data=data[0];
    	 * option.series[0].data=data[1];
    	 * myChart.setOption(option, true);
    	 *
    	 */
    	 //方式二
    	$.ajax({
    		url:$$pageContextPath+"test/test!getData.do",
    		type:'post',
    		data:{'id':id},
    		dataType:'json',
    		success:function(data) {
    			myChart.setOption({
    				xAxis: {
    					data: data[0]
    				},
    				series: [{
    					data: data[1]
    				}]
    			});
    		}
    	});
    }, 500);
    </script>

注意：这个 JavaScript 代码需要等 body 加载完才能起作用，因为代码`var myChart = echarts.init(document.getElementById("mydiv"));` 中 `document.getElementById("mydiv");`是获取已加载的 DOM；如果没加载完就获取不到，接着之后的代码就无效了。

发表评论取消回复

表情：

评论列表（有 0 条评论，645人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts异步使用ajax 加载数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

痛定思痛。/ 2024年04月17日 06:26/ 0 赞/ 56 阅读

相关 Echarts - 延长图表加载动画时间

前言每当页面加载完毕后，图表会有一个动画效果，利用两个配置项即可延长加载动画。实现方法在 `series` 配置项里加入以下代码： // 时间越长

以你之姓@/ 2022年10月17日 04:07/ 0 赞/ 241 阅读

相关 echarts ajax 动态获取数据

keys 和 values 都是动态数据注意如果数据是{value:335, name:'直接访问'}这种格式需要使用eval('(' + strtojso

末蓝、/ 2022年09月30日 00:59/ 0 赞/ 182 阅读

相关获取动态加载ajax的数据

get\_info import re import urllib2 import json import pandas as pd

﹏ヽ暗。殇╰゛Y/ 2022年06月07日 02:53/ 0 赞/ 204 阅读

相关 vue中引入Echarts异步加载数据更新图表

对于这个问题，刚开始觉得比较简单，但是无法渲染图表后来才发现，我用ajax异步加载数据，当图表渲染的时候，数据还没有拿到，这样没有数据，自然不能渲染图表。找到了一个

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 09:44/ 0 赞/ 303 阅读

相关 django echarts饼图数据动态加载

后台关键代码： data = {} keys与values分别为该数据的键数组，值的数组。这里循环为字典添加对应键值 for k, v in z

朴灿烈づ我的快乐病毒、/ 2022年05月15日 22:49/ 0 赞/ 313 阅读

相关 echarts动态加载数据无法更新series 无法更新图表

最近遇到一个Echarts图表无法动态更新数据的问题最初我在option中设置series的值为一个数组，想着通过修改数组来动态更新图表，但是没变化，后来发觉

Dear 丶/ 2022年05月15日 10:22/ 0 赞/ 924 阅读

相关 Echarts 图表数据通过 Ajax 动态加载

一、介绍 Echarts 配合使用 Ajax 进行数据的动态加载，主要解决了加载一次页面只能加载一次图表的问题，其次在动态加载时衔接合理。二、HTML代码

╰+哭是因爲堅強的太久メ/ 2022年03月26日 06:55/ 0 赞/ 646 阅读

相关 Echarts通过Ajax实现动态数据加载

Echarts通过Ajax实现动态数据加载用jquery的ajax来异步加载echarts图表数据，下面已一个简单的饼状图为例： ------------------

忘是亡心i/ 2022年02月14日 08:35/ 0 赞/ 292 阅读

相关 ngx-echarts 图表数据动态更新

使用echarts绘制图表时，初次赋值数据正常展示，重新获取数据之后，图表没有跟着动态刷新。解决的办法是： html文件 <div echarts [options

短命女/ 2021年11月09日 14:42/ 0 赞/ 454 阅读