echarts实现炫酷科技感的流光效果

前言:

        echarts实现炫酷科技感的流光效果

效果图:

实现步骤:

1、引入echarts,直接安装或者cdn引入
npm i echarts
https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js
2、封装 option方法,第一个数据是折线数据,第二个是流动的点
commonOption(name,xData,yData){let dtList = []xData.forEach((item,i)=>{let arr = []arr.push(item)arr.push(yData[i])dtList[i] = arr})return {title: {text: name,textStyle: {color: "#fff",fontSize: 16,fontWeight: "500",}},"grid": {"containLabel": true,"bottom": "20","top": "40","left": "20","right": "20"},"xAxis": {"triggerEvent": true,"axisLabel": {"show": true,"fontSize": 12,"color": "#fff","align": "center","verticalAlign": "top"},"axisLine": {"show": false},"axisTick": {"show": true,"lineStyle": {"show": true,"color": "#0B3561","width": 2}},"data": xData},"yAxis": [{"axisLabel": {"interval": 0,"show": true,"fontSize": 14,"color": "#fff"},"axisLine": {"show": false},"axisTick": {"show": false},"splitLine": {"lineStyle": {"type": "dashed","color": "rgba(255,255,255,0.15)"}}}],"series": [{"name": "demo1","type": "line","smooth": false,"symbol": "circle","symbolSize": 3,"showSymbol": false,"lineStyle": {"normal": {"width": 2,"shadowColor": "#159AFF","shadowBlur": 8}},"itemStyle": {"normal": {"color": "#159AFF"}},"data": yData},{"name": "demo1","type": "lines","polyline": true,"showSymbol": false,"coordinateSystem": "cartesian2d","effect": {"trailLength": 0.3,"show": true,"period": 6,"symbolSize": 4,"loop": true},"lineStyle": {"color": "#fff","width": 0,"opacity": 0,"curveness": 0,"type": "dashed"},"data": [{"coords": dtList // 动态的图}]}]}},
3、然后方法中使用
let myChart = echarts.init(dom);let arr1 = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
let arr = [11, 12, 10, 11, 10, 10, 11]
let option = this.commonOption('学员一队',arr1,arr)myChart.setOption(option);

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试:HashMap

目录 1、底层数据结构,1.7 与1.8有何不同? 2、为何要用红黑树,为何一上来不树化,树化阈值为何是8,何时会树化,何时会退化为链表? 3、索引如何计算? hashCode都有了,为何还要提供hash()方法?数组容量为…

AJAX —— 学习(三)(完结)

目录 一、jQuery 中的 AJAX (一)get 方法 1.语法介绍 2.结果实现 (二)post 方法 1.语法介绍 2.结果实现 (三)通用型的 AJAX 方法 1.语法介绍 2.结果实现 二、AJAX 工具库 axios &#xff08…

【XCPC笔记】2023 (ICPC) Jiangxi Provincial Contest——ABCHIJKL 做题记录

赛后gym练习及补题,gym链接:2023 (ICPC) Jiangxi Provincial Contest – Official Contest 补题顺序 L [Zhang Fei Threading Needles - Thick with Fine](https://codeforces.com/gym/104385/problem/L)题面解读参考代码 A [Drill Wood to Make Fire](h…

【数据结构与算法】力扣 24. 两两交换链表中的节点

题目描述 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示例 1: 输入: head [1,2,3,4] 输出&#…

迷茫下是自我提升

长夜漫漫,无心睡眠。心中所想,心中所感,忧愁当前,就执笔而下,写下这篇文章。 回忆过往 回想当初为啥学前端,走前端这条路,学校要求嘛,兴趣爱好嘛,还是为了钱。 时间带着…

使用GPT需要注意的事项

GPT出来之后,基本就告别浏览器搜索问题答案了。将问题原封不动的copy给GPT基本可以得到解答。 但是这个也有弊端,那就是太依赖GPT了。 1,使用GPT需要更强的专业知识:除了能问对问题,还要具备识别GPT&q…

WordPress 6.5 “里贾纳”已经发布

WordPress 6.5 “里贾纳”已经发布,其灵感来自著名爵士小提琴家Regina Carter的多才多艺。雷吉娜是一位屡获殊荣的艺术家和著名的爵士乐教育家,以超越流派而闻名,她在古典音乐方面的技术基础和对爵士乐的深刻理解为她赢得了大胆超越小提琴所能…

华为ICT七力助推文化产业新质生产力发展

创新起主导作用的新质生产力由新劳动者、新劳动对象、新劳动工具、新基础设施等四大要素共同构成,符合新发展理念的先进生产力质态;具有高科技、高能效、高质量等三大突出特征。而通过壮大新产业、打造新模式、激发新动能,新质生产力能够摆脱…

求m和n的最大公约数(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int remainder 1;int m 0;int n 0;int middle 0;//提示用户&#xff1b;printf("请输入整数m和n的值&#xff…

大模型技术ollama入门教程

下载 下载&#xff1a;https://ollama.com/download 我下载的是Windows版本&#xff1a; Docker启动 使用Docker启动要更简单点。 拉取镜像&#xff1a; docker pull ollama/ollama使用CPU启动&#xff1a; docker run -d -v ollama:/root/.ollama -p 11434:11434 --nam…

SpringBoot mybatis-starter解析

mybatis-starter使用指南 自动检测工程中的DataSource创建并注册SqlSessionFactory实例创建并注册SqlSessionTemplate实例自动扫描mappers mybatis-starter原理解析 注解类引入原理 查看对应的autoconfigure包 MybatisLanguageDriverAutoConfiguration 主要是协助使用注解来…

winforms倒计时器程序

using System; using System.Windows.Forms;namespace WindowsForms {public partial class Form1 : Form{public Form1(){InitializeComponent();}private void Form1_Load(object sender, EventArgs e){button1.Text "开始计时";label1.Text "时长";la…

Hackthebox IClean

靶机信息IP/难度Medium网址https://app.hackthebox.com/machines/IClean状态Active系统Linux Python XSS, SSTI 端口扫描 PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 8.9p1 Ubuntu 3ubuntu0.6 (Ubuntu Linux; protocol 2.0) | ssh-hostkey: | 256 2cf9077…

数字逻辑分析仪初体验

为啥会用到这玩意儿&#xff0c;要从一个荒诞的需求开始。想在市面上找一款特别低空飞行的监控&#xff0c;而且不想它一直开着监控&#xff0c;最好是我在外面远程指挥它起飞&#xff0c;飞去厨房&#xff0c;飞去洗手间&#xff0c;甚至飞去阳台&#xff0c;查看水龙头情况啊…

uniapp使用npm命令引入font-awesome图标库最新版本

uniapp使用npm命令引入font-awesome图标库最新版本 图标库网址&#xff1a;https://fontawesome.com/search?qtools&or 命令行&#xff1a; 引入 npm i fortawesome/fontawesome-free 查看版本 npm list fortawesome在main.js文件中&#xff1a; import fortawesome/fo…

【二分查找】Leetcode 山脉数组的峰顶索引

题目解析 852. 山脉数组的峰顶索引 这到题使用暴力枚举的查找方法发现这段数组是有二段性的&#xff0c;峰顶左边的一段区间是一段递增区间&#xff0c;右边的一段区间是一段递减区间 算法讲解 class Solution { public:int peakIndexInMountainArray(vector<int>&am…

C++ 【桥接模式】

简单介绍 桥接模式属于 结构型模式 | 可将一个大类或一系列紧密相关的类拆分 为抽象和实现两个独立的层次结构&#xff0c; 从而能在开发时分别使用。 聚合关系&#xff1a;两个类处于不同的层次&#xff0c;强调了一个整体/局部的关系,当汽车对象销毁时&#xff0c;轮胎对象…

算法刷题Day27 | 39. 组合总和、40.组合总和II、131.分割回文串

目录 0 引言1 组合总和1.1 我的解题 2 组合总和II2.1 解题 3 分割回文串3.1 切割3.2 总结&#xff1a;分割和组合的区别 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;算法专栏&#x1f4a5; 标题&#xff1a;算法刷题Day27 | 39. 组合总和、40.…

Springboot相关知识-图片描述(学习笔记)

学习java过程中的一些笔记&#xff0c;觉得比较重要就顺手记录下来了~ 目录 一、前后端请求1.前后端交互2.简单传参3.数组集合传参4.日期参数5.Json参数6.路径参数7.响应数据8.解析xml文件9.统一返回类10.三层架构11.分层解耦12.Bean的声明13.组件扫描14.自动注入 一、前后端请…

JVM—类加载子系统

JVM—类加载子系统 JVM的类加载是通过ClassLoader及其子类来完成的。 有哪些类加载器 类加载器如下&#xff1a; 启动类加载器&#xff08;BootStrap ClassLoader&#xff09;&#xff1a;负责加载JAVA_HOME\lib目录或通过-Xbootclasspath参数指定路径中的且被虚拟机认可&am…