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

效果图

相关推荐
IT_陈寒9 分钟前
React性能优化踩的坑,这个错你可能也会犯
前端·人工智能·后端
zhangxingchao21 分钟前
AI应用开发三:RAG技术与应用
前端·人工智能·后端
摘星小杨31 分钟前
如何在前端循环调取接口,实时查询数据
开发语言·前端·javascript
Hilaku1 小时前
从搜索排名到 AI 回答? 先聊一聊 AI 可见度工具 BuildSOM !
前端·javascript·程序员
zzmgc41 小时前
纯静态 + Web Worker + 虚拟滚动:我是怎么让浏览器吃下 10MB JSON 不卡的
前端·架构
辰同学ovo1 小时前
用 Chrome DevTools MCP 给 AI 写的页面做“质检“
前端·人工智能·chrome devtools
乌托邦1 小时前
uni-mini-ci:让 uniapp 小程序构建后自动预览和上传
前端·vue.js·uni-app
豹哥学前端1 小时前
前端工程化实战:从包管理到 Vite 配置,一套下来全明白
前端·javascript·vite
网安小白1 小时前
如果解决github域名解析问题
前端
葬送的代码人生2 小时前
用一句 Prompt 十分钟搓出完整应用
前端·html·ai编程