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

效果如图

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,
     },
   ],
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python streamlit指南,构建令人惊叹的可视化Web界面!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在当今数据驱动的世界中&#xff0c;构建交互式、美观且高效的数据可视化应用变得至关重要。而Streamlit&#xff0c;作为Python生态系统中为开发者提供了轻松创建Web应用的利器。 本文将深入探讨Streamlit的方…

SS8812T 36V/1.6A 两通道 H 桥驱动芯片 替代DRV8812

SS8812T 为打印机和其它电机一体化应用提 供一种双通道集成电机驱动方案。 SS8812T 有两 路 H 桥驱动&#xff0c;每个 H 桥可提供最大输出电流 1.6A (在 24V 和 Ta 25C 适当散热条件下)&#xff0c;可驱动两 个刷式直流电机&#xff0c;或者一个双极步进电机&#xff0…

分支和循环

通常来说&#xff0c;C语言是结构化的程序设计语言&#xff0c;这里的结构包括顺序结构、选择结构、循环结构&#xff0c;C语言能够实现这三种结构&#xff0c;如果我们仔细分析&#xff0c;我们日常生活中所见的事情都可以拆分为这三种结构或者它们的组合。 下面我会仔细讲解我…

代理模式 1、静态代理 2、动态代理 jdk自带动态代理 3、Cglib代理

文章目录 代理模式1、静态代理2、动态代理jdk自带动态代理 3、Cglib代理 来和大家聊聊代理模式 代理模式 代理模式&#xff1a;即通过代理对象访问目标对象&#xff0c;实现目标对象的方法。这样做的好处是&#xff1a;可以在目标对象实现的基础上&#xff0c;增强额外的功能操…

STM32 CUBEIDE Outline is disabled due to scalability mode

项目场景&#xff1a; 问题描述 Outline is disabled due to scalability mode 看不到函数 解决方案&#xff1a;

QT 项目中添加文件夹(分类文件)

为了更方便的整理项目的文件&#xff0c;添加文件夹把文件进行分类。 1.首先在项目文件中创建新的文件夹 2.把需要归类的文件放入新建的文件中 3.右键然后选择add..... 4.运行此程序&#xff0c;会报错因为文件路径改变了&#xff0c;需要在.pro中修改路径 注意事项 文件夹内部…

Java中的JMX的使用

文章目录 1. 定义和存在的意义2. 架构2.1 Instrumentation2.2 JMX Agent2.3 Remote Management 3. 启动和连接3.1 注册MBean3.2 有两个方式启动JMX Agent3.3 Remote Management(客户端) 4. MBeanServerConnection使用4.1 列出所有的MBean4.2 列出所有的Domain4.3 MBean计数4.4 …

Windows + docker + python + vscode : 使用容器docker搭建python开发环境,无需本地安装python开发组件

下载docker for Windows docker window下载 如果没有翻墙工具&#xff0c;可以该网盘中的docker 链接&#xff1a;https://pan.baidu.com/s/11zLy3e5kusZR-4m_Fq_cqg?pwdesmv 提取码&#xff1a;esmv 安装docker docker的安装会重启电脑&#xff0c;不要惊讶&#xff0c;且…

音视频开发:音频fdk-aac编码

编码的大概流程见下图 1.获取编码器: avcodec_find_encoder_by_name("libfdk_aac") 2.检查PCM格式是否被编码器支持 3.创建编码上下文: AVCodecContext *ctx avcodec_alloc_context3(codec) 4.给上下文设置参数 5.打开编码器: avcodec_open2 6.创建AVFrame: a…

GPT-4 惨遭削弱;拼多多市值一度超阿里;雷军回应个人向武汉大学捐款 13 亿元丨 RTE 开发者日报 Vol.96

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有…

【VScode】超详细图片讲解下载安装、环境配置、编译执行、调试

这里是目录 VScode是什么&#xff1f;VScode的下载和安装环境介绍安装中文插件 配置VScodeC/C开发环境下载和配置MinGW-w64 编译器套件下载&#xff1a;配置&#xff1a; 安装C/C插件在VScode上编写代码设置C/C编译选项创建执行任务编译执行如果想写其他代码在同一个文件夹在不…

【性能测试】性能测试监控关键指标

系统指标 检测性能测试是否有bug的关键指标 1、系统指标——与用户场景及需求直接相关。 并发用户数&#xff1a;某一物理时刻同时向系统提交请求的用户数。平均响应时间&#xff1a;系统处理事务的响应时间的平均值&#xff0c;对于系统快速响应类页面&#xff0c;一般响应…

vue.js ——Vuex

基本概念 vue进行开发过程中有没有遇到这样一种场景&#xff0c;就是有些时候一些数据是一种通用的共享数据&#xff08;比如登录信息&#xff09;&#xff0c;那么这类数据在各个组件模块中可能都会用到&#xff0c;如果每个组件中都去后台重新获取那么势必会造成性能浪费&am…

Linux介绍

文章目录 前言一、概述 前言 Linux学习笔记。 一、概述 linux怎么读,不下10种 linux是一个开源、免费的操作系统&#xff0c;其稳定性、安全性、处理多并发已经得到业界的认可&#xff0c;目前很多企业级的项目(c/c/php/python/java/go)都会部署到Linux/unix系统上。 常见的…

每日一练2023.11.30——谁先倒【PTA】

题目链接&#xff1a;谁先倒 题目要求&#xff1a; 划拳是古老中国酒文化的一个有趣的组成部分。酒桌上两人划拳的方法为&#xff1a;每人口中喊出一个数字&#xff0c;同时用手比划出一个数字。如果谁比划出的数字正好等于两人喊出的数字之和&#xff0c;谁就输了&#xff0…

『OPEN3D』1.8.1 ICP配准

a目录 1、点到点&#xff08;point2point&#xff09;的配准 2、 点到面&#xff08;point2plane&#xff09;的配准 3、基于颜色的配准(color-icp) 4、点云配准核函数(robust kernel) 前面已经介绍过点云配准的基础理论内容&#xff0c;可以查看之前的文章&#xff1a; 『…

Unity Canvas、Canvas Scaler、Graphic Raycaster、EventSystem 组件详解

文章目录 0. 参考文章1. Canvas1.1 Screen Space-Overlay —— 屏幕空间覆盖模式1.2 Screen Space-Camera —— 相机模式1.3 World Space —— 世界模式 2. Canvas Scaler&#xff1a;控制UI画布的放大缩放的比例2.1 Constant Pixer Size —— 恒定像素2.2 Scale With Screen S…

98.套接字-Socket网络编程1(基础概念)

目录 1.局域网和广域网 2.IP 互联网协议(Internet Protocol) IP的作用 3.查看IP地址 Windows上查看IP ​编辑 Linux上查看IP 4.端口 主要类型&#xff1a; 用途&#xff1a; 示例&#xff1a; 端口的表示&#xff1a; 5.OSI/ISO 网络分层模型 1.局域网和广域网 …

2021年6月3日 Go生态洞察:Fuzzing技术的Beta测试

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

哪吒汽车拔头筹,造车新势力首家泰国工厂投产

中国造车新势力首家泰国工厂投产&#xff01;11月30日&#xff0c;哪吒汽车位于泰国的首家海外工厂——泰国生态智慧工厂正式投产下线新车&#xff0c;哪吒汽车联合创始人兼CEO张勇、哪吒汽车泰国合作伙伴BGAC公司首席执行官万查曾颂翁蓬素等出席仪式。首辆“泰国制造”的哪吒汽…