关于timeline的详细解析

关于timeline的详细解析

初始化画布

在echarts中有一个组件叫timeline他与echart中的其他图表结合起来 能很好的展现一段时间内各种数据的变化趋势

接下来我将用官网案例去逐步展示一下关于timeline中的各种详细配置

首先我们创建好vue的组件结构先尝试一些简单的小demo看看能不能渲染

<template><div class="TimeLineWrapper" id="TIMELINECHARTS"></div>
</template><script setup >
import { onMounted } from 'vue'
import * as echarts from "echarts"
// 创建渲染函数
const isSHowTimeLine = () => {// 获取domconst BOX = document.getElementById("TIMELINECHARTS")// 初始化画布const EchartsBox = echarts.init(BOX, null, 'dark')// 创建配置项const option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 渲染配置项EchartsBox.setOption(option)
}
onMounted(() => {// 调用渲染函数isSHowTimeLine()
})
</script><style scoped lang="scss">
.TimeLineWrapper {background-color: rgb(124, 121, 121);width: 100%;height: 100%;
}
</style>

开始解析

我们在写timeline的时候一般都会用到baseopstion和opstion的写法，这哥俩是怎么配合的呢，首先我们先在baseopstion中创建我们基本的图像 比如饼图 折线图等等 然后我们需要将opstion写成一个数组 opstion这个数组中的每一个元素对应这当前timeline的一个节点

假设这就是timeline

< 2001— 2002 — 2003 — 2004 — 2005 — 2006 — 2007 — 2008 — 2009 — 2010 >

opstion怎么写

opstion=[
{2001数据},.......,{2010数据}
]

先看一下如何用baseopstion去实现一个timeline

<<template><div class="TimeLineWrapper" id="TIMELINECHARTS"></div>
</template><script setup >
import { onMounted } from 'vue'
import * as echarts from "echarts"
// 创建渲染函数
const isSHowTimeLine = () => {// 获取domconst BOX = document.getElementById("TIMELINECHARTS")// 初始化画布const EchartsBox = echarts.init(BOX, null, 'dark')// 创建配置项const option = {baseOption: {// 配置timelinetimeline: {axisType: 'category', // 坐标轴类型 ---https://echarts.apache.org/zh/option.html#timeline.axisTyperealtime: true, // 拖动时是否实时渲染视图---https://echarts.apache.org/zh/option.html#timeline.realtimerewind: false, // 是否启动反向播放，需要将loop置为trueloop: false, // 是否循环播放autoPlay: false, // 是否自动播放inverse: false, // 反向置放timelinecurrentIndex: 0, // 起始位置playInterval: 1000, // 播放间隔controlStyle: {position: 'left'}, // 播放控制器位置data: ['2002-01-01', '2003-01-01', '2004-01-01',// 关于data的定义我们有这两种方式 你应该可以看懂// https://echarts.apache.org/zh/option.html#timeline.data/*type1:stringtype2:object */{value: '2005-01-01',symbol: 'diamond',symbolSize: 16},'2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',{value: '2011-01-01',symbol: 'diamond',symbolSize: 18}], // timeline数据源// https://echarts.apache.org/zh/option.html#timeline.labellabel: {// 这里是底部展示的内容formatter: function (s) {// s is datareturn (new Date(s)).getFullYear()//之保存年份}} // timeline坐标值}},opstions: [{}],};// 渲染配置项EchartsBox.setOption(option)
}
onMounted(() => {// 调用渲染函数isSHowTimeLine()
})
</script><style scoped lang="scss">
.TimeLineWrapper {background-color: rgb(124, 121, 121);width: 100%;height: 100%;
}
</style>

小demo

基本使用方法就是这样 尝试实现一个小demo

需求 ： 拖动timeline 实现数据的实时渲染

ok fine开始 我这里直接放出全部代码加上详细的注释 肯定能看懂！

