Echarts读取动态数据完整代码
更新时间：2023年10月12日 11:32:32 作者：十八只兔
这篇文章主要给大家介绍了关于Echarts读取动态数据的相关资料,使用Echarts画图时,数据一般不是静态写死的,而是通过后端接口动态获取的,需要的朋友可以参考下
前言
使用Echarts画图时，数据一般不是静态写死的，而是通过后端接口动态获取的，因此本文结合官网提供的demo来演示Echarts怎么获取动态数据
Echarts读取动态数据
ECharts 中实现异步数据的更新很简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
step1:创建好相关的工程文件
工程文件目录如下：
js文件夹：存放的是echarts和jquery的相关文件，有了这些文件我们才能使用echarts和jquery的功能：
data文件夹：存放json格式的数据文件，该文件用来模拟我们从后端获取的数据，json文件的内容如下：
step2:ECharts绑定数据
ECharts 绑定数据的方式有两种：
（1）方法一：
直接异步读取数据的同时设置好图表参数和数据绑定
核心代码：可以根据实际情况按照下方标注的地方进行修改：
结果：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.js"></script>
</head>
<body>
<div id="main" style="width: 400px;height:400px;border: 1px solid gray"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
$.get('data/data.json').done(function(data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {},
xAxis: {
data: data.categories
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: data.values
}
]
});
});
</script>
</body>
</html>（2）方法二：
先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据
核心代码：可以根据实际情况按照下方标注的地方进行修改：
结果:
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.js"></script>
</head>
<body>
<div id="main" style="width: 400px;height:400px;border: 1px solid gray"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: []
}
]
});
// 异步加载数据
$.get('data/data.json').done(function(data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [
{
// 根据名字对应到相应的系列
name: '销量',
data: data.values
}
]
});
});
</script>
</body>
</html>总结
到此这篇关于Echarts读取动态数据的文章就介绍到这了,更多相关Echarts读取动态数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发2013-01-01
这两天看书看到了函数式编程那节，感觉学到了挺多东西，之前看别人代码都写的挺漂亮，现在我写的代码是有点乱，所以还是要学习下别人的编程模式2017-03-03
JavaScript使用slice函数获取数组部分元素的方法
这篇文章主要介绍了JavaScript使用slice函数获取数组部分元素的方法,涉及javascript中slice方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
侧栏里的有些内容滚动到页面顶端以后就固定在那个位置，不再跟随滚动条而滚动，想必很多站长朋友都想实现这个效果吧，接下来为大家详细介绍下，感兴趣的你可不要错过了哈2013-03-03
这篇文章主要介绍了js图片向右一张张滚动效果实例代码，有需要的朋友可以参考一下2013-11-11
今天小编就为大家分享一篇layui的数据表格+springmvc实现搜索功能的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了使用 Opentype.js 生成字体子集,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程，其中this指针就是实现面向对象的一个很重要的特性。2015-07-07
这篇文章主要为大家整理了7个JavaScript中Object的常用方法的使用，文中的示例代码讲解详细，对我们掌握JavaScript有一点的帮助，感兴趣的可以了解一下2023-02-02
点亮星星评分后，点击按钮，立即获得分数参数值，方便不想使用ajax传参的朋友2014-07-07
最新评论