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);
			})
		};

效果图

相关推荐
梦曦i7 小时前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app
平头哥技术团队7 小时前
Day 10 | 工欲善其事:VS Code 配置与项目归档
android·开发语言·前端·javascript·html·交互
乌恩大侠7 小时前
GH200 新增 NVMe SSD 分区、格式化与挂载完整流程
运维·服务器·前端
yume_sibai7 小时前
Element Plus 数据展示组件完全指南(15个核心组件)
前端·javascript·vue.js
qiuhaipeng18 小时前
Claude code 升级后上下文长度变短问题
java·前端·数据库
zzz_23688 小时前
个人 AI 记忆如何跨工具复用:用 Markdown、索引和 Skill 搭一个可治理的记忆库
前端·人工智能·react.js·前端框架·agent·agent测评
剑之所向10 小时前
.NET 官方`System.Threading.Channels`
前端·javascript·数据库
计算机魔术师10 小时前
GPT-6 Astra幻觉砍到2%,却被一种老招数轻松绕过
前端
cjy00011111 小时前
2026AI 产品如何从一次性 Demo 变成可重复使用的业务工具?
前端·人工智能·fde
IT_陈寒11 小时前
React的状态更新坑得我差点加班到天亮
前端·人工智能·后端