<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="../js/tld/echarts3.min.js"></script>

    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">

        var myChart;

        function display() {

            myChart = echarts.init(document.getElementById('main'));

            myChart.setOption({

                title: {

                    text: '异步数据加载示例'

                },

                tooltip: {},

                legend: {

                    data: ['销量']

                },

                xAxis: {

                    data: []

                },

                yAxis: {},

                series: [{

                    name: '销量',

                    type: 'bar',

                    data: [1, 2, 3, 4, 5, 6]

                }]

            });

            // 初始 option

            option = {

                title: {

                    text: '异步数据加载示例'

                },

                tooltip: {},

                legend: {

                    data: ['销量']

                },

                xAxis: {

                    data: []

                },

                yAxis: {},

                series: [{

                    name: '销量',

                    type: 'bar',

                    data: []

                }]

            };

        }

        function fetchData(cb) {

            // 通过 setTimeout 模拟异步加载

            cb({

                categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],

                data: [Math.random(5), Math.random(20), Math.random(36), Math.random(10), Math.random(10), Math.random(20)]

            });

        }

        function abc() {

            fetchData(function(data) {

                myChart.setOption({

                    xAxis: {

                        data: data.categories

                    },

                    series: [{

                        // 根据名字对应到相应的系列

                        name: '销量',

                        data: data.data

                    }]

                });

            });

        }

    </script>

    <input type="button" value="display" onclick="display()" />

    <input type="button" value="refresh" onclick="abc()" />

</body>

</html>

点击refresh按钮：

再次点击refresh按钮

echarts实现动态传入数据刷新【可执行】的更多相关文章

  1. 如何在小程序自定义组件和动态传入数据小demo

    在开发过程中,我们会将页面常用功能抽象为一个组件,这样既方便又可以避免代码冗余.小程序中也提供了自定义组件,了解Vue的伙伴们会发现其实和Vue的组件化很相似.这里用返回顶部功能来说说如何自定义组件, ...

  2. echarts通过ajax动态获取数据的方法

    echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...

  3. Ext.grid.Panel 数据动态改变后刷新grid

    gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...

  4. echarts动态添加数据

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

  5. MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新

    MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新 关键代码: //发送数据通知 //from txwtech@163.com LRESULT CCommSampleDlg::O ...

  6. React使用jquery方式动态获取数据

    好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...

  7. MyBatis，动态传入表名，字段名的解决办法

    转载:http://luoyu-ds.iteye.com/blog/1517607 今天做项目,遇到的问题就是需求修改数据表的记录,而且字段名都不是固定的,也就是说是需要通过参数传入的, 本来这也不是 ...

  8. .NET+Ajax+ashx 实现Echarts图表动态交互

    前言: 使用Echarts展示图表效果,在这里只做了四种案例:折线.柱状.圆形.雷达.当初是一位朋友用到Echarts展示数据,他没有太多时间弄,所以我就帮他搞出来,当初刚接触的时候也是一头雾水,不知 ...

  9. IOS tableView的数据刷新

    1.tableView的刷新 1> 数据刷新的总体步骤 * 修改模型数据 * 刷新表格(刷新界面) 2> 刷新表格(刷新界面)的方法 * 全局刷新(每一行都会重新刷新) - (void)r ...

随机推荐

  1. ORA-01109:数据库未打开(解决)

    SQL> startup mountORA-01081: 无法启动已在运行的 ORACLE - 请首先关闭它SQL> shutdown immediateORA-01109: 数据库未打开 ...

  2. Linux下监视NVIDIA的GPU使用情况（转）

    在使用TensorFlow跑深度学习的时候,经常出现显存不足的情况,所以我们希望能够随时查看GPU时使用率.如果你是Nvidia的GPU,那么在命令行下,只需要一行命令就可以实现. 1. 显示当前GP ...

  3. 原创：【微信小程序】客服消息教程（后台以PHP示例）

    1.不需要自己手动开发客服消息的,直接接入客服,不开启消息推送即可.这种模式不多讲. 2.公众号后台开启消息推送模式,配置服务器URL.TOKEN.随机串.数据模式.数据格式(XML或JSON),这个 ...

  4. eclipse新建maven工程的各种坑

    尽量按照最后强烈推荐的那篇创建maven工程.  1.jsp文件头报错 2.xml配置文件头红叉 3.Archive for required library...blabla 4.pom依赖出错 5 ...

  5. java配置使用手册

    进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置: 1.下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是 ...

  6. 学习JUnit

    一.为什么测试很重要? 塑造系统的设计.我们知道输入和输出应该是什么样的,但是我们需要创建什么对象来做到这一点呢?代码应该塑造成什么样的"形状"?编写测试可以让我们知道应该创建什么 ...

  7. 浅谈 JavaScriptCore

    来源:XcodeMen(王瑞华) 链接:http://t.cn/RVqQI5p 本文由我们团队的王瑞华童鞋撰写. OS X Mavericks 和 iOS 7 引入了 JavaScriptCore 库 ...

  8. POJ 2965 The Pilots Brothers' refrigerator （DFS）

    The Pilots Brothers' refrigerator Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15136 ...

  9. JMeter学习笔记--JMeter监听器

    监听器(Listeners)是一种展示采样结果的测试元件,采样结果可以通过树.表格.图片加以展示,或者简单地写入某个结果文件之中. 注:不同的监听器通过不同的方式展示服务器响应信息,但它们都将同样的原 ...

  10. C 标准IO 库函数与Unbuffered IO函数

    先来看看C标准I/O库函数是如何用系统调用实现的. fopen(3) 调用open(2)打开指定的文件,返回一个文件描述符(就是一个int 类型的编号),分配一 个FILE 结构体, 通常里面包含了: ...