关于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://www.mzph.cn/news/705681.shtml

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

相关文章

Spark集群搭建的三种方式详解

Spark集群搭建的三种方式详解

国科大学习生活&#xff08;期末复习资料、课程大作业解析、学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&#xff09; 大数据开发学习文档&#xff08;分布式文件系统的实现&#xff0c;大数据生态圈学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&#xff…
阅读更多...
交叉编译qt到arm平台

交叉编译qt到arm平台

使用pkg-config命令查看xxx包是否存在&#xff1a; pkg-config --print-errors xxx pkg-config的搜索路径可以通过环境变量PKG_CONFIG_PATH指定。需要在运行./configure 之前指定。 ./configure -release -qt-libjpeg -qt-libpng -qt-zlib -qt-pcre -xplatform linux-aarch64-…
阅读更多...
CG-0A 电子水尺可实现对水位数据的连续自动监测

CG-0A 电子水尺可实现对水位数据的连续自动监测

CG-0A 电子水尺可实现对水位数据的连续自动监测产品概述 本产品是一种采用微处理器芯片为控制器&#xff0c;内置通讯电路的数字式水位传感器&#xff0c;具备高的可靠性及抗干扰性能。适用于江、河、湖、水库及蓄水池、水渠等处的水位测量使用。 本产品采用了生产工艺技术&…
阅读更多...
雾锁王国服务器怎么建？雾锁王国服务器搭建方法

雾锁王国服务器怎么建？雾锁王国服务器搭建方法

雾锁王国Enshrouded服务器搭建怎么搭建&#xff1f;非常简单&#xff0c;阿里云计算巢雾锁王国程序&#xff0c;可以一键搭建雾锁王国多人联机服务器&#xff0c;腾讯云是基于雾锁王国镜像系统&#xff0c;阿里云服务网aliyunfuwuqi.com汇总雾锁王国服务器搭建&#xff0c;超简…
阅读更多...
消息中间件篇之Kafka-高性能设计

消息中间件篇之Kafka-高性能设计

一、高性能设计 消息分区&#xff1a;不受单台服务器的限制&#xff0c;可以不受限的处理更多的数据。 顺序读写&#xff1a;磁盘顺序读写&#xff0c;提升读写效率。 页缓存&#xff1a;把磁盘中的数据缓存到内存中&#xff0c;把对磁盘的访问变为对内存的访问。 零拷贝&a…
阅读更多...
MATLAB环境下基于深层小波散射网络的纹理图像分类方法

MATLAB环境下基于深层小波散射网络的纹理图像分类方法

图像分类是模式识别重要研究领域之一&#xff0c;它的任务是把目标样本分成不同类别&#xff0c;赋予样本相应类别标签。分类实现的基础是用传感器检测到样本的特征&#xff0c;比如形状、颜色、纹理等基本特征或通过基本特征提取更为复杂的特征信息&#xff0c;其中纹理是表示…
阅读更多...
LeetCode 刷题 [C++] 第54题.螺旋矩阵

LeetCode 刷题 [C++] 第54题.螺旋矩阵

题目描述 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 题目分析 根据题意可知&#xff0c;我们不需要记录已经走过的路径&#xff0c;只需要通过调整矩阵的上下左右边界即可完成任务&#xff1b;首先创建出矩阵…
阅读更多...
什么是大模型微调？微调的分类、方法、和步骤

什么是大模型微调？微调的分类、方法、和步骤

2023年，大模型成为了重要话题，每个行业都在探索大模型的应用落地，以及其能够如何帮助到企业自身。尽管微软、OpenAI、百度等公司已经在创建并迭代大模型并探索更多的应用，对于大部分企业来说，都没有足够的成本来创建独特的基础模型（Foundation Model）：数以百亿计的数据…
阅读更多...
VL817-Q7 USB3.0 HUB芯片 适用于扩展坞 工控机 显示器

VL817-Q7 USB3.0 HUB芯片 适用于扩展坞 工控机 显示器

VL817-Q7 USB3.1 GEN1 HUB芯片 VL817-Q7 USB3.1 GEN1 HUB芯片 VIA Lab的VL817是一款现代USB 3.1 Gen 1集线器控制器&#xff0c;具有优化的成本结构和完全符合USB标准3.1 Gen 1规范&#xff0c;包括ecn和2017年1月的合规性测试更新。VL817提供双端口和双端口4端口配置&…
阅读更多...
DCDC 升压，降压，充电，限流保护 四位电路

DCDC 升压，降压，充电，限流保护 四位电路

阅读更多...
FMM 笔记：FMM（colab上执行）【官方案例解读】

FMM 笔记：FMM（colab上执行）【官方案例解读】

在colab上运行&#xff0c;所以如何在colab上安装fmm&#xff0c;可见FMM 笔记&#xff1a;在colab上执行FMM-CSDN博客 fmm见&#xff1a;论文笔记&#xff1a;Fast map matching, an algorithm integrating hidden Markov model with precomputation_ubodt(upper bounded ori…
阅读更多...
分布式事务(7)之Seata简介

分布式事务(7)之Seata简介

一、分布式事务解决方案 2PC即两阶段提交协议&#xff0c;是将整个事务流程分为两个阶段&#xff0c;准备阶段&#xff08;Prepare phase&#xff09;、提交阶段&#xff08;commit phase&#xff09;&#xff0c;2是指两个阶段&#xff0c;P是指准备阶段&#xff0c;C是指提交…
阅读更多...
智慧医疗时代来临，全视通给大家介绍智慧病房

智慧医疗时代来临，全视通给大家介绍智慧病房

随着科技的不断发展&#xff0c;智慧医疗已经成为医疗行业的一个重要趋势。智慧医疗技术的应用&#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…
阅读更多...
springboot003图书个性化推荐系统的设计与实现（源码+调试+LW）

springboot003图书个性化推荐系统的设计与实现（源码+调试+LW）

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。今天给大家介绍一篇基于SpringBoot的图书个…
阅读更多...
nacos只发现不发布服务fiddler请求转发到本地

nacos只发现不发布服务fiddler请求转发到本地

https://blog.csdn.net/qq_38826019/article/details/109583854 nacos配置文件参数 spring.cloud.nacos.discovery.register-enabled : false fiddler转发 regex:http://xxx:8080/api/xxx/(?.)$ http://localhost:9209/${param}
阅读更多...
掌握ChatGPT润色绝技：什么是人工智能写作以及如何使用它来完成写作任务

掌握ChatGPT润色绝技：什么是人工智能写作以及如何使用它来完成写作任务

如对AI写论文感兴趣&#xff0c;欢迎添加作者wx讨论 : ryan_2982 人工智能 (AI) 的出现开创了技术进步的新时代&#xff0c;彻底改变了包括写作和内容创作在内的各个行业。人工智能写作和人工智能提示已成为可以简化和增强写作任务的强大工具。在这篇博文中&#xff0c;我们将…
阅读更多...
matplotlib 入门教程

matplotlib 入门教程

一. matplotlib 简介 Matplotlib是一个Python 2D绘图库&#xff0c;它可以在各种平台上以各种硬拷贝格式和交互式环境生成出具有出版品质的图形。 Matplotlib试图让简单的事情变得更简单&#xff0c;让无法实现的事情变得可能实现。 只需几行代码即可生成绘图&#xff0c;直方…
阅读更多...
求购EV代码签名证书，看看性价比最优选项要多少钱？

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

在当今的数字化时代&#xff0c;EV代码签名证书作为一种强化软件安全防线的顶级数字证书&#xff0c;承担着验证软件源码真伪和完整性的重要任务。对于软件开发者和公司来说&#xff0c;购置EV代码签名证书无疑是必不可少的&#xff0c;而其年度费用也成为各方密切关注的核心议…
阅读更多...
【计算机网络】DNS/ICMP协议/NAT技术

【计算机网络】DNS/ICMP协议/NAT技术

文章目录 一、DNS(Domain Name System)1.DNS背景2.域名3.浏览器中输入url后,发生的事情 二、ICMP协议1.什么是ICMP协议2.ICM功能3.ICMP的报文格式4.ping命令5.traceroute命令 三、NAT技术1.NAT技术背景2.NAT IP转换过程3.NAPT4.NAT技术的缺陷5.NAT和代理服务器 四、TCP/IP五层模…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023