<!DOCTYPE html>
<html lang="en" style="height: 100%"><head><meta charset="utf-8">
</head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script><script type="text/javascript">var dom = document.getElementById('container');var myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false});var app = {};const ALLdata = {revenue: {"2002": [20, 55, 87, 11, 33, 74, 32, 46, 99],"2003": [41, 25, 39, 62, 78, 81, 94, 66, 53],"2004": [81, 21, 33, 47, 55, 39, 72, 88, 91],"2005": [63, 22, 93, 59, 47, 74, 11, 74, 83],"2006": [36, 94, 79, 25, 17, 88, 37, 91, 54],"2007": [48, 74, 92, 15, 54, 26, 66, 39, 47],"2008": [71, 74, 63, 45, 95, 41, 77, 99, 31],"2009": [57, 38, 24, 81, 68, 52, 13, 83, 17],"2010": [92, 89, 59, 12, 47, 93, 27, 74, 61]},expenditures: {"2002": [29, 68, 99, 42, 11, 74, 53, 83, 27],"2003": [83, 21, 49, 17, 18, 66, 38, 28, 79],"2004": [75, 23, 42, 45, 98, 27, 54, 73, 15],"2005": [21, 52, 91, 62, 34, 54, 77, 36, 45],"2006": [69, 34, 18, 81, 62, 99, 25, 13, 24],"2007": [38, 61, 79, 11, 72, 22, 88, 68, 29],"2008": [52, 19, 95, 77, 82, 39, 86, 11, 44],"2009": [22, 74, 37, 95, 61, 49, 31, 82, 16],"2010": [86, 57, 43, 75, 29, 92, 13, 64, 98]}}//创建数据源var Opstion = {baseOption: {timeline: {axisType: 'category', // 坐标轴类型realtime: true, // 拖动时是否实时渲染视图rewind: false, // 是否启动反向播放，需要将loop置为trueloop: true, // 是否循环播放autoPlay: true, // 是否自动播放inverse: false, // 反向置放timelinecurrentIndex: 0, // 起始位置playInterval: 1000, // 播放间隔symbolSize: [20, 20],symbolKeepAspect: true,padding: [0,  // 上0, // 右35,  // 下0, // 左],controlStyle: {position: 'left'}, // 播放控制器位置data: ['2002-01-01', '2003-01-01', '2004-01-01', "2005", '2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',], // timeline数据源label: {formatter: function (s) {return (new Date(s)).getFullYear()},textStyle: {color: 'black', fontSize: 12,offset: [-10, -120]}}},tooltip: {},title: {text: "title",textStyle: {color: "black",fontSize: 30,fontWeight: 800},subtext: '数据来自国家统计局',subtextStyle: {color: "#909090",fontSize: 20,fontWeight: 500}},grid: {top: 130,bottom: 140},xAxis: {type: 'category',axisLabel: { interval: 0 },splitLine: { show: false },data: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', "2009", "2010"]},yAxis: {type: 'value',name: '个人收入统计',},series: [// 绘制两个柱状图{ name: '收入', type: 'bar' },{ name: '支出', type: 'bar' },]},options: [{title: { text: '2002个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2002'] },{ data: ALLdata.expenditures['2002'] },]},{title: { text: '2003个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2003'] },{ data: ALLdata.expenditures['2003'] },]},{title: { text: '2004个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2004'] },{ data: ALLdata.expenditures['2004'] },]},{title: { text: '2005个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2005'] },{ data: ALLdata.expenditures['2005'] },]},{title: { text: '2006个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2006'] },{ data: ALLdata.expenditures['2006'] },]},{title: { text: '2007个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2007'] },{ data: ALLdata.expenditures['2007'] },]},{title: { text: '2008个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2008'] },{ data: ALLdata.expenditures['2008'] },]},{title: { text: '2009个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2009'] },{ data: ALLdata.expenditures['2009'] },]},{title: { text: '2010个人收入支出情况分析' },series: [{ data: ALLdata.revenue['2010'] },{ data: ALLdata.expenditures['2010'] },]},]}if (Opstion && typeof Opstion === 'object') {myChart.setOption(Opstion);}window.addEventListener('resize', myChart.resize);</script>
</body></html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

GO——echo中间件原理

GO——echo中间件原理

原理 参考&#xff1a;https://blog.csdn.net/liyunlong41/article/details/104043047 func IAMMiddleware1(next echo.HandlerFunc) echo.HandlerFunc {return func(ctx echo.Context) error {fmt.Println("IAMMiddleware1")return next(ctx)} }echo中间件struct定…
阅读更多...
前端sql条件拼接js工具

前端sql条件拼接js工具

