uni-app qiun-data-charts无法显示tooltip

如下代码无法使得图表展示tooltip

html 复制代码
<template>
	<view style="overflow: hidden; background-color: #fff;box-sizing: border-box; border-radius: 5px; box-shadow: 4px 2px 6px #ccc;padding: 10px; position:relative;">
		<view style="font-weight: bold; font-size: 40rpx; color: #4c4c4c;">能耗信息</view>
		<view class="charts-box">
			<bn-title-bar height="15px" font-size="30rpx">
				近30天设备用电趋势
			</bn-title-bar>
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :canvas2d='true' tooltipFormat="tooltipForUnit"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
				opts: {
					update: true,
					color: ["#52c88d", "#52c88d"],
					padding: [15, 5, 12, 5],
					enableScroll: false,
					dataLabel: false,
					canvas2d: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						fontSize: 10,
						labelCount: 10,
						rotateLabel: false,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: false,
						showTitle: true,
						data: [{
							title: "kWh",
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 15,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							seriesGap: 5,
							linearOpacity: 0.5,
							barBorderCircle: true,
							customColor: [
								"#39fae4",
								"#52c88d"
							]
						}
					}
				}
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "目标值",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "完成量",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>

解决方式

去除父级的position: relative

相关推荐
咔咔一顿操作19 分钟前
轻量无依赖!autoviwe 页面自适应组件实战:从安装到源码深度解析
javascript·arcgis·npm·css3·html5
刘联其31 分钟前
.net也可以用Electron开发跨平台的桌面程序了
前端·javascript·electron
韩曙亮31 分钟前
【jQuery】jQuery 选择器 ④ ( jQuery 筛选方法 | 方法分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找 )
前端·javascript·jquery·jquery筛选方法
前端 贾公子31 分钟前
Node.js 如何处理 ES6 模块
前端·node.js·es6
pas13637 分钟前
42-mini-vue 实现 transform 功能
前端·javascript·vue.js
你的代码我的心1 小时前
微信开发者工具开发网页,不支持tailwindcss v4怎么办?
开发语言·javascript·ecmascript
esmap1 小时前
OpenClaw与ESMAP AOA定位系统融合技术分析
前端·人工智能·计算机视觉·3d·ai·js
毕设源码-钟学长1 小时前
【开题答辩全过程】以 基于node.js vue的点餐系统的设计与实现为例,包含答辩的问题和答案
前端·vue.js·node.js
努力d小白1 小时前
leetcode438.找到字符串中所有字母异位词
java·javascript·算法
2501_915918411 小时前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview