关于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，一经查实，立即删除！

相关文章

示波器的学习

示波器的学习

示波器是什么 示波器&#xff0c;“人”如其名&#xff0c;就是显示波形的机器&#xff0c;它还被誉为“电子工程师的眼睛”。它的核心功能就是为了把被测信号的实际波形显示在屏幕上&#xff0c;以供工程师查找定位问题或评估系统性能等等。主要用于电子、电气、通信等领域的…
阅读更多...
k8s 声明式（yaml）资源管理及yaml文件解析

k8s 声明式（yaml）资源管理及yaml文件解析

目录 声明式概念 用途 语法 资源配置清单管理命令 查看资源配置清单&#xff1a; 查看资源详细信息&#xff1a; 创建资源配置清单&#xff1a; 删除资源&#xff1a; 编辑资源配置&#xff1a; 更新资源配置清单&#xff1a; 解释资源配置清单 两种方式来修改 Kube…
阅读更多...
Spark集群搭建的三种方式详解

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

国科大学习生活&#xff08;期末复习资料、课程大作业解析、学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&#xff09; 大数据开发学习文档&#xff08;分布式文件系统的实现&#xff0c;大数据生态圈学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&#xff…
阅读更多...
如何统计数组中重复元素的数量并获取其他相关数据？

如何统计数组中重复元素的数量并获取其他相关数据？

在JavaScript中&#xff0c;可以使用以下方法来统计数组中重复元素的数量并获取其他相关数据&#xff1a; function countDuplicates(array) {// 创建一个对象来存储每个knowledgeId的信息&#xff0c;包括重复数量和其他数据var counts {};// 遍历数组&#xff0c;计算每个k…
阅读更多...
交叉编译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-…
阅读更多...
Java单元测试 - mock静态方法

Java单元测试 - mock静态方法

文章目录 1. mock 静态方法2. 升级 maven 依赖3. 示例 1. mock 静态方法 mockito 在 3.4.0 版本之后&#xff0c;开始支持 mock static method。 2. 升级 maven 依赖 <dependency><groupId>org.mockito</groupId><artifactId>mockito-core</artif…
阅读更多...
.NET Core Web API介绍+优缺点

.NET Core Web API介绍+优缺点

一.NET Core Web API介绍 似乎有一些拼写错误在您的问题中&#xff0c;我猜测您可能是想问关于“.NET Core Web API”的介绍。如果是这样的话&#xff0c;我将为您提供关于.NET Core Web API的基本介绍。 .NET Core Web API 是一种构建 HTTP 服务的框架&#xff0c;它是 ASP.N…
阅读更多...
CG-0A 电子水尺可实现对水位数据的连续自动监测

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

CG-0A 电子水尺可实现对水位数据的连续自动监测产品概述 本产品是一种采用微处理器芯片为控制器&#xff0c;内置通讯电路的数字式水位传感器&#xff0c;具备高的可靠性及抗干扰性能。适用于江、河、湖、水库及蓄水池、水渠等处的水位测量使用。 本产品采用了生产工艺技术&…
阅读更多...
VS Code代码补全失效 - 解决方案

VS Code代码补全失效 - 解决方案

问题 在Linux主机或Docker环境下&#xff0c;使用 VS Code 编写 CPP 代码时&#xff0c;变量没有代码补全。 解决方案 首先确保已经安装并启用了 C 扩展3件套&#xff1a;C/C、C/C Themes、CMake Tools 。 确保设置中的 C_CPP: Intelli Sense Engine 选项为 default &#x…
阅读更多...
雾锁王国服务器怎么建？雾锁王国服务器搭建方法

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

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

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

一、高性能设计 消息分区&#xff1a;不受单台服务器的限制&#xff0c;可以不受限的处理更多的数据。 顺序读写&#xff1a;磁盘顺序读写&#xff0c;提升读写效率。 页缓存&#xff1a;把磁盘中的数据缓存到内存中&#xff0c;把对磁盘的访问变为对内存的访问。 零拷贝&a…
阅读更多...
【k8s相关资源api操作】

【k8s相关资源api操作】

k8s相关资源api操作 文章目录 k8s相关资源api操作AdmissionregistrationApiextensionApiregistrationAppsV1ApiAutoscalingV1ApiBatchV1ApiCertificatesApi 证书相关CoordinationV1Api 最重要的CoreV1Api !!!CustomObjectsApiDiscoveryV1ApiEventsV1ApiFlowcontrolApiserverApi…
阅读更多...
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是指提交…
阅读更多...
vue2 computed原理，与watch的区别

vue2 computed原理，与watch的区别

文章目录 computed实现原理computed与watch的区别computedwatch computed实现原理 源码实现computed 依赖收集&#xff1a;当我们首次访问一个计算属性时&#xff0c;它的 getter 函数会被执行。在 getter 函数执行过程中&#xff0c;会访问它所依赖的响应式数据&#xff0c;这…
阅读更多...
最新文章

Copyright @ 2022~2023