Echarts 动态数据绑定-详解

最新推荐文章于 2025-04-20 13:35:01 发布

weixin_40227845

最新推荐文章于 2025-04-20 13:35:01 发布

阅读量3.6k

点赞数 2

分类专栏： javaScript 文章标签： ECHARTS NODEJS JS

本文链接：https://blog.csdn.net/weixin_40227845/article/details/101040729

版权

javaScript 专栏收录该内容

5 篇文章

订阅专栏

Echarts 动态数据绑定
从简单的小例子介绍-可视化图表的动态数据绑定，抛砖引玉
绑定多组数据
很多时候需要展示的数据不单单是一组数据，很多时候会进行一个数据对比。这个时候只需要在series中增加一组数据，legend中添加一下这个数据组的name；
静态篇：

<html>
<head>
    <title>ECharts.js 数据绑定</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
    <div id="chartmain" style="width:600px; height: 400px;"></div>
    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'ECharts 数据统计'
            },
            legend:{
                data:['访问量','用户量']
            },
            xAxis:{
                data:["Android","IOS","PC","Other"]
            },
            yAxis:{},
            series:[
            {
                name:'访问量',
                type:'bar',
                data:[180,420,333,83]
            },
            {
                name:'用户量',
                type:'bar',
                data:[125,330,230,60]
            }
            ]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

数据异步加载一
EChart中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

1）先准备一份模拟JSON数据
{“name”:[“A”,"B,“B”,“Dr”],“data”:[44,440,444,400]}
2)

<script type="text/javascript">        
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));        
        //异步加载的配置项和数据显示图表
        $.get('data.json').done(function (data) {
            data = eval('('+data+')');            
            myChart.setOption({
                title:{
                    text:'ECharts 异步加载数据'
                },
                tooltip:{},
                legend:{
                    data:['访问量']
                },
                xAxis:{
                    data:data.name
                },
                yAxis:{},
                series:[
                    {
                        name:'访问量',
                        type:'bar',
                        data:data.data
                    }
                ]
            })
        })


    </script>

数据异步加载二

<script type="text/javascript">        
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));        
        //设置图标配置项
        myChart.setOption({
            title:{
                text:'ECharts 异步加载数据'
            },
            tooltip:{},
            legend:{
                data:['访问量']
            },
            xAxis:{
                data:[]
            },
            yAxis:{},
            series:[
                {
                    name:'访问量',
                    type:'bar',
                    data:[]
                }
            ]
        })
        //异步加载数据
        $.get('data.json').done(function (data) {
            data = eval('('+data+')');            
            myChart.setOption({                
                xAxis:{
                    data:data.name
                },                
                series:[
                    {    
                        //根据名字对应到相应的系列
                        name:"访问量",
                        data:data.data
                    }
                ]
            })
        })
    </script>

Loading动画加载

//打开loading动画
        myChart.showLoading();
        //加载数据函数
        function bindData(){
            //为了效果明显，我们做了延迟读取数据
            setTimeout(function(){                
                //异步加载数据
                $.get('data.json').done(function (data) {                    
                    //获取数据后，隐藏loading动画
                    myChart.hideLoading();
                    data = eval('('+data+')');            
                    myChart.setOption({
                        xAxis:{
                            data:data.name
                        },
                        series:[
                            {
                                //根据名字对应到相应的系列
                                name:"访问量",
                                data:data.data
                            }
                        ]
                    })
                })
            },2000)
        }
        
        bindData();

    #最后切记 JSON数据一定要加载在 服务端

在这里插入图片描述