echart+ajax 异步数据加载和更新

最新推荐文章于 2025-03-12 12:21:28 发布

半坡人

最新推荐文章于 2025-03-12 12:21:28 发布

阅读量1.3k

点赞数

分类专栏： spring boot echart

本文链接：https://blog.youkuaiyun.com/sy755754582/article/details/90454187

版权

spring boot 同时被 2 个专栏收录

5 篇文章

订阅专栏

echart

2 篇文章

订阅专栏

该博客是ECharts异步数据更新的入门示例。介绍了在ECharts中实现异步数据更新的方法，即图表初始化后用jQuery等工具异步获取数据，再通过setOption填入。还说明了准备工作所需的js文件，以及index.html和controller层的操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

说明

入门示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

准备工作

js文件：

jquary.js 提取码：pg1b
echarts.js 提取码：rrzn

index.html

(1). 先设置完其他样式，显示一个空的直角坐标轴，然后获取数据填入数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myTitle</title>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <!--div容器-->
    <div id="mydiv" style="width: 600px;height: 400px"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('mydiv'))
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        });
/body>
</html>

(2). 然后通过$.post()来动态加载数据

<script type="text/javascript">

		...
		
       //异步加载数据
        $.post("ajax",function (msg) {
            // 填入数据
            myChart.setOption({
                xAxis: {
                	//categories标签
                    data: msg.categories
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    //data标签
                    data: msg.data
                }]
            });
        })
</script>

controller层

(3). 根据ajax中的标签在controller中的方法中设置对应的值

	@Controller
public class IndexController {

    @RequestMapping("/index")
    public String show() {
        return "index";
    }
    
    @RequestMapping("ajax")
    @ResponseBody //把java对象转换为json对象
    public Map<String,Object> ajax(){
        List data= new ArrayList<Integer>();
        data.add(5);
        data.add(20);
        data.add(36);
        data.add(10);
        data.add(20);
        List categories = new ArrayList<String>();
        categories.add("毛衣");
        categories.add("衬衫");
        categories.add("袜子");
        categories.add("大衣");
        categories.add("鞋子");
        Map map = new HashMap<String,Object>();
        map.put("categories",categories);
        map.put("data",data);
        return map;
    }
}

测试结果：
在这里插入图片描述