小程序用uchart或者echart图表,Android手机微信app版本不是最新版的话频繁出现柱状图和其他图不能点击滑动的bug,下拉刷新可以刷新数据,就是图表不能点击,更新微信app最新版后没那么频繁出现但使用时间长点还是会出现柱状图卡死,一会又正常了,已测试过同样的代码百度小程序不会出现这种问题
ps: uniapp开发微信小程序,下面是手机体验版录屏,前面是卡住了点击不了,后面又行了,以上贴的代码是uniapp开发用e-chart
uchart点击卡死状态录屏,页面没有报错:
下面echart框架卡死状态录屏:
下面是echart uniapp 代码:
<template>
<view class=“container”>
<uni-echarts
class=“ec-canvas”
id=“chart-bar”
ref=“canvas-bar”
canvas-id=“chart-bar”
:ec=“bar”
></uni-echarts>
<uni-echarts
class=“ec-canvas”
id=“chart-pie”
ref=“canvas-pie”
canvas-id=“chart-pie”
:ec=“pie”
></uni-echarts>
</view>
</template>
<script>
import uniEcharts from ‘@/components/uni-echarts/uni-echarts’;
export default {
components: {
uniEcharts
},
data() {
return {
bar: {
lazyload: false,
option: {
color: [’#37a2da’, ‘#32c5e9’, ‘#67e0e3’],
tooltip: {
trigger: ‘axis’,
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: ‘shadow’ // 默认为直线,可选为:‘line’ | ‘shadow’
},
confine: true
},
legend: {
data: [‘热度’, ‘正面’, ‘负面’]
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: ‘value’,
axisLine: {
lineStyle: {
color: ‘#999’
}
},
axisLabel: {
color: ‘#666’
}
}
],
yAxis: [
{
type: ‘category’,
axisTick: { show: false },
data: [‘汽车之家’, ‘今日头条’, ‘百度贴吧’, ‘一点资讯’, ‘微信’, ‘微博’, ‘知乎’],
axisLine: {
lineStyle: {
color: ‘#999’
}
},
axisLabel: {
color: ‘#666’
}
}
],
series: [
{
name: ‘热度’,
type: ‘bar’,
label: {
normal: {
show: true,
position: ‘inside’
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
// emphasis: {
// color: ‘#37a2da’
// }
}
},
{
name: ‘正面’,
type: ‘bar’,
stack: ‘总量’,
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
// emphasis: {
// color: ‘#32c5e9’
// }
}
},
{
name: ‘负面’,
type: ‘bar’,
stack: ‘总量’,
label: {
normal: {
show: true,
position: ‘left’
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
// emphasis: {
// color: ‘#67e0e3’
// }
}
}
]
}
},
pie: {
lazyload: false,
option: {
backgroundColor: “#ffffff”,
color: ["#37A2DA", “#32C5E9”, “#67E0E3”, “#91F2DE”, “#FFDB5C”, “#FF9F7F”],
series: [{
label: {
normal: {
fontSize: 14
}
},
type: ‘pie’,
center: [‘50%’, ‘50%’],
radius: [0, ‘60%’],
data: [{
value: 55,
name: ‘北京’
}, {
value: 20,
name: ‘武汉’
}, {
value: 10,
name: ‘杭州’
}, {
value: 20,
name: ‘广州’
}, {
value: 38,
name: ‘上海’
},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 2, 2, 0.3)’
}
}
}]
}
}
};
},
onReady() { }
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
}
.ec-canvas {
width: 750upx;
height: 750upx;
display: block;
}
</style>