eChart折线图动态特效和隔几秒高亮特效

news2024/11/24 11:50:02

示例:

在这里插入图片描述

说明:

因为现在公司经常要做大屏可视化特效,没办法,只能让图尽量动起来(之前开会挨叼了,说俺们深圳做的,不能比西安那些人做的差。。。)

主要代码:

折线图的滚呀滚特效(ts的,改成js把: Objectas any[]两个删了就行了):

let animationChart = (option: Object) => {
  // 动画
  let lowLine = [] as any[];
  var zrUtil = echarts.util;

  if (xData.length > 0) {
    // console.log(xData, sData);
    lowLine = [];

    zrUtil.each(xData, function (item, index) {
      lowLine.push([
        {
          coord: [index, sData[index]],
        },
        {
          coord: [index + 1, sData[index + 1]],
        },
      ]);
    });
  }
  if (option.series.length > 1) {
    option.series[1] = {
      name: "出栏总数",
      type: "lines",
      coordinateSystem: "cartesian2d",
      zlevel: 1,
      smooth: true,
      symbol: "circle",
      effect: {
        show: true,
        smooth: true,
        period: 2,
        symbolSize: 8,
      },
      lineStyle: {
        normal: {
          color: "#00E0FF",
          width: 0,
          opacity: 0,
          curveness: 0,
        },
      },
      data: lowLine,
    };
  } else {
    option.series.push({
      name: "出栏总数",
      type: "lines",
      coordinateSystem: "cartesian2d",
      zlevel: 1,
      smooth: true,
      symbol: "circle",
      effect: {
        show: true,
        smooth: true,
        period: 2,
        symbolSize: 8,
      },
      lineStyle: {
        normal: {
          color: "#00E0FF",
          width: 0,
          opacity: 0,
          curveness: 0,
        },
      },
      data: lowLine,
    });
  }
  // 动画结束
};

使用:(加在Chart.setOption,生成折线图前)

  if (!myChart) {
    myChart = echarts.init(echartsRef.value);
  }
  let option = getOptions();
  animationChart(option);
  myChart.setOption(option);

隔几秒高亮特效:

  let app = {
    currentIndex: -1,
  };
  setInterval(function () {
    let dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: app.currentIndex,
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    console.log(app.currentIndex);
    // 高亮当前图形
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: app.currentIndex,
    });
    // 显示 tooltip
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: app.currentIndex,
    });
  }, 1000 * 10);

使用:
这个放在Chart.setOption后,就是生成图表后面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/648546.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Hexo和Butterfly创建个人技术博客,(7) 配置butterfly主题搭建博客网站主体UI框架

Butterfly官方网站,请 点击进入。 本文面向使用 butterfly theme 的用户, 主题安装方法可查看基于Hexo和Butterfly创建个人技术博客,(1) 初始化博客站点 这章内容。 一、概述 1、什么是theme? Hexo可以认为是一个基础框架,主要提供渲染和插…

平行云——开启通往元宇宙的通道

元宇宙是平行于真实世界的虚拟世界,是新一代互联网。具有真三维、可交互、可沉浸特性的XR,是构建元宇宙的终极数字媒体形态。如何打破XR终端设备与XR内容之间的紧耦合,实现任意平台、任意终端的线上访问,Cloud XR是其必由之路&…

Diffie-Hellman Key Agreement Protocol 资源管理错误漏洞(CVE-2002-20001)

详细描述: Diffie-Hellman Key Agreement Protocol是一种密钥协商协议。它最初在 Diffie 和 Hellman 关于公钥密码学的开创性论文中有所描述。该密钥协商协议允许 Alice 和 Bob 交换公钥值,并根据这些值和他们自己对应的私钥的知识,安全地计算共享密钥K…

C语言柔型数组

