Echarts 开发图表两种方式实现异步数据加载

最新推荐文章于 2024-04-21 10:54:42 发布

Nick Peng

最新推荐文章于 2024-04-21 10:54:42 发布

阅读量4.4k

点赞数 7

分类专栏： Echarts 文章标签： Echarts异步加载数据数据可视化

本文链接：https://blog.youkuaiyun.com/PY0312/article/details/104489237

版权

文章目录

一、异步加载数据方法一
二、异步加载数据方法二 - 推荐

好文章 记得收藏+点赞+关注额！！！

---- Nick.Peng

一、异步加载数据方法一

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行；
附1：jQuery API 中文文档
附2： 前端公共 CDN 在线 JS 库

本地 JSON 数据如下：

{
     
    "type_list":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    "num_list":[5, 20, 36, 10, 10, 20]
}

代码 6 步实现及解析如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>异步加载数据</title>
    <!-- 1. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 2. 引入jQuery.js文件，此处引用的cdn在线js库 -->
    <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js"></script>
    <!-- 3. 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<