vue使用echarts实现只显示一根线的图表

html

复制代码
<div ref="echartRef" style="height: 50px;"></div>

js

复制代码
		const init = async () => {
			let option = {
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					left: '-15px',
					right: '-15px',
					top: '1px',
					bottom: '1px',
				},
				xAxis: {
					show: false, // 隐藏xAxis
					type: 'category',
					data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], // 示例数据,可根据需要调整或移除
					scale: true
				},
				yAxis: {
					show: false, // 隐藏yAxis
					type: 'value',
					scale: true
				},
				series: [{
					data: [10, 199, 4, 0, 55, 0, 34, 0, 88, 0, 99, 0], // 示例数据,可根据需要调整或移除
					type: 'line', // 指定图表类型为折线图
					smooth: true, // 使折线平滑显示
					showSymbol: false,
					itemStyle: {
						normal: {
							opacity: 1 // 默认状态完全不透明
						},
						emphasis: {
							opacity: 0 // 鼠标悬停时透明度为0,隐藏小圆点
						}
					}
				}],
			};
			var myChart = echarts.init(proxy.$refs.echartRef);
			myChart.clear();

			nextTick(() => {
				myChart.setOption(option);
			})
		};

效果图

相关推荐
AI袋鼠帝2 小时前
火爆全网的Seedance2.0 十万人排队,我2分钟就用上了
前端
IT_陈寒2 小时前
React Hooks闭包陷阱:你以为的state可能早就过期了
前端·人工智能·后端
Jenlybein2 小时前
快速了解熟悉 Vite ,即刻上手使用
前端·javascript·vite
小码哥_常2 小时前
安卓开发避坑指南:全局异常捕获与优雅处理实战
前端
lihaozecq2 小时前
我用 1 天的时间 vibe coding 了一个多人德州扑克游戏
前端·react.js·ai编程
momo061172 小时前
AI Skill是什么?
前端·ai编程
言萧凡_CookieBoty2 小时前
用 AI 搞定用户系统:Superpowers 工程化开发教程
前端·ai编程
小小小小宇2 小时前
Go 语言协程
前端
牛奶2 小时前
5MB vs 4KB vs 无限大:浏览器存储谁更强?
前端·浏览器·indexeddb
牛奶2 小时前
setTimeout设为0就马上执行?JS异步背后的秘密
前端·性能优化·promise