echarts实现不展示X轴Y轴轴线、刻度

news2024/11/15 21:22:13

今日工作中需要实现折线图的简图,就是只看个大概趋势不展示具体坐标,查阅了文档记录一下。

initCharts(_id, _name, yAxisData, _unit){
	if(this[_id]) this[_id].clear();
	this[_id] = $echarts.init(document.getElementById(_id));
	const options = {
		grid: {//位置
			left: '6%',
			right: 0,
			bottom: 20,
			top: 10,
			containLabel: true//是否包含坐标值
		},
		xAxis: [{
			type: 'time',
			axisLabel: {//坐标轴刻度标签
				show: false
			},
			axisLine: {//坐标轴轴线
				show: false
			},
			axisTick: {//坐标轴刻度
				show: false
			}
		}],
		yAxis: [{
			type: 'value',
			splitLine: {//坐标轴在grid区域中的分割线
				show: false
			},
			axisLabel: {//坐标轴刻度标签
				show: false
			},
		}],
		series: [{
			type: 'line',
			name: _name,
			smooth: true,//是否平滑曲线
			symbol: 'none',//标记的图形,去掉默认的小圆点标识
			data: yAxisData,
			lineStyle: {//线条颜色
				color: '#ffffff'
			},
			areaStyle: {//填充区域渐变色
				color: new $echarts.graphic.LinearGradient(0,0,0,1,[
					{
						offset: 0,
						color: 'rgba(255, 255, 255, 0.5)'
					},{
						offset: 1,
						color: 'rgba(255, 255, 255, 0)'
					}
				])
			}
		}]
	}
	//将实例属性清空,为了解决图表还未渲染时切换页面,再切回来时图表不渲染问题
	document.getElementById(_id).setAttribute('_echarts_instance_', '');
	this[_id].setOption(option);
}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

settings.json配置

