ECharts 异步加载数据详解

最新推荐文章于 2024-05-13 19:09:20 发布

风吹我亦散

最新推荐文章于 2024-05-13 19:09:20 发布

阅读量5.4k

点赞数 5

分类专栏： # ECharts 文章标签：可视化

本文链接：https://blog.csdn.net/weixin_45468845/article/details/106753717

版权

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

简单来说，就是动态的往option里面添加数据
因为要使用到jQuery和echarts，所以要引入

在这里插入图片描述

往坐标轴中动态添加数据

可以先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。
先构建一个空的坐标轴：

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        //初始化option，先显示一个空的坐标轴
		option = {
   
            title: {
   
                text: '异步数据加载示例'
            },
            tooltip: {
   },
            legend: {
   
                data:['销量']
            },
            xAxis: {
   
                data: []
            },
            yAxis: {
   },
            series: [{
   
                name: '销量',
                type: 'bar',
                data: []
            }]
        };
        myChart.setOption(option);
    </script>
</body>

在这里插入图片描述
添加数据：

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        //初始化option，先显示一个空的坐标轴
        option = {
   
            title: {
   
                text: '异步数据加载示例'
            },
            tooltip: {
   },
            legend: {
   
                data:['销量']
            },
            xAxis: {
   
                data: []
            },
            yAxis: {
   },
            series: [{
   
                name: '销量',
                type: 'bar',
                data: []
            }]
        };
        //fetchData 中的参数是一个匿名方法，参数就是
        fetchData(function (data) {
   
            myChart.setOption({
   
                xAxis: {
   
                    data: data.categories //设置x轴的值
                },
                series: [{
   
                    name: '销量',// 根据名字对应到相应的系列
                    data: data.data //第一个data是下面的cb，相当于cb.data
                }]
            });
        });
        
        //定义函数fetchData,传入参数cb
        function fetchData(cb) {
   
            // 通过 setTimeout 模拟异步加载
            //function(){
   ...} 是一个函数表达式（即匿名函数）
            setTimeout(function () {
   
                cb({
   
                    categories: ["衬衫","羊毛衫","雪纺衫","裤子"

最低0.47元/天解锁文章

风吹我亦散

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
ECharts 异步加载数据详解

简单的数据初始化是在setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。var myChart = echarts.init(document.getElementById('main'));$.get('data.jso
复制链接

扫一扫