首页 前端知识 Echarts:读取动态数据

Echarts:读取动态数据

2024-05-29 10:05:53 前端知识 前端哥 349 160 我要收藏

前言

使用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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10015.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!