正文

echarts.js学习动态数据绑定

南夏de博客  2022-02-15  697

关键词：

Echarts 数据绑定

简单的统计表已经可以生成，不过之前图标数据都是直接写在参数里面的，而实际使用中，我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。

绑定多组数据

很多时候需要展示的数据不单单是一组数据，很多时候会进行一个数据对比。这个时候只需要在series中增加一组数据，legend中添加一下这个数据组的name

<!DOCTYPE html>
<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 填入数据和配置项就行。

绑定数据的方式有两种，一种是写写好一些图表参数，然后数据留空，然后在异步读取数据的时候，绑定数据。还有一种就是直接异步读取数据的时候同时设置图表参数和数据绑定。

首先我们准备一份需要加载的数据文件data.json，数据内容：

{"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}

第一种异步加载的时候设置图表参数和绑定数据

    <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>

效果展示

因为是异步加载，所以有时候数据加载会慢，或者延迟。在数据没有加载前，图表这样的。面对这样的图表，肯定会觉得这是没有数据吗，还是图表有问题.对于这块ECharts增加了一个加载动画。

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();

效果展示

数据动态实时更新

<script type="text/javascript">        
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
    var base = + new Date(2017,3,8);
    var oneDay = 24*3600*1000;
    var date = [];
    var data = [Math.random()*150];
    var now = new Date(base);
    var day = 30;
    function addData(shift){
        now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');        
        date.push(now);        
        data.push((Math.random()-0.5)*10+data[data.length-1]);
        if (shift) {
            console.log(data);
            date.shift();
            data.shift();
        }
        now = new Date(+new Date(now)+oneDay);        
    }

    for (var i = 0; i < day; i++) {
        addData();
    }
    //设置图标配置项
    myChart.setOption({
        title:{
            text:'ECharts 30天内数据实时更新'
        },
        xAxis:{
            type:"category",
            boundaryGap:false,
            data:date
        },
        yAxis:{
            boundaryGap:[0,'100%'],
            type:'value'
        },
        series:[{
            name:'成交',
            type:'line',
            smooth:true, //数据光滑过度
            symbol:'none', //下一个数据点
            stack:'a',
            areaStyle:{
                normal:{
                    color:'red'
                }
            },
            data:data
        }]
    })
    setInterval(function(){
        addData(true);
        myChart.setOption({
            xAxis:{
                data:date
            },
            series:[{
                name:'成交',
                data:data
            }]
        });
    },1000)
</script>

效果展示

来源：http://www.cnblogs.com/leoxuan/p/6513591.html#top

echarts通过ajax实现动态数据加载

一：<scripttype="text/javascript"src="echarts.min.js"></script><scripttype="text/javascript"src="jquery-1.12.3.js"></script>二：　查看详情

echarts动态加载堆叠柱状图的实例

一、引入echarts.js文件（下载页:http://echarts.baidu.com/download.html）二、HTML代码：<divstyle="width:100%;height:400px;"id="main"></div>三、js代码（获取数据以及对数据的处理方法）：functionloadData(callback){$.ajax({url:‘test 查看详情

echarts图表学习(代码片段)

...一个玩玩，以备后面做数据分析使用。官网地址：http://echarts.baidu.com/index.html大致了解了下Echarts的各个实例，发现使用起来还是简单易上手的。利用数据库里面的出入库数据做一个年度的出入库折线图。（这里的Echarts-darkTheme.js... 查看详情

echarts.js学习

ECharts.js交互组件ECharts.js有很多的交互组件，一般经常用到的组件有这些： title：标题组件，包含主标题和副标题。 legend：图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。&n... 查看详情

echarts.js这么调成反方向动画

参考技术A　　p>Echarts是前端的图表，只要从后台向前台传递json数据，解析下绑定到Echarts上，百度上有Demo的；前台获取到json，即可显示效果。步骤，改写Echarts调用的js，转化为json：后台取到数据追问运动轨迹能不能换一个方... 查看详情

echarts.js学习交互组件

ECharts.js交互组件ECharts.js有很多的交互组件，一般经常用到的组件有这些：　　title：标题组件，包含主标题和副标题。　　legend：图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。... 查看详情

echarts.js学习交互组件

学习echart.js移动端显示

ECharts.js移动端显示现在很多时候，我们是在用手机、pad等一些移动端设备来进行办公获取数据。所以我们的图表很多时候是需要用移动端设置来查看的，而我们的图表有时候因为数据的偏多，会出现遮挡和重叠的情况。这个时... 查看详情

echarts动态雷达图后台数据怎么加载

...t="utf-8"><title>title</title><scriptsrc="echarts.js"></script> <scriptsrc="jquery.min.js"></script></head><body><divid="mainAnaylsis"style="width:750px;height:500px;"></div><scripttyp... 查看详情

echarts3.0初学感想及学习中遇到的瓶颈

...东西，今天趁着手头工作完成总结一下吧，说实话，其实ECharts就是图表绚丽，展示数据渲染效果更加强烈，从2.0到3.0做得更加精致，不多比比，正题首先你想使用必须要引入js/json文件，最主要的文件是echarts.js 这个可以... 查看详情

20172305《程序设计与数据结构》第八周学习总结

201723052017-2018-2《程序设计与数据结构》第八周学习总结教材学习内容总结本周内容主要为书的10.1-10.6的内容：第十章1.后绑定(动态绑定)2.继承与接口实现的多态性3.排序(选择排序法和插入排序法)4.搜索(线性搜索和二分搜索)教材... 查看详情

《程序设计与数据结构》第八周学习总结

学号20172326《程序设计与数据结构》第八周学习总结教材学习内容总结后绑定在程序执行时执行多态性可由继承与接口实现排序有选择法排序与插入法排序搜索分为线性搜索与二分搜索算法，同一类型的不同方法可能解决同一问... 查看详情

手把手教你做出数据可视化项目动态模拟航班飞行路线(代码片段)

学习笔记--echarts(代码片段)

绘制一个简单的柱状图<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ECharts</title><scriptsrc="echarts.min.js"></script></head&g 查看详情

“全栈2019”java第五十五章：方法的静态绑定与动态绑定

难度初级学习时间10分钟适合人群零基础开发语言Java开发环境JDKv11IntelliJIDEAv2018.3文章原文链接“全栈2019”Java第五十五章：方法的静态绑定与动态绑定下一章“全栈2019”Java第五十六章：多态与字段详解学习小组加入同步学习小... 查看详情

echarts.js使用心得

...加入！群号：127768464最近刚刚做了一个项目，需求是使用eCharts实现实时监控，可以动态的增加和删除数据，可以全屏展示，趁着现在还没忘干净，整理一下使用过程中出现的问题和经验。可能有分析的不到位的地方，不喜勿喷... 查看详情

echarts学习笔记

1.Ecahrts使用首先需要引用js文件Echarts.js 然后定义一个带id的容器（div就可以）然后就可以初始化echarts了↓这是柱形图<h2class="content-tit">本校各年级教材费用</h2><divclass="chart-boxclearfix"><divclass="zhu-img-1"id="Ba 查看详情

第六节:vue指令:v-bind动态属性绑定

参考技术A上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.v-bind:指令会将普通属性的值变为表达值,比如显示... 查看详情