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

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

javascript 复制代码
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);
}
相关推荐
Mike_jia26 分钟前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话26 分钟前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby28 分钟前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云30 分钟前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo31 分钟前
前端获取环境变量方式区分(Vite)
前端·vite
一千柯橘37 分钟前
Nestjs 解决 request entity too large
javascript·后端
土豆骑士41 分钟前
monorepo 实战练习
前端
土豆骑士43 分钟前
monorepo最佳实践
前端
见青..44 分钟前
【学习笔记】文件包含漏洞--本地远程包含、伪协议、加密编码
前端·笔记·学习·web安全·文件包含
举个栗子dhy1 小时前
如何处理动态地址栏参数,以及Object.entries() 、Object.fromEntries()和URLSearchParams.entries()使用
javascript