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 解释器过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
微信小程序实现星星评分效果
这篇文章主要为大家详细介绍了微信小程序实现星星评分效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
Bootstrap风格的zTree右键菜单
这篇文章主要介绍了Bootstrap风格的zTree右键菜单功能，实现代码分为html，css和js三部分，代码简单易懂，非常不错，需要的朋友可以参考下
2017-02-02
bootstrap-table实现服务器分页的示例（spring 后台）
本篇文章主要介绍了bootstrap-table实现服务器分页的示例（spring 后台），具有一定的参考价值，有兴趣的可以了解一下
2017-09-09
可以拖动的div 实现代码
可以拖动的div是一个比较难以做到的效果，特别是在浏览器对于js代码的运行效率还不是足够高的情况下，不过听说firefox对于js的支持正在增加，大概是料到了js在网页浏览的桌面化趋势中所占的重要地位吧。
2009-06-06
JS获取select的value和text值的简单实例
本篇文章主要是对JS获取select的value和text值的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
一篇文章彻底讲清楚前端热更新
这篇文章主要介绍了前端热更新的相关资料,热更新让前端开发更加高效,通过最小代价替换代码并保留页面状态,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-02-02
uniapp使用uni.chooseLocation()打开地图选择位置详解
这篇文章主要给大家介绍了关于uniapp使用uni.chooseLocation()打开地图选择位置的相关资料,因为最近在项目中遇到一个要用户授权位置且可以用户自己选择位置的功能,需要的朋友可以参考下
2023-06-06
js函数返回多个返回值的示例代码
js函数一般都是返回一个值，在本例教程中将为大家介绍下如何返回多个返回值，喜欢的朋友可以了解下
2013-11-11
uniapp中scroll-view实现自动滚动到最底部的方法
这篇文章主要给大家介绍了关于uniapp中scroll-view实现自动滚动到最底部的相关资料,在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求,需要的朋友可以参考下
2023-10-10