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

效果图

相关推荐
C澒3 小时前
系统初始化成功率下降排查实践
前端·安全·运维开发
C澒3 小时前
面单打印服务的监控检查事项
前端·后端·安全·运维开发·交通物流
pas1363 小时前
39-mini-vue 实现解析 text 功能
前端·javascript·vue.js
qq_532453533 小时前
使用 GaussianSplats3D 在 Vue 3 中构建交互式 3D 高斯点云查看器
前端·vue.js·3d
Swift社区4 小时前
Flutter 路由系统,对比 RN / Web / iOS 有什么本质不同?
前端·flutter·ios
雾眠气泡水@4 小时前
前端:解决同一张图片由于页面大小不统一导致图片模糊
前端
开发者小天4 小时前
python中计算平均值
开发语言·前端·python
我谈山美,我说你媚4 小时前
qiankun微前端 若依vue2主应用与vue2主应用
前端
雨季6664 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态色盘生成器”交互模式深度解析
开发语言·前端·flutter·ui·交互
雨季6665 小时前
Flutter 三端应用实战:OpenHarmony 简易“可展开任务详情卡片”交互模式深度解析
开发语言·前端·javascript·flutter·ui·交互