<!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. Ubuntu 12.04解决重启后resolv.conf清空的问题

    这跟以前用RHT系的 情况是完全不一样的: 在google上搜了一下,发现这里面还真有些奥妙: 1 /etc/resolv.conf 其实是一个Link 它其实指向的是 /run/resolvconf ...

  2. 文本框input:text

      文本框 CreateTime--2017年4月24日10:40:40 Author:Marydon 一.文本框 (一)标签 <input type="text"/> ...

  3. eclipse 修改maven项目的jdk版本

      eclipse 修改maven项目的jdk版本 CreationTime--2018年6月8日10点29分 Author:Marydon 1.情景展示 jdk版本太低,如何修改 2.错误方式 第一 ...

  4. ASP.NET 性能监控和优化入门

    关键要点: 只有与应用指标相关联,基础设施指标才能最大发挥作用. 高效性能优化的关键在于性能数据. 一些APM工具为ASP.NET提供了开箱即用的支持,这样入门使用ASP.NET仅需最小限度的初始设置 ...

  5. Tomcat servers.xml 无注释版

    <?xml version='1.0' encoding='utf-8'?> <Server port="8005" shutdown="SHUTDOW ...

  6. Android 进程间通信——Service、Messenger

    概述 介绍绑定服务端的三种方式:同一进程绑定服务.跨进程绑定服务(Messenger).跨进程绑定服务(aidl). 重点说一下通过Messenger.Service实现的进程间通信. 详细 代码下载 ...

  7. C-常用字符串操作函数详解

    //使用字符串操作应时刻注意字符串或者数组长度!!避免溢出!! 1. size_t strlen(char const *str); //计算字符串长度, 注意返回size_t类型的值, 即unsig ...

  8. nyoj------------找球号(一）

    找球号(一) 时间限制:3000 ms  |           内存限制:65535 KB 难度:3   描述 在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0&l ...

  9. RHEL7 -- 通过gerp使用正则表达式

    正则表达式常会含有shell元字符(如S.*等),建议使用单引号('')来括起行令上的正则表达式 1.行定位符号 行首定位符号^和行尾定位符$ #找出以s开头的行: # grep '^s' /etc/ ...

  10. [转] 基本RS触发器

    在触发器中,最简单的触发器是基本RS触发器,它由两个与-非门(或者两个或-非门)来组成. 图5.2.1(a)是由与-非门构成的基本RS触发器,由图看出,基本RS触发器有两个输入端(和)和两个输出端(和 ...