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

效果图

相关推荐
计算机魔术师20 小时前
潜伏14年的PHP致命洞,AI跑两天就交卷了
前端
IT_陈寒20 小时前
Vue的这个响应式陷阱我居然现在才发现
前端·人工智能·后端
Python自动化直播1 天前
智能脚本批量管理拆开看:导入、导出、重写、试听
前端·python·ai·秒播
paopaokaka_luck1 天前
智慧电玩店管理系统(空闲机台随机分配、游玩时长概率模拟、积分自动结算、积分兑换闭环、 ECharts经营分析、 腾讯地图选址)
java·人工智能·mysql·echarts·推荐算法
开开心心就好1 天前
发票信息录入太麻烦?离线工具一键转表格
运维·服务器·前端·pdf·ocr·maven·intellij-idea
এ慕ོ冬℘゜1 天前
ES Promise.all/ Promise.race
前端·javascript·elasticsearch
喜欢打篮球的普通人1 天前
LLVM 前端与优化层:Clang 如何把 C 代码变成 IR
c语言·前端·状态模式
大文说跨境1 天前
亚马逊多店铺用过多款指纹浏览器,说点长期用的实际感受
前端·网络
中屹指纹浏览器svip1 天前
中屹指纹浏览器和普通 Chrome 有什么区别?
前端·chrome·中屹指纹浏览器