echarts折线图的线呈现动态效果

news2024/11/15 13:51:56

效果如图

let yData = [222, 932, 66, 934, 111, 333, 0],
  xData = ["测1", "测2", "测3", "测4", "测5", "测6", "测7"],
   datacoords = [
     {
       coords: [],
     },
   ];
 for (var i = 0; i < xData.length; i++) {
   datacoords[0].coords.push([xData[i], yData[i]]);
 }

option = {

   animationDuration: 3000,
   animationEasing: "bounceOut", //缓动动画
   animationThreshold: 8, //动画元素的阈值
   tooltip: {
     trigger: "axis",
     backgroundColor: "rgba(0,0,0,.5)",
     axisPointer: {
       type: "cross",
       label: {
         backgroundColor: "rgba(0,0,0,.5)",
       },
     },
     textStyle: {
       color: "#fff",
       fontSize: 14,
     },
   },
   grid: {
     left: "3%", //图表距边框的距离
     right: "3%",
     top: "15%",
     bottom: "5%",
     containLabel: true,
   },
   xAxis: [
     {
       nameGap: 3,
       nameTextStyle: {
         color: "rgba(255,255,255,.8)",
         fontSize: 12,
       },
       type: "category",
       data: xData,
       boundaryGap: false, //从0开始
       axisLine: {
         onZero: true,
         rotate: 30, //坐标轴内容过长旋转
         interval: 1,
         lineStyle: {
           color: "#636E7C",
         },
       },
       axisLabel: {
         color: "red", //坐标的字体颜色
         fontSize: 12,
       },
       axisTick: {
         //坐标轴刻度颜色  x和y不交叉
         show: false,
       },
     },
   ],
   yAxis: [
     {
       name: "个",
       min: 0,
       max: function (value) {
         return Math.ceil(value.max / 5) * 5;
       },
       splitNumber: 5,
       type: "value",
       nameTextStyle: {
         color: "rgba(255,255,255,.89)",
         fontSize: 12,
       },
       splitLine: {
         show: true,
         lineStyle: {
           color: "rgba(255,255,255,.25)",
           type: "dashed",
         },
       },
       axisTick: {
         //坐标轴刻度颜色
         show: false,
       },
       axisLine: {
         //坐标轴线颜色
         show: true,
         lineStyle: {
           color: "#636E7C",
         },
       },
       axisLabel: {
         color: "red", //坐标的字体颜色
         fontSize: 12,
       },
     },
   ],
   series: [
     {
       name: "",
       type: "line",
       smooth: false,
       lineStyle: {
         color: "#DC7828",
         width: 1.5,
         type: "dashed",
         shadowOffsetX: 0, // 折线的X偏移
         shadowOffsetY: 10, // 折线的Y偏移
         shadowBlur: 4, // 折线模糊
         shadowColor: "rgba(255, 255, 255, 0.8)", //设置折线阴影颜色
       },
       showSymbol: true, //是否默认展示圆点
       symbol: "circle", // 默认是空心圆(中间是白色的)
       symbolSize: 7,
       itemStyle: {
         color: "#021E47", //实圆的背景色
         borderWidth: 1,
         borderColor: "#DC7828",
       },
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
           {
             offset: 1,
             color: "rgba(220,120,40,0.8)",
           },
           {
             offset: 0.74,
             color: "rgba(220,120,40,0.5)",
           },
           {
             offset: 0,
             color: "rgba(220,120,40,0)",
           },
         ]),
       },
       emphasis: {
         focus: "series",
       },
       data: yData,
     },
     {
       showSymbol: false,
       name: "",
       type: "lines",
       polyline: true,
       smooth: false,
       coordinateSystem: "cartesian2d",
       zlevel: 1,
       effect: {
         show: true,
         smooth: true,
         period: 6,
         symbolSize: 4,
       },
       lineStyle: {
         color: "#fff",
         width: 1,
         opacity: 0,
         curveness: 0,
         cap: "round",
       },
       data: datacoords,
     },
   ],
};

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

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