因为项目原因&#xff0c;需要前端写sql&#xff0c;所以弄了一套sql条件拼接的js工具 ​ /*常量 LT : " < ", LE : " < ", GT : " > ", GE : " > ", NE : " ! ", EQ : " ", LIKE : " like &qu…
阅读更多...
算法打卡day3|链表篇|Leetcode 203.移除链表元素、 707.设计链表 、 206.反转链表

算法打卡day3|链表篇|Leetcode 203.移除链表元素、 707.设计链表 、 206.反转链表

链表基本概念 定义 链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点由两部分组成&#xff0c;一个是数据域一个是指针域&#xff08;存放指向下一个节点的指针&#xff09;&#xff0c;最后一个节点的指针域指向null&#xff08;空指针的意思&#xff09;。其…
阅读更多...
顺序表的列题（力扣）和旋转数组

顺序表的列题（力扣）和旋转数组

文章目录 一.删除有序数组中的重复项&#xff08;取自力扣&#xff09; 二.合并两个有序数组&#xff08;取自力扣&#xff09; 三.旋转数组&#xff08;多解法&#xff09; 前言 见面我们说到了顺序表今天来分享几个有关于顺序表的题目 一.删除有序数组中的重复项&#xff…
阅读更多...
求购EV代码签名证书，看看性价比最优选项要多少钱？

求购EV代码签名证书，看看性价比最优选项要多少钱？

在当今的数字化时代&#xff0c;EV代码签名证书作为一种强化软件安全防线的顶级数字证书&#xff0c;承担着验证软件源码真伪和完整性的重要任务。对于软件开发者和公司来说&#xff0c;购置EV代码签名证书无疑是必不可少的&#xff0c;而其年度费用也成为各方密切关注的核心议…
阅读更多...
大概了解一下G1收集器

大概了解一下G1收集器

在上一篇文章中&#xff08;链接&#xff1a;大概了解一下CMS收集器&#xff09;我们提到&#xff0c;CMS是一种主要针对旧生代对象进行回收的收集器。与CMS不同&#xff0c;G1号称“全功能的垃圾收集器”&#xff0c;对初生代内存和旧生代内存均进行管理。鉴于此&#xff0c;这…
阅读更多...
CrossOver24破解版下载安装与激活

CrossOver24破解版下载安装与激活

在 Mac 上运行Windows 软件&#xff0c;CrossOver Mac 可以轻松地从 Dock 本地启动 Windows 应用程序&#xff0c;并将 Mac 操作系统功能&#xff08;如跨平台复制和粘贴以及共享文件系统&#xff09;集成到您的 Windows 程序中。 CrossOver 产品特性 无需重启 CrossOver 可以…
阅读更多...
分布式存储系统BeeGFS的部署

分布式存储系统BeeGFS的部署

1、集群架构 操作系统IP地址1*Ubuntu22.04192.168.1.742Ubuntu22.04192.168.1.603Ubuntu22.04192.168.1.674Ubuntu20.03192.168.1.136 上述四台电脑&#xff0c;我在1中下载了管理服务、元数据服务、存储服务、客户端服务&#xff0c;在2、3中下载了存储服务、客户端服务&…
阅读更多...
峟思应变计：工程测量的精密之选

峟思应变计：工程测量的精密之选

在工程领域中&#xff0c;对于材料应变情况的测量是至关重要的&#xff0c;而应变计则是这一任务中的关键设备。作为专业的工程仪器仪表品牌&#xff0c;峟思始终致力于研发和生产高精度、高可靠性的应变计产品&#xff0c;为铁路、建筑、桥梁、地铁等多个领域提供全面而高效的…
阅读更多...
用html编写的小广告板

用html编写的小广告板

用html编写的小广告板 相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</tit…
阅读更多...
WEB服务器-Tomcat(黑马学习笔记)

WEB服务器-Tomcat(黑马学习笔记)

简介 服务器概述 服务器硬件 ● 指的也是计算机&#xff0c;只不过服务器要比我们日常使用的计算机大很多。 服务器&#xff0c;也称伺服器。是提供计算服务的设备。由于服务器需要响应服务请求&#xff0c;并进行处理&#xff0c;因此一般来说服务器应具备承担服务并且保障…
阅读更多...
北航复试知识点总结

北航复试知识点总结

