uniapp开发 uchart 微信小程序点击不显示tooltip
1***@qq.com
- 发布：2022-06-06 17:36
- 更新：2024-09-03 10:01
- 阅读：3192
1***@163.com - 滴水的前端
我遇到的不显示，是css导致的，我是用了transform: translateY，父元素不能有transform，当我给父元素加上position：relative;也不行，所以检查下有没有这两个css的使用
9***@qq.com - 芜湖
我是因为把它放进了scroll-view里，然后小程序返回的坐标不对，就不显示，把它从scroll-view里拿出来就可以了，还有个暴力点的方法是把ucharts.js文件里的isInExactChartArea方法让他返回true
1***@qq.com (作者)
<template>
<view>
<view class="charts-box">
<qiun-data-charts canvasId="chartlineid" :canvas2d="true" type="line" :opts="opts" :chartData="chartsDataLine" :ontouch="false" />
</view>
</view> </template>
<script>
export default {
data() {
return {
chartsDataLine: {},
opts: {},
}
},
onReady() { // 图表配置
this.opts = {
color: ["#FA563F", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
"#ea7ccc"
],
padding: [15, 10, 0, 0],
// background:"rgba(47,13,24,0)",
background: "rgba(0,0,0,0)",
color: "#FA563F",
enableScroll: false, //是否滑动
dataLabel: false,
legend: {
show: false, //true,false,
}, //图例
tooltip: {
showBox: true,
labelFontColor: "#ffffff"
}, //提示窗
xAxis: {
disableGrid: true,
scrollShow: true,
axisLine: false, //绘制坐标轴轴线
itemCount: 7, //轴数据点数量
fontColor: "#FA563F",
// boundaryGap:'justify'
},
yAxis: {
gridType: "dash",
dashLength: 2,
splitNumber: 3, //间隔
data: [{
fontColor: "#FA563F",
// axisLine:false,//绘制坐标轴轴线
// min: 0,
// max: 90
}]
},
extra: {
line: {
type: "curve",
width: 2
},
}
};
//模拟从服务器获取数据
this.getServerData()
},
methods: {
getServerData() {
setTimeout(()=>{
this.chartsDataArea1 ={
categories:["1", "2", "3", "4", "5", "6", "7"],
series:[{name:"体重",data:[35,32,36,34,38,30,50]}]
}
},800)
}
}
} </script>
<style>
.charts-box {
width: 750rpx;
height: 500rpx;
}
</style>
Miaoaa
有用，父元素去掉position: relative;就出现了
2024-03-27 15:33