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);
}
相关推荐
AI多Agent协作实战派13 分钟前
AI多Agent协作系统实战(十七):凌晨4点,我的AI系统在“假装工作“——3个bug同时爆炸的5小时
java·前端·bug
qq_25183645730 分钟前
基于java Web 动漫视频网站毕业论文
java·开发语言·前端
an317421 小时前
6MB 组织树大文件性能优化全流程
前端·javascript·vue.js
武子康1 小时前
Inkling 975B 说明“开放权重“与“普通开发者本地运行“已经分离,内容重点应是部署容量和运行时边界
前端·人工智能·后端
TeamDev2 小时前
JxBrowser 9.3.1 版本发布啦!
java·前端·javascript·c#·混合应用·jxbrowser·浏览器控件
颜酱2 小时前
03 | 实现节点1 — 抽取关键词
前端·人工智能·后端
整點薯條2 小时前
Vue3+vite创建项目架构文件说明总结
前端·javascript·vue.js
掘金一周3 小时前
想问问掘友们:AI 时代,资深开发的核心价值到底在哪里?| 沸点周刊 7.23
前端·人工智能·后端
橘子星3 小时前
🚀 手把手带你写一个端侧 AI 应用的"加载进度条"与"聊天对话框"
前端·人工智能
37.2℃9953 小时前
专业的Claude Design解决方案
前端·算法