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

效果图

相关推荐
郭wes代码14 小时前
纯 CSS+JS 实战:手搓一张支持自定义的通用金色电子奖状(万字详细拆解)
前端·javascript·css
用户8417948145614 小时前
vxe-table 实现编辑列的权限控制:列级与表级权限管理
vue.js
阿黎梨梨14 小时前
React 表单处理与性能优化:从入门到进阶
前端·react.js
Whbbit199914 小时前
发布自己的 shadcn-vue 扩展组件,并支持 CLI 安装
前端·开源
Tian_Hang15 小时前
Vue3 父子组件通讯
前端·javascript·vue.js
breeze jiang15 小时前
React memo、useCallback 与 useMemo:父组件多状态时如何减少无效渲染
前端·javascript·react.js
小黑技术栈15 小时前
Java前端基础到入门——16day
java·开发语言·前端
朱涛的自习室15 小时前
从 Prompt 到 Graph:AI 工程的进化史
android·前端·人工智能
敲代码的玉米C16 小时前
让两个模型一写一审
前端·人工智能·架构
代码不加糖17 小时前
common.js和es6中模块引l入的区别?
前端·javascript·es6