<!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. 1个比较简单的使用java反射机制获取前台数据进行数据封装的例子

    //利用反射机制 和 从request获取所有参数的形式来构建查询对象 CustomerChooseSearchParma searchObject = new CustomerChooseSearc ...

  2. newInstance() 的参数版本与无参数版本

    通过反射创建新的类示例,有两种方式: Class.newInstance() Constructor.newInstance()  以下对两种调用方式给以比较说明: Class.newInstance ...

  3. LNMP的的编译安装全过程

    一.对系统进行更新 yum update -y lsb_release -a 二.禁用SELINUX sed -i '/SELINUX/s/enforcing/disabled/' /etc/seli ...

  4. Maven 向私服nexus上传jar

    1. 单个jar上上传 方法一:利用界面(省略) 方法二:利用命令行: 1). 安装到本地库:mvn install:install-file -DgroupId=org.apache.hadoop ...

  5. IntelliJ Idea解决Could not autowire. No beans of 'xxxx' type found的错误提示

    本文转自:http://blog.csdn.net/u012453843/article/details/54906905 1.问题描述 在Idea的spring工程里,经常会遇到Could not ...

  6. Mybatis中的@SelectKey注解

    一.创建Maven项目 在pom.xml中,添加mybatis依赖,mysql-jdbc依赖,把编译版本改为1.8 你问,为啥mybatis不会自动依赖mysql-jdbc,需要手动写明?答:因为my ...

  7. python学习笔记011——内置函数dir()

    1 描述 dir()函数可以查看(打印)对象的属性和方法.不管时那种对象(python中一切皆对象)类型(数据,模块)都有自己的属性和方法. dir() 函数不带参数时,返回当前范围内的变量.方法和定 ...

  8. oc 目录结构

    最顶级的oc2是一个项目名,下级的oc2下面的文件是一些程序文件(.m或者.h的文件)和一些界面文件(.xib或者storyboard文件),supporting files文件下面的是资源文件,可以 ...

  9. js面向对象编程：this究竟代表什么？

    在js中this的使用方法非常让人迷惑.有些像Java或者C#中的this,但又不全然一样.依照流行的说法this总是指向调用方法的对象. 1.纯粹函数调用. function ListCommon2 ...

  10. 解决Mac OS X 升级10.10(Yosemite)后ADT(Eclipse)无法找到真机

    升级Yosemite之后继续开发Android,发现当编译版本高于设备版本的时候设备选择器找不到真机了,WTF!难道要改低版本SDK开发不成?臣妾做不到啊! 后来捣鼓了一阵,发现解决方案有两个: 1. ...