settings.json配置 {"editor.tabSize": 2,"git.ignoreWindowsGit27Warning": true,"workbench.editor.untitled.hint": "hidden","security.workspace.trust.untrustedFiles": "open","[vue]": {"…

老师的保命大法

数字化高度发达的今天,成绩查询系统已经成为学校教育中不可或缺的一部分。不同于传统的成绩公布方式,成绩查询系统更加高效、便捷,同时也充分保障了每位学生的隐私,今天就来揭秘这个教师保命大法! 1、代码查询法 对于…

docker内更新显卡cuda cudnn

当前docker使用的cuda为10.2,为保证服务器环境使用相同的cuda版本,需对cuda版本进行升级,时间长了忘记如何操作,此处记录一下: *docker内使用的cuda版本低于容器外的显卡驱动版本即可,此处不对显卡驱动进行…

HTML5学习系列之实用性标记

HTML5学习系列之实用性标记 前言实用性标记高亮显示进度刻度时间联系信息显示方向换行断点标注 总结 前言 学习记录 实用性标记 高亮显示 mark元素可以进行高亮显示。 <p><mark>我感冒了</mark></p>进度 progress指示某项任务的完成进度。 <p…

程序员兼职平台有哪些?这样写兼职简历让你收入直接飙升30k!

这是著名程序员兼职平台 “猿急送”的分享资料&#xff0c;猿急送2015年成立&#xff0c;国内最早最领先的程序员兼职平台&#xff0c;今天跟大家继续讲一下在程序员兼职平台里接单的一个重要问题&#xff1a;怎样写好个人兼职简历&#xff1f;&#xff08;想直接看主流程序员兼…

图形化探索:快速改造单实例为双主、MGR、读写分离等架

单机GreatSQL/MySQL调整架构为多副本复制的好处有哪些&#xff1f;为什么要调整&#xff1f; 性能优化&#xff1a;如果单个GreatSQL服务器的处理能力达到瓶颈&#xff0c;可能需要通过主从复制、双主复制或MGR&#xff0c;以及其他高可用方案等来提高整体性能。通过将读请求分…

SoftwareTest7 - JUnit 是个啥 ? 他跟 Selenium 有什么关系 ?

JUnit 是个啥 ? 他跟 Selenium 有什么关系 ? 一 . 相关注解1.1 Test1.2 BeforeEach1.3 BeforeAll1.4 AfterEach1.5 AfterAll 二 . 断言2.1 assertEquals2.2 assertNotEquals2.3 assertTrue / assertFalse : 断言结果为真/假2.4 assertNull / assertNotNull : 断言结果为空 / …

数据结构—内部排序(下)

文章目录 8.内部排序(下)(6).归并排序#1.先做合并#2.再来排序#3.代码实现#4.稳定性与时间复杂度分析 (7).快速排序#1.算法思想#2.代码实现#3.稳定性与时间复杂度分析 (8).基数排序#1.算法思想#2.稳定性和时间复杂度分析 小结 8.内部排序(下) (6).归并排序 那我们的时间复杂度还…

【评论送书】十本架构师成长和软件架构技术相关的好书(可以任选)

正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 参与规则 本次送书1~5本参与方式&#xff1a;关注博主、点赞、收藏、评论&#xff08;从评论区…

Maven:通过相对路径向jar中添加依赖项

问&#xff1a;我有一个专有的jar&#xff0c;我想把它作为一个依赖项添加到我的pom中。 但我不想把它添加到存储库中。原因是我希望常用的maven命令(如mvn compile等)能够开箱即用。(无需要求开发人员自己将其添加到某个存储库中)。 我希望jar在源代码控制中的第三方库中&…

idea菜单栏任务栏放缩比例修改

在编辑自定义VM选项中增加 -Dide.ui.scale0.8 参数 Help -> Edit Custom VM Options

Visual Studio Code配置c/c++环境

Visual Studio Code配置c/c环境 1.创建项目目录2.vscode打开项目目录3.项目中添加文件4.文件内容5.配置编译器6.配置构建任务7.配置调试设置 1.创建项目目录 d:\>mkdir d:\c语言项目\test012.vscode打开项目目录 3.项目中添加文件 4.文件内容 #include <iostream> u…

Linux C 编程入门 (GCC 和 Makefile的使用和编写)

Linux C 编程入门 在 Windows 下我们可以使用各种各样的 IDE 进行编程&#xff0c;比如强大的 Visual Studio。Ubuntu 下也有一些可以进行编程的工具&#xff0c;但是大多都只是编辑器&#xff0c;也就是只能进行代码编辑&#xff0c;如果要编译的话就需要用到 GCC 编译器&…

基于opencv+tensorflow+神经网络的智能银行卡卡号识别系统——深度学习算法应用(含python、模型源码)+数据集(二)

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 训练集图片处理1&#xff09;数据加载2&#xff09;图像处理 2. 测试图片处理1&#xff09;图像读取2&#xff09;图像处理 相关其它博客工程源代码下载其它资料下载 前言 本项目基于从网络获取的多种银行卡数据…

AR贴纸特效SDK,无缝贴合的虚拟体验

增强现实&#xff08;AR&#xff09;技术已经成为了企业和个人开发者的新宠。它通过将虚拟元素与现实世界相结合&#xff0c;为用户提供了一种全新的交互体验。然而&#xff0c;如何将AR贴纸完美贴合在人脸的面部&#xff0c;同时支持多张人脸的检测和标点及特效添加&#xff0…

【Android 】android13 新权限获取 读写文件权限

android13 新权限获取 参考&#xff1a;Android 13(API 33)读写SD卡权限的调整适配 - Mr,Han - 博客园 android在 获取文件读写权限&#xff08;尤其是音视频、图片等等资源&#xff09;的权限获取逻辑更换了。 必须申请如下权限&#xff1a; public static final String READ…

RedisTemplate乱码问题

其实这是在解决一个项目问题是发现的&#xff0c;因为原开发者的大意&#xff0c;造成了系统出现严重的逻辑问题。 因为系统系统采用分模块开发&#xff0c;某模块使用Spring提供的RedisTemplate进行值的读写&#xff0c;另一位使用了框架基于Jedis的一套公用方法进行值的读写…

java springboot application中设置正确的数字密码连不上数据库问题解决

说一个真实存在的问题 就是 有时候 我们在配置文件中设置了正确的数据库密码 但是 就是连不上 比如 我在application.yml配置文件中配置了一个数据库密码 这里 我们写的是 0127 然后 我们在程序中 读取并打印出来 看看系统拿到的到底是个什么&#xff1f; 但怪了 系统给我们…

选择墨西哥专线双清包税前需要了解什么?

选择墨西哥专线双清包税前&#xff0c;需要了解以下几个方面的情况&#xff1a; 1. 墨西哥市场的需求和特点&#xff1a;首先需要了解墨西哥的市场需求和特点&#xff0c;包括消费者对于产品的偏好、消费习惯、购买力等。对于汽配零件行业来说&#xff0c;需要了解墨西哥汽车市…