相关文章

抖音自动评论助手,开发流程与需要到的技术和代码分享

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、引言 随着互联网的快速发展&#xff0c;短视频平台已成为人们日常生活的重要组成部分。其中&#xff0c;抖音作为一款深受用户喜爱的短视频平台&#xff0c;拥有庞大的用户群体…

Visual Studio 2022分析C#程序内存泄漏

背景 最近我们的项目出现了内存激增的情况&#xff0c;初次探讨&#xff0c;我们发现和机器人发生通信之后&#xff0c;内存会缓慢上升&#xff0c;直到系统崩溃。 例子 由于只是介绍一个简单的方案&#xff0c;所以就写一个比较简单的例子来演示了&#xff0c;代码如下&…

MySQL进阶知识:SQL性能优化

目录 SQL性能分析 SQL执行频率 慢查询日志 profile详情 explain执行计划 索引的使用 最左前缀法则 范围查询 索引列运算 字符串加引号 模糊查询 or连接的条件 数据分布影响 SQL提示 覆盖索引 前缀索引 索引设计原则 SQL优化 insert优化 主键优化 页分裂 …

JS动态转盘可自由设置个数与概率

让我为大家介绍一下转盘的实现过程与原理&#xff0c;介绍都放在下面代码块中&#xff0c;一步一步的教会你。 我们转盘使用线段来实现 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title><style type&quo…

【Jmeter性能测试】ForEach控制器的用法解析

引言 最近我在进行JMeter性能测试时遇到了一些问题&#xff0c;特别是在使用ForEach控制器时感到有点棘手。 但是经过不断地摸索和实践&#xff0c;终于成功地掌握了这个神奇的工具&#xff0c;提高了我的测试效率。因此&#xff0c;今天我想和大家分享我的经验&#xff0c;让…

“逆风飞翔·事实孤儿同行计划”成长陪伴主题区域陪伴培训会

为推进各机构更好地开展事实孤儿成长陪伴工作&#xff0c;促进事实孤儿成长陪伴实施成效&#xff0c;搭建各机构间事实孤儿成长陪伴方式方法交流平台。11月26日&#xff0c;在中国乡村发展基金会、中国民生银行的支持下&#xff0c;由湖南省大爱无疆青少年公益发展中心主办&…

社区内涝积水监测系统作用,改善社区积水

随着社区化进程的加速&#xff0c;社区基础设施的重要性日益凸显。在这个背景下&#xff0c;社区生命线和内涝积水监测系统成为了关注的焦点。它们在维护社区安全&#xff0c;特别是在应对暴雨等极端天气条件下&#xff0c;发挥着至关重要的作用。 WITBEE万宾时刻关注社区内涝积…

【JavaEE初阶】volatile 关键字、wait 和 notify

目录 一、volatile 关键字 1、volatile 能保证内存可见性 2、volatile 不保证原子性 二、wait 和 notify 1、wait()方法 2、notify()方法 3、notifyAll()方法 4、wait 和 sleep 的对比 一、volatile 关键字 1、volatile 能保证内存可见性 我们前面的线程安全文章中&…

Windows系统IIS服务配置与网站搭建,结合内网穿透实现公网访问

文章目录 1.前言2.Windows网页设置2.1 Windows IIS功能设置2.2 IIS网页访问测试 3. Cpolar内网穿透3.1 下载安装Cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5.结语 1.前言 在网上各种教程和介绍中&#xff0c;搭建网页都会借助各种软件的帮助&#xf…

nginx 配置前端项目添加https

