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读取动态数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现仿百度瀑布流的方法

    js实现仿百度瀑布流的方法

    这篇文章主要介绍了js实现仿百度瀑布流的方法,以完整实例形式分析了js仿百度瀑布流的相关样式与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JS使用Date对象实时显示当前系统时间简单示例

    JS使用Date对象实时显示当前系统时间简单示例

    这篇文章主要介绍了JS使用Date对象实时显示当前系统时间,涉及javascript基于定时器动态操作Date对象相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • JS中call(),apply(),bind()函数的区别与用法详解

    JS中call(),apply(),bind()函数的区别与用法详解

    这篇文章主要介绍了JS中call(),apply(),bind()函数的高级用法详解,需要的朋友可以参考下
    2022-12-12
  • webpack@v4升级踩坑(小结)

    webpack@v4升级踩坑(小结)

    这篇文章主要介绍了webpack@v4升级踩坑(小结),之前就尝试了升级,由于部分插件的原因,未能成功,今天就来试一下在我的项目中升级会遇到哪些坑。感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 微信小程序事件流原理解析

    微信小程序事件流原理解析

    这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 原生JS获取元素集合的子元素宽度实例

    原生JS获取元素集合的子元素宽度实例

    本文主要对原生JS获取元素集合的子元素宽度的实现方法进行介绍,代码详细,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JavaScript 学习点滴记录

    JavaScript 学习点滴记录

    HTML DOM (Document Object Model文档对象模型) DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件. DOM是以层次结构组织的节点或信息片断的集合.
    2009-04-04
  • JavaScript实现经典排序算法之选择排序

    JavaScript实现经典排序算法之选择排序

    这篇文章主要为大家详细介绍了JavaScript实现经典排序算法之选择排序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript中的replace函数(带注释demo)

    javascript中的replace函数(带注释demo)

    在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url.一个string.replace("xx","yy") 替换字符串 返回一个新的字符串,该方法并不改变字符串本身。下面通过本文给大家介绍javascript中的replace函数
    2018-01-01
  • JavaScript代码简单实现求杨辉三角给定行的最大值

    JavaScript代码简单实现求杨辉三角给定行的最大值

    求杨辉三角给定行的最大值的的方法或许有很多,下面使用js代码简单实现下,感兴趣的朋友可以参考下
    2013-10-10

最新评论