2024.2.25 住行 报道+机试+两天面试=4天 面试流程 （每个人大概20min，早一点到考场！） 形式：5位老师（一记录，四提问） 老师 陆峰 办公地址：北京航空航天大学新主楼H1033 电子邮箱： lufeng@buaa.edu.cn 个人主页：http://shi.buaa.edu.cn/lufeng/ 面试礼仪 于无形中…
阅读更多...
springboot+vue前后端分离适配cas认证的跨域问题

springboot+vue前后端分离适配cas认证的跨域问题

0. cas服务搭建参考:CAS 5.3服务器搭建_cas-overlay-CSDN博客 1. 参照springsecurity适配cas的方式, 一直失败, 无奈关闭springssecurity认证 2. 后端服务适配cas: 参考前后端分离项目(springbootvue)接入单点登录cas_前后端分离做cas单点登录-CSDN博客 1) 引入maven依赖 …
阅读更多...
高效备考2025年AMC8数学竞赛：2000-2024年AMC8真题练一练

高效备考2025年AMC8数学竞赛：2000-2024年AMC8真题练一练

我们今天来随机看五道AMC8的真题和解析&#xff0c;对于想了解或者加AMC8美国数学竞赛的孩子来说&#xff0c;吃透AMC8历年真题是备考最科学、最有效的方法之一。 为帮助孩子们更高效地备考&#xff0c;我整理了2000-2004年的全部AMC8真题&#xff0c;并且独家制作了多种在线练…
阅读更多...
【粉丝福利社】一书读懂物联网：基础知识+运行机制+工程实现（文末送书-完结）

【粉丝福利社】一书读懂物联网：基础知识+运行机制+工程实现（文末送书-完结）

&#x1f3c6; 作者简介&#xff0c;愚公搬代码 &#x1f3c6;《头衔》&#xff1a;华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xf…
阅读更多...
【Python笔记-设计模式】迭代器模式

【Python笔记-设计模式】迭代器模式

一、说明 迭代器模式是一种行为设计模式&#xff0c;让你能在不暴露集合底层表现形式&#xff08;列表、栈和树等&#xff09;的情况下遍历集合中所有的元素。 (一) 解决问题 遍历聚合对象中的元素&#xff0c;而不需要暴露该对象的内部表示 (二) 使用场景 需要对聚合对象…
阅读更多...
解决浏览器访问百度，验证成功后提示仍然存在安全风险

解决浏览器访问百度，验证成功后提示仍然存在安全风险

如图所示&#xff0c;访问百度页面后&#xff0c;提示安全验证&#xff0c;验证通过后&#xff0c;仍然提示的存在安全风险&#xff0c;请再次验证&#xff0c;如此往复循环&#xff0c;无法登陆百度。 解决方案&#xff1a;关闭User-Agent Switcher for Chrome插件即可恢复正常…
阅读更多...
（黑客技术）2024最新版零基础入门自学网络安全

（黑客技术）2024最新版零基础入门自学网络安全

一、自学网络安全学习的误区和陷阱 1.不要试图先以编程为基础的学习再开始学习 我在之前的回答中&#xff0c;我都一再强调不要以编程为基础再开始学习网络安全&#xff0c;一般来说&#xff0c;学习编程不但学习周期长&#xff0c;而且实际向安全过渡后可用到的关键知识并不…
阅读更多...
std::mutex

std::mutex

std::mutex 和其变体是 C 中用于线程同步的重要工具。让我们详细了解一下这四种互斥量的作用和使用案例&#xff1a; std::mutex&#xff1a; std::mutex 是一种独占式互斥量&#xff0c;用于保护共享数据&#xff0c;确保在同一时间只有一个线程可以访问它。它不支持递归锁定…
阅读更多...
WeTrade一分钟带你了解二元期权和其他交易的不同

WeTrade一分钟带你了解二元期权和其他交易的不同

很多交易者有点分不清楚二元期权和外汇交易有什么不同&#xff0c;其实很简单&#xff0c;今天WeTrade众汇带你了解。 首先&#xff0c;外汇交易。 这是一个市场&#xff0c;就像在股票市场上一样&#xff0c;同样的供需关系&#xff0c;都有固定的交易时间。在外汇交易中&am…
阅读更多...
最新文章

Copyright @ 2022~2023