查看echarts api -----   https://www.echartsjs.com/zh/api.html#echarts

搜索

1.dispatchAction   执行的关键

2.highlight    变换显示的关键

3.tooltip   变幻时 显示提示框的关键

关键代码:

1. myChartSalarypie.setOption({});   设置自己的的option 内容

2. myChartSalarypie.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: curIndex});

3.myChartSalarypie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: curIndex});

4.myChartSalarypie.dispatchAction({
                                        type:'showTip',
                                        seriesIndex:0,
                                        dataIndex:curIndex
                                    });

跳动的完整代码:

if( runFlag !=null )
                                  {
                                       clearInterval(runFlag);
                                       runFlag = null ;
                                  }
                       if(curIndex == null) {
                           myChartSalarypie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
                        }
                        else {
                            myChartSalarypie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: curIndex});
                            myChartSalarypie.dispatchAction({
                                        type:'showTip',
                                        seriesIndex:0,
                                        dataIndex:curIndex
                                    });
                             
                               runFlag = setInterval(function () {
                                    var dataLen = showDate.length;
                                    // 取消高亮
                                    myChartSalarypie.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: curIndex});
                                    curIndex = (curIndex + 1) % dataLen;
                                    //设置高亮
                                    myChartSalarypie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: curIndex});
                                    myChartSalarypie.dispatchAction({
                                        type:'showTip',
                                        seriesIndex:0,
                                        dataIndex:curIndex
                                    });
                                }, 3000);
                                }
                       openRunFlag=false;

记录一次echarts 中bar 定时跳跃并显示内容的更多相关文章

  1. ECharts 中的事件和行为

    在 ECharts 的图表中用户的操作将会触发相应的事件.开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等. 如下是一个绑定点击操作的示例. ...

  2. ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

    本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641   1.导入包,搭建SSH框架 导入Jquery的JS包,<sc ...

  3. Unity 2D游戏开发教程之游戏中精灵的跳跃状态

    Unity 2D游戏开发教程之游戏中精灵的跳跃状态 精灵的跳跃状态 为了让游戏中的精灵有更大的活动范围,上一节为游戏场景添加了多个地面,于是精灵可以从高的地面移动到低的地面处,如图2-14所示.但是却 ...

  4. echarts 中 柱图 、折线图、柱图层叠

    app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...

  5. Linux中的定时自动执行功能(at,crontab)

    Linux中的定时自动执行功能(at,crontab) 概念 在Linux系统中,提供了两种提前对工作进行安排的方式 at 只执行一次 crontab 周期性重复执行 通过对这两个工具的应用可以让我们 ...

  6. 【Matlab开发】matlab中bar绘图设置与各种距离度量

    [Matlab开发]matlab中bar绘图设置与各种距离度量 标签(空格分隔): [Matlab开发] [机器学习] 声明:引用请注明出处http://blog.csdn.net/lg1259156 ...

  7. WebAPI中的定时处理-使用Quartz.Net

    借鉴: https://blog.csdn.net/lordwish/article/details/78926252 在最近的一篇文章中讲到了如何在web API中实现定时处理,采用的是比较原始的T ...

  8. JSP中页面定时刷新

    1.JSP中页面定时刷新 <% //页面每隔30秒自动刷新一遍 response.setHeader("refresh" , "30" ); %> ...

  9. 提取 ECharts 中的svg地图信息

    地图的需求还是蛮大的,全国都要自己画的话,还是需要投入比较大的人力. ECharts中有地图,那我们能不能把里面的地图文件提取出来呢,主要逻辑在map.js中. 看源代码发现,ECharts中地图信息 ...

  10. Spring中实现定时调度

    1,   内容简介 所谓的定时调度,是指在无人值守的时候系统可以在某一时刻执行某些特定的功能采用的一种机制,对于传统的开发而言,定时调度的操作分为两种形式: 定时触发:到某一时间点上执行某些处理操作: ...

随机推荐

  1. Linux 升级 gcc g++

    Linux 升级 gcc g++ Centos7 上升级 gcc g++ # yum -y install centos-release-scl # yum -y install devtoolset ...

  2. C#笔记誊录

    1.继承 面向对象的三大特征: 封装性 继承性  多态性 一.继承:类与类的关系 为什么会用继承:减少代码重复 优化 空间内存 实现多态 class 基类 { //基类成员 } class 子类:基类 ...

  3. HIVE 调优思路和实践

    1,数据存储调优 1.1 设置压缩: 设置中间数据/输出结果压缩传输,使用snappy格式. hive-site.xml: set hive.exec.compress.output = true # ...

  4. docker 安装mongodb

    一.安装mongodb 我们首先改一下镜像源,避免拉去速度太慢 创建daemon.json文件:位于/etc/docker目录下: 登录阿里云 即可 2.docker 搜索mongo镜像 然后pull ...

  5. ClickHouse 使用

    最近mysql报表数据太多,要转移数据到 clickHouse ,顺便学学该数据仓库的使用 中文文档:https://clickhouse.com/docs/zh/ B站学习视频 : https:// ...

  6. SQL Server 2012主从数据库的订阅和发布,实现数据库读写分离(主从备份)

    学习:https://www.bilibili.com/video/BV13B4y1h7Wu?p=12&spm_id_from=pageDriver&vd_source=3f21d2e ...

  7. Python学习笔记(二)变量的使用

    一.变量的定义 把程序运算的中间结果临时存到内存里,以备后面的代码继续调用,这几个名字的学名就叫做"变量" 可以把变量看做保存信息的容器,它们的目的是在内存中标注和存储数据,然后可 ...

  8. 使用 docker-compose 安装 es、kibana、mysql、redis、kafka

    由于经常的安装虚拟机,每次都要重装环境比较麻烦. 这次写了一个 docker-compose 文件,一次性搞定安装问题. 目录结果如下: --- version: "3.1" ne ...

  9. POD状态整理(持续更新)

    pendding Pod一直停留在Pending状态,可能表示,该Pod不能被调度到某一个节点上------我遇到的一个情况确实是这样的,因为我要mount的卷是在worker1上的,由于pod运行时 ...

  10. 下载安装i5ting_toc

    全部都是以管理员身份运行powershell 1.打开powershell之后输入命令npm i i5ting_toc -g 这样就全局安装了 2.set-ExecutionPolicy Remote ...