当前位置: 首页 > news >正文

echarts甘特图 一个值多条线

 先看图

 

这里我们用到的是 series :type:custom  自定义,但是这里我遇到一个问题,就是不过你在series里push多少数据,图表上显示的都是在同一水平线,用了好多方法都不好使,

renderItem: (params, api) => {//开发者自定义的图形元素渲染逻辑,是通过书写 renderItem 函数实现的var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。var end = api.coord([api.value(2), categoryIndex]);var height = 10;return {type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。shape: echarts.graphic.clipRectByRect({// 矩形的位置和大小。x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height,},{// 当前坐标系的包围盒。x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height,}),style: api.style(),};},

图: 重叠在一起 ,

 最后用了最后使用了里面renderItem 返回的 y轴定位解决的(有好的方法可以和我说)。

renderItem: (params, api) => {//开发者自定义的图形元素渲染逻辑,是通过书写 renderItem 函数实现的var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。var end = api.coord([api.value(2), categoryIndex]);var height = 10;return {type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。y:10,shape: echarts.graphic.clipRectByRect({// 矩形的位置和大小。x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height,},{// 当前坐标系的包围盒。x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height,}),style: api.style(),};},

全部代码

<template><div ref="echart" id="echart" class="echart"></div>
</template><script setup>
import { nextTick, onMounted, ref } from "vue";
import * as echarts from "echarts";let showData = [[{value: [0, "2021-07-19 03:29:19", "2021-07-19 08:38:50", 0],},{value: [0, "2021-07-19 20:53:07", "2021-07-19 21:00:08", 1],},],[{value: [0, "2021-07-19 00:00:00", "2021-07-19 00:08:02", 0],},{value: [0, "2021-07-19 01:38:37", "2021-07-19 01:50:08", 1],},{value: [0, "2021-07-19 22:31:30", "2021-07-19 22:44:13", 2],},{value: [1, "2021-07-19 20:53:07", "2021-07-19 11:00:08", 0],},{value: [1, "2021-07-19 22:31:30", "2021-07-19 22:44:13", 0],},],[{value: [0, "2021-07-19 03:21:54", "2021-07-19 03:33:30", 0],},{value: [0, "2021-07-19 05:03:56", "2021-07-19 05:17:26", 1],},{value: [0, "2021-07-19 06:45:45", "2021-07-19 06:59:49", 2],},{value: [1, "2021-07-19 06:53:07", "2021-07-19 11:00:08", 0],},{value: [1, "2021-07-19 12:00:30", "2021-07-19 14:44:13", 1],},],
];// 分配y值
const produceSeries = (data) => {let len = data.length;let step = len % 2 == 1 ? -5 : 2;let series = [];data.map((val, index) => {if (step == -5) {series.push(configSeriec(val, index, 0));step = step + 15;return;}if (index % 2 == 0) {series.push(configSeriec(val, index, step));step = step + 15;} else {series.push(configSeriec(val, index, -step));step = step + 15;}});function configSeriec(val, index, step) {return {type: "custom",renderItem: (params, api) => {//开发者自定义的图形元素渲染逻辑,是通过书写 renderItem 函数实现的var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。var end = api.coord([api.value(2), categoryIndex]);var height = 10;return {type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。y: step,shape: echarts.graphic.clipRectByRect({// 矩形的位置和大小。x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height,},{// 当前坐标系的包围盒。x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height,}),style: api.style(),};},encode: {x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴y: 0, // data 中『维度0』对应到 Y 轴},itemStyle: {normal: {color: function (params) {//return colorTheme[params.value[0]];return colorTheme[index];},},},data: val,};}return series;
};let option = {title: {text: "我是标题",x: "center",textStyle: {fontSize: 20,color: "#333333",},},tooltip: {enterable: true,backgroundColor: "rgba(255,255,255,1)", //背景颜色(此时为默认色)borderRadius: 5, //边框圆角padding: 10, // [5, 10, 15, 20] 内边距textStyle: {color: "#000",},position: function (point, params, dom, rect, size) {dom.innerHTML = params.value[1] + "~" + params.value[2];},},legend: {//图例data: "我是图例",left: "90px",top: 22,itemWidth: 16,itemHeight: 16,selectedMode: false, // 图例设为不可点击textStyle: {color: "#333333",fontSize: 16,},},toolbox: {show: true,feature: {saveAsImage: {},},},xAxis: {name: "场景时间",nameTextStyle: {color: "#333333",fontSize: 18,},type: "time",splitNumber: 6,max: "2021-07-20 00:00:00",min: "2021-07-19 00:00:00", //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增axisLabel: {show: true,formatter: function (value) {//在这里写你需要的时间格式var t_date = new Date(value);return ([t_date.getFullYear(),t_date.getMonth() + 1,t_date.getDate(),].join("-") +" " +[t_date.getHours(), t_date.getMinutes()].join(":"));},},splitLine: {show: true,lineStyle: {color: "#333333",},},axisLine: {show: true,color: "#333333",symbol: ["none", "arrow"],lineStyle: {color: "#333333",width: 1,type: "solid",},},},yAxis: {name: "y轴",nameTextStyle: {color: "#333333",fontSize: 18,},axisLine: {color: "#333333",lineStyle: {color: "#333333",},symbol: ["none", "arrow"],},axisLabel: {show: true,textStyle: {color: "#333333", //这里用参数代替了},},data: ["图例", "图例2"],},dataZoom: [{show: true,realtime: true,start: 0,end: 100,xAxisIndex: [0, 1],},{type: "inside",realtime: true,start: 30,end: 70,xAxisIndex: [0, 1],},],series: produceSeries(showData),
};let echart = ref();
onMounted(() => {nextTick(() => {console.log(echart.value);let myChart = echarts.init(echart.value);myChart.setOption(option);});
});
</script>
<style  lang="less">
.echart {width: 100%;height: 600px;
}
</style>

相关文章:

echarts甘特图 一个值多条线

先看图 这里我们用到的是 series &#xff1a;type:custom 自定义&#xff0c;但是这里我遇到一个问题&#xff0c;就是不过你在series里push多少数据&#xff0c;图表上显示的都是在同一水平线&#xff0c;用了好多方法都不好使&#xff0c; renderItem: (params, api) >…...

多态性说明

多态 多态性多态性类型描述编译时多态和运行时多态的差异go 语言多态性 多态性 多态性类型描述 多态性是面向对象编程中的一个重要概念&#xff0c;它允许不同的对象通过相同的接口表现出不同的行为&#xff0c;从而实现更加灵活和可扩展的代码结构。多态性有助于降低代码的耦…...

2023-08-04 LeetCode每日一题(不同路径 III)

2023-08-04每日一题 一、题目编号 980. 不同路径 III二、题目链接 点击跳转到题目位置 三、题目描述 在二维网格 grid 上&#xff0c;有 4 种类型的方格&#xff1a; 1 表示起始方格。且只有一个起始方格。2 表示结束方格&#xff0c;且只有一个结束方格。0 表示我们可以…...

腾讯云服务器地域怎么选?可用区是什么?

腾讯云服务器地域有什么区别&#xff1f;怎么选择比较好&#xff1f;地域选择就近原则&#xff0c;距离地域越近网络延迟越低&#xff0c;速度越快。关于地域的选择还有很多因素&#xff0c;地域节点选择还要考虑到网络延迟速度方面、内网连接、是否需要备案、不同地域价格因素…...

第一百二十三天学习记录:C++提高:STL-vector容器(下)(黑马教学视频)

vector插入和删除 功能描述&#xff1a; 对vector容器进行插入、删除操作 函数原型&#xff1a; push_back(ele); //尾部插入元素ele pop_back(); //删除最后一个元素 insert(const_iterator pos, ele); //迭代器指向位置pos插入元素ele insert(const_iterator pos, int cou…...

谈谈Spring与字节码生成技术

Spring框架是一个面向企业级Java应用开发的开源框架&#xff0c;它提供了许多功能和特性来简化Java开发过程。字节码生成技术在Spring框架中起着重要的作用&#xff0c;用于实现依赖注入&#xff08;Dependency Injection&#xff09;和面向切面编程&#xff08;Aspect-Oriente…...

Java数组详解 -- 基础知识与常用操作

文章目录 前言一、初识数组1. 数组的定义2. 数组的特点3. 声明和初始化数组4. 默认初始化值 二、访问和操作数组元素1. 数组的索引和范围2. 通过索引访问数组元素3. 修改数组元素的值 三、数组的长度和属性1. 数组的长度计算2. 数组的长度属性3. 数组越界的错误 四、数组的遍历…...

(统计学习方法|李航)第五章 决策树——一二三节:决策树模型与学习,特征选择,决策树的生成,

目录 一&#xff0c;决策树模型与学习 1.决策数模型 2.决策树与if-then规则 3.决策树与条件概率分布 4.决策树学习 二&#xff0c;特征选择 1.特征选择问题 2.信息增益 3.信息增益比 三&#xff0c;决策树的生成 1.ID3算法 2.C4.5的生成算法 一&#xff0c;决策树模型…...

qt lamda表达式及捕获变量列表符号说明及示例

问题描述: 最近发现很多人都喜欢用Lamda表达式了,至于他们到底知不知道自己用的是什么意思,那就另说了。 虽然我个人并不太喜欢,因为很多地方没法像以前信号和槽那样清晰了,而且很多生成UML的软件估计也不支持解析转成对应的序列图啥的。 但是这个lamda写法确实挺方便的…...

第十六章、【Linux】程序管理与SELinux初探

16.1 什么是程序 &#xff08;process&#xff09; 在Linux 系统当中&#xff1a;“触发任何一个事件时&#xff0c;系统都会将他定义成为一个程序&#xff0c;并且给予这个程序一个 ID &#xff0c;称为 PID&#xff0c;同时依据启发这个程序的使用者与相关属性关系&#xff…...

ElasticSearch索引生命周期管理--DELETE

概要 ElasticSearch中的索引生命周期管理&#xff0c;也就是ilm&#xff08;Manage the index lifecycle&#xff09;,是指定了索引在不同周期下的处理策略。ilm 的对象是索引而不是索引中的数据。ilm 包括四个阶段&#xff1a;hot 、warm、cold和delete。hot、warm和cold表示…...

sentinel简单使用

核心demo&#xff1a; 1 引入依赖: <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-core</artifactId><version>1.8.0</version> </dependency>2 核心代码&#xff1a; 3 限流保护代码&#xff1a;…...

C#小轮子:自动连续Ping网络地址

文章目录 前言Ping代码异步问题 前言 工作中&#xff0c;我们经常用到Ping这个指令&#xff0c;有时候我们需要Ping整个网段来查看这个网段上面有什么设备&#xff0c;哪些Ip地址是通的&#xff0c;这个时候就需要Ping指令 Ping 代码 我这个是批量Ping的代码&#xff0c;而…...

react入门笔记

什么是React? React是一个用于创建用户界面的开源前端javaScript库。它是声明式的、高效的和灵活的&#xff0c;并且他坚持基于组件的方法&#xff0c;这使得我们能够创建可重用的UI组件。 React是一个开源的前端javaScript库&#xff0c;用于构建用户界面或者UI组件。它是由…...

记录--前端重新部署如何通知用户

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 1. 场景 前端构建完上线&#xff0c;用户还停留还在老页面&#xff0c;用户不知道网页重新部署了&#xff0c;跳转页面的时候有时候js连接hash变了导致报错跳不过去&#xff0c;并且用户体验不到新功能…...

WPS的excel表格单元格拖动数字日期等 不自增原因

对着表格中的每个单元格右下角,在变成下图,黑十字后,拖动这个十字.就会在右侧出现一个小窗口. 里面菜单中可以选择按序数增加 但是,如果拖动,发现小窗口菜单不出现.说明这一栏开启了筛选功能.清空筛选条件后,即可恢复自增功能....

2308C++简单异步懒

Lazy Lazy由C20无栈协程实现.一个Lazy闭包一个懒求值的计算任务. 使用Lazy 想用Lazy,需要先#inlude<async_simple/coro/Lazy.h>,再实现返回类型为Lazy<T>的协程函数即可.如: # 包含<简单异步/协程/懒.h>懒<整>任务1(整 x){协中 x;//带有协中的函数…...

Linux常规操作命令

日升时奋斗&#xff0c;日落时自省 目录 1、vim 1.1、工作模式 1.2、末行模式操作相关命令 1.2.1、保存退出操作 1.2.2、查找替换 1.3、输入模式操作相关命令 1.3.1、移动相关命令 1.3.2、删除和剪切命令 1.3.3、复制操作 1.3.4、撤销 2、head 3、tail 4、ps 5、…...

日期切换

组件&#xff1a;<template><div class"time-picker"><el-radio-group size"small" v-model"timeType" change"changePickerType"><el-radio-button label"hour" v-if"isShow">时</el…...

怎么裁剪视频大小尺寸?简单的裁剪方法分享

怎么裁剪视频的画面大小尺寸呢&#xff1f;有时当我们下载下来一段视频&#xff0c;由于视频的画面大小比例不同&#xff0c;会有很多的黑边&#xff0c;我们不管是观看还是进行二次编辑都非常影响体验&#xff0c;而调整视频画面比例以适应观众的设备或平台&#xff0c;比如将…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...