查看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. mysql(insert + str_to_date)

    str_to_date(date_str, '%Y-%m-%d %H:%i:%s') 替换为 substring_index(date_str, '.', 1); str_to_date(date_s ...

  2. Android版本历史

    版本 Code Name 代号 API 日期 NDK 1.0 Astro 铁臂阿童木  1     1.1 Bender, Petit Four 发条机器人 2     1.5 Cupcake  纸杯 ...

  3. (原创)odoo14下qweb模板的前端与后端语法区别

    1.后端(qweb打包) 后端使用t-inherit 指定继承的模板,使用t-inherit-mode 指定继承的模式,使用xpath定位标记,使用position指定扩展位置. 2.前端 前端仍旧使 ...

  4. robots.txt 文件说明

    robots其实就是指Robots协议,Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站通过 ...

  5. IO学习笔记7

    2.4 多路复用javaAPI 在上面我们简单java代码实现了多路复用,是一个单线程版的.讲上面的epoll代码复制到linux服务器中,使用strace追踪系统调用. javaAPI会根据系统类型 ...

  6. Linux磁盘占满处理

    按一下操作查看大文件在哪里, 清理大文件. 你切换到 / du -sh * 进入占用多的目录,再使用du -sh *找到下一个大目录. 以此类推,删除无用大文件

  7. Katalon-获取文本内容和预期文本对比(get Test)

  8. Beaver解析代码反向生成语法文件

    背景 Beaver是一款LALR的语法生成工具,现在有一个反编译项目的需求,需要将Beaver语法文件编译后的代码反向生成语法文件的需求,不去评论需求多么傻逼,直接干 设计 flowchart 语法文 ...

  9. springboot thymeleaf常用标签

    xmlns:th="http://www.w3.org/1999/xhtml" <tr th:each="user,i : ${list}" th:cla ...

  10. python读取xml格式数据

    读取节点文本值和,属性值 # -*- coding: UTF-8 -*- from xml.dom import minidom dom=minidom.parse('F:\\python_proje ...