查看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. python读取word文档,插入mysql数据库实例

    表格内容如下: 1.实现批量导入word文档,取文档标题中的数字作为编号 2.除取上面打钩的内容需要匹配出来入库入库,其他内容全部直接入库mysql # wuyanfeng# -*- coding:u ...

  2. Django安装与启动

    安装 python -m pip install Django  查看版本 python -m django --version打开命令行,cd 到一个你想放置你代码的目录,然后运行以下命令: dja ...

  3. 对象有时候打印出来的日志可能是以map的格式存在,转成json格式

    package com.example.mybatiscodehelper.demo;import org.springframework.boot.configurationprocessor.js ...

  4. Nginx的重写功能——Rewrite

    Nginx的重写功能--Rewrite https://huaweicloud.csdn.net/63566cced3efff3090b5f470.html?spm=1001.2101.3001.66 ...

  5. js格式转化

    js对象转json数据(json字符串): let obj = {'name': '张三','age': 18} let data = JSON.stringify(obj); conlose.log ...

  6. Laravel 5.1 LTS 速查表

    https://cs.laravel-china.org/# Artisan // 在版本 5.1.11 新添加,见 http://d.laravel-china.org/docs/5.1/autho ...

  7. 前端面试-经典的Vue面试题

    面试总结三大模块:Vue双向绑定及原理.生命周期.组件通信.Vue官方API 目录:1.Vue双向绑定及原理 1.1你对MVVM是怎么理解的? 1.2你对Vue响应式原理是怎么理解的?是否可以实现一个 ...

  8. python翻译(一)

    有道翻译 # -*- coding: UTF-8 -*- import requests import time import random import hashlib #用于md5加密 ''' 有 ...

  9. Spring MVC文件上传下载

    Spring MVC文件上传下载 单文件上传 底层是使用Apache fileupload 组件完成上传,Spring MVC对这种方式进行封装. pom.xml <dependency> ...

  10. ADC相关内容

    SFDR定义 无杂散动态范围(Spurious Free Dynamic range ,SFDR) 是衡量A/D和D/A数据转换器(ADC/DAC)的指标,表示在杂散分量干扰基本信号或导致基本信号失真 ...