<!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. MVC3循环添加数据

    foreach (var item in orderdetails) { var billdetails = new BillDetail(){BillCode = billoflading.Bill ...

  2. Unix 网络编程 读书笔记2

    第三章 套接字编程简介 每一个 Socket 都用一个半相关描述:{协议,本地地址,本地端口}一个完整的 Socket 则用一个相关描述{协议,本地地址,本地端口,远程地址,远程端口}每一个 Sock ...

  3. java instanceof和isInstance的关系 精析

      1.instanceof 用途:判断这个object对象是不是这种Class类型. 语法: boolean result = object instanceof Class; 用法: 判断obje ...

  4. 〖Android〗OK6410a的Android HAL层代码编写笔记

    一.编写LED灯的Linux驱动程序代码 之所以使用存在HAL层,是为了保护对硬件驱动过程的逻辑与原理: 所以,残留在Linux驱动层的代码,只保留了基本的读写操作,而不含有关键的逻辑思维: 1. l ...

  5. oracle卸载清除注册表(彻底卸载)

    用Oracle自带的卸载程序不能从根本上卸载Oracle,从而为下次的安装留下隐患,那么怎么才能完全卸载Oracle呢? 那就是直接注册表清除,步骤如下: . 开始->设置->控制面板-& ...

  6. nginx的Mainline version、Stable version、Legacy version的版本区别

    nginx的Mainline version.Stable version.Legacy version的版本区别 创建时间:2014-01-16 10:30:37最后修改:2014-09-23 20 ...

  7. 小程序三：视图层之WXML

    WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. [1]数据绑定 1.1 简单绑定 数据绑定使用" ...

  8. 用户研究Q&A（1）

    近来,不少同事开始认同用户研究的价值,希望通过接触,理解和研究用户来获取提升产品的有效信息.这绝对是件好事,因为我一直抱持的理念是,研究并不是藏在实验室或者握在少部分人手中的稀罕货,更重要是一种理念和 ...

  9. HDUOJ-----X问题

    X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  10. leetcode719:直线上的第k近点对

    问题描述 给定数组a[N],可以确定C(N,2)个点对,也就确定了C(N,2)个距离,求这些距离中第k小的距离(k<C(N,2)). 思路 看到第k小.第k大这种问题,首先想到二分法. 把求值问 ...