可申请阿里云免费证书 步骤省略… nginx 配置 server {listen 8050; #默认80端口 如果需要所有访问地址都是https 需要注释listen 8443 ssl; #https 访问的端口 &#xff0c;默认443server_name 192.168.128.XX; #域名 或 ip# 增加ssl#填写证书文件…

【嵌入式C】数据的大小端存储与数据格式转换

【嵌入式C】数据的大小端存储与数据格式转换 目录 1. 大小端存储格式图解2. 数据类型转换函数2.1 u8数组转u162.2 u16数转u8数组 资料&#xff1a;【嵌入式数据传输及存储的C语言实现】 以Cortex-M内核为例&#xff0c;实际应用中大部分内核都是 **小端 **存储&#xff0c;以S…

艺海泛舟——尹星从艺六十年作品展暨学术交流首展作品(一)

简历&#xff1a; 1944年1月25日出生于山西省阳高县&#xff0c;内蒙古师范学院艺术系美术专业&#xff0c;师从水彩之父李剑晨&#xff0c;北京京华美术学院创立者邱石冥&#xff0c;徐坚。与吴冠中&#xff0c;朱德群&#xff0c;赵无极&#xff0c;杨飞云是同门。擅长&…

windows系统bat脚本命令总结之EnableDelayedExpansion

前言 做了一段时间的bat脚本开发&#xff0c;bat脚本中有各种各样的命令跟传统的编程逻辑完全不同&#xff0c;本专栏会讲解下各种各式的命令使用方法。 本篇文章讲解的是EnableDelayedExpansion的使用。 EnableDelayedExpansion简介 EnableDelayedExpansion是用于在批处理脚本…

开发提测前测试的目的是什么

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

为什么修改IP和隐藏IP地址?修改IP地址带来哪些好处?

随着互联网的普及&#xff0c;越来越多的人开始依赖网络进行日常生活和工作。然而&#xff0c;在上网过程中&#xff0c;我们的IP地址是暴露无遗的&#xff0c;这就有可能导致一些安全问题。因此&#xff0c;修改IP和隐藏IP地址的需求应运而生。那么&#xff0c;为什么要修改IP…

【深度学习实验】图像处理(三):PIL——自定义图像数据增强操作(随机遮挡、擦除、线性混合)

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. PIL基础操作2. Cutout&#xff08;遮挡&#xff09;2.1 原理2.2 实现2.3 效果展示 3. Random Erasing&#xff08;随机擦除&#xff09;3.1 原理3.2 实现3.3 效果展示 4. Mixup&…

Spring-Mybatis源码解析--手写代码实现Spring整合Mybatis

文章目录 前言一、引入&#xff1a;二、准备工作&#xff1a;2.1 引入依赖2.2 数据源的文件&#xff1a;2.1 数据源&#xff1a; 2.3 业务文件&#xff1a; 三、整合的实现&#xff1a;3.1 xxxMapper 接口的扫描&#xff1a;3.2 xxxMapper 接口代理对象的生成&#xff1a;3.2 S…

分享83个简历竞聘PPT,总有一款适合您

分享83个简历竞聘PPT&#xff0c;总有一款适合您 83个简历竞聘PPT下载链接&#xff1a;https://pan.baidu.com/s/1iybRAisgWgXhelE1tGpzBw?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整…

java学习part25多线程

132-多线程-程序、进程、线程与并行、并发的概念_哔哩哔哩_bilibili 1.概念 2.共享内容 只有线程间能通信&#xff0c;进程之间不共享内容。 3.继承thread的多线程 相当于golang里先写一个线程函数run(),子类对象调用start()相当于go关键字 相当于go run() package thread;/…

Target、沃尔玛撸卡、采退支付下单如何避免账号关联风险?

近年来&#xff0c;随着跨境电商平台的日益繁荣&#xff0c;越来越多的国内卖家涌入其中&#xff0c;导致竞争异常激烈。为了在竞争中脱颖而出&#xff0c;一些卖家采用自动脚本程序进行浏览和下单&#xff0c;然而这种行为很容易导致账号被批量关联、封号。本文将探讨养号下单…