何为柔性数组 所谓柔性数组,是C语言中的一个概念,也叫零长数组。顾名思义,这个数组的长度是不固定的,当没有值时,它的sizeof长度为0。 我们一般这样定义一个柔性数组: struct buffer_t {int len;char buf…

FasterTransformer 002: cuda调试env

VSCODE ENV cmake NVIDIA Nsight Systems 当我们装好了CUDA的时候,其实在图形界面下已经装好了一个叫“nsight”的编译器,我们可以直接用终端打开这个编译器,然后写好程序直接编译然后debug就可以了。WINDOWS NVIDIA Nsight Systems 入门及…

【ARM AMBA APB 入门 1 -- APB总线介绍】

文章目录 APB 总线历史1.1 APB 总线介绍1.1.1 APB 使用场景1.1.2 APB 信号列表1.1.3 APB 状态机 1.2 APB 传输时序1.2.1 APB 写传输时序1.2.1.1 Write transfer with no wait states1.2.1.2 Write transfer with wait states 1.2.2 APB 读时序1.2.2.1 Read transfer with no wa…

C语言二级指针复习

之前写过一篇二级指针的博文,C语言二级指针Demo - Win32 版本_bcbobo21cn的博客-CSDN博客 下面复习一下二级指针; 二级指针的概念是这样, int a 100; int *p1 &a; int **p2 &p1; 有一个整型变量a被赋值100;…

【Python开发】FastAPI 10:SQL 数据库操作

在 FastAPI 中使用 SQL 数据库可以使用多个 ORM 工具,例如 SQLAlchemy、Tortoise ORM 等,类似 Java 的 Mybatis 。这些 ORM 工具可以帮助我们方便地与关系型数据库进行交互,如 MySQL 、PostgreSQL等。本篇文章将介绍如何使用 SQLAlchemy 来完…

osgb倾斜摄影三维模型数据web端在线管理平台,一键查看、分享

「四维轻云」是基于浏览器打造的一款osgb倾斜摄影三维模型数据web端在线管理平台,为用户提供了项目管理、团队管理、空间测量、场景编辑、在线标绘等功能,实现了osgb倾斜摄影三维模型数据在线管理、浏览和分享。 此外,为了更好地满足用户需求…

数据库信息速递 AWS因迁移PostgreSQL DBaaS而遭遇长时间停机时间而备受诟病

开头还是介绍一下群,如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请联系 liuaustin3 ,在新加的朋友会分到2群(共…

分享:win10使用 python 让 NVIDA GeForce MX250 显卡发挥余热,安装CUDA,cuDNN和PyTorch

目录 1. 更新最新的显卡驱动2. 安装CUDA3. 安装cuDNN4. 安装pytorch 1. 更新最新的显卡驱动 打开NVIDA更新驱动的官网地址 根据下图的选择,记得Windows驱动程序类型要选标准,如图 点击搜索,下面就会列出一大堆的历史驱动,选择第…

Stable Diffusion你需要知道的算法原理;ChatGPT新增函数调用;Adobe Illustrator引入AI工具Firefly;

🦉 AI新闻 🚀 OpenAI更新ChatGPT,新增函数调用、4倍上下文长度、更低的嵌入成本 摘要:OpenAI在官网发布了ChatGPT的更新细节,包括新增函数调用、GPT-4和GPT-3.5-Turbo的升级、降低成本等。其中,新增函数调…

接口使用https 为什么是一大段返回,而http是一行一行返回?

背景: 最近在调试chatgpt对话网站,因为返回数据比较大,就用到到了流读取。开始调用http一点都没有问题,但是上生产切换https时候始终抱错?这个问题纠结2天,终于在你chatgpt加持解决了 https 为什么是一大段…

Unity3D:场景视图视图选项

推荐:将 NSDT场景编辑器 加入你的3D工具链 3D工具集: NSDT简石数字孪生 “场景视图视图选项”工具栏 您可以使用“场景视图视图选项”工具栏“叠加”来选择用于查看场景以及启用/禁用照明和音频的各种选项。这些控件仅在开发期间影响场景视图&#xff0…

mybatis二级缓存

MyBatis 缓存可以极大的提升查询效率。 MyBatis系统中默认定义两级缓存(一级缓存和二级缓存)。一、两级缓存 1、一级缓存:(本地缓存):sqlSession级别的缓存。一级缓存是一直开启的;sqlSession级…

Kafka学习---4、消费者(分区消费、分区平衡策略、offset、漏消费和重复消费)

1、消费者 1.1 Kafka消费方式 1、pull(拉)模式:consumer采用从broker中主动拉取数据。 2、push(推)模式:Kafka没有采用这种方式。因为broker决定消息发生速率,很难适应所有消费者的消费速率。…

Hive的概念

Hive 概述 Hive是一个基于Hadoop的数据仓库系统,它提供了类似与SQL的查询语言HiveQL,可以将结构化数据存储在Hadoop分布式文件系统中,并通过MapReduce进行过处理。 Hive的目标是使数据分析师和其他人员能够使用SQL语言来查询大规模的数据集&#xff0…

Triton教程 --- Triton架构

Triton教程 —Triton架构 文章目录 Triton教程 ---Triton架构并发模型执行模型和调度器无状态模型状态模型控制输入隐式状态管理状态初始化调度策略直接的Oldest 合奏模型 下图显示了 Triton 推理服务器的高级架构。 模型存储库是一个基于文件系统的模型存储库,Trit…

链表--part8--环形链表(leetcode 142)

文章目录 基本思路leetcode 142 环形链表 基本思路 此题为重点题目 此题实际上可以分为俩题: 1 判断是否存在环 2 如果存在返回环的入口 如果不存在返回null 那我就对于这俩种情况进行相关的解释。 判断是否有环 有点类似追及问题,我们可以定义一个快指…

全面理解Starrocks3.0

文章目录 什么是Starrocks适用场景系统架构产品特性 什么是Starrocks StarRocks 是新一代极速全场景 MPP (Massively Parallel Processing) 数据库。StarRocks 的愿景是能够让用户的数据分析变得更加简单和敏捷。用户无需经过复杂的预处理,就可以用 StarRocks 来支…