uni-app Echarts手指在图表上下滑动会导致图表消失 再次点击出现

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app Echarts手指在图表上下滑动会导致图表消失 再次点击出现

开发环境 版本号 项目创建方式
Windows windows11 HBuilderX

产品分类：uniapp/小程序/微信

示例代码：

<template>  
<view>  
<uni-ec-canvas  
class="uni-ec-canvas"  
id="uni-ec-canvas"  
ref="uni-ec-canvas"  
force-use-old-canvas="true"  
canvas-id="uni-ec-canvas"  
ec="ec1"
></uni-ec-canvas><br>
</view><br>
</template><br>
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
export default {
data() {
return {
ec1:{
option:{}
},
}
},
components: {uniEcCanvas},
onLoad() {
this.getdata()
},
methods: {
    getdata() {
            this.ec1.option = {
                title:{
                    text:'能耗排名',
                    left: 'center',
                    top: '0%'
                },
              tooltip: {
                    show: true,
                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: `{b}                     {a0}:{c0}`
                },
                toolbox: {
                  show: false,
              },
                legend: {
                    show: false,
                },
                grid: {
                    left: '10%',
                    right: '15%',
                    bottom: '10%',
                    top: '25%',
                    containLabel: true
                },
                yAxis: {
                    type: 'category',
                    data: ['区域一','区域二','区域三','区域四','区域五'],
                    axisLine: {
                        lineStyle: {
                            color: '#333'
                        }
                    },
                    axisLabel: {
                        interval: 3,
                        rotate: 40,
                        showMaxLabel: true,
                        textStyle: {
                            fontFamily: 'Microsoft YaHei',
                            fontWeight: 600,
                            fontSize: 12
                        }
                    },
                },
                xAxis: {
                    name: '',
                    nameTextStyle: {
                        color: "#333"
                    },
                    type: 'value',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#333'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#b8b8b8'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            fontWeight: 600
                        }
                    }
                },
              series: [
                    {
                        name: '实测单耗',
                        type: 'bar',
                        data: [12,23,34,45,56],
                        barWidth: '30%',
                        itemStyle: {
                            normal: {
                                color: '#4166c0'
                            },
                        },
                    }
              ],
            }
        },
    }
}
</script>
<style></style>

Harmonyos Next教程
1 回复

针对你提到的uni-app中使用Echarts时，手指在图表上下滑动导致图表消失的问题，这通常是由于触摸事件与图表的容器刷新机制冲突所导致的。在移动设备上，滑动操作可能会被误识别为缩放或拖动操作，从而引发图表的重新渲染或隐藏。为了解决这个问题，我们可以尝试以下几种方法：

方法一：禁用图表的触摸事件

如果图表不需要支持缩放和拖动，可以直接禁用这些功能。以下是一个禁用图表触摸事件的示例代码：

// 假设你已经初始化了Echarts实例
let myChart = echarts.init(document.getElementById('main'));

// 配置项，禁用缩放和拖动
let option = {
    // ...其他配置项
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }],
    // 关键部分：禁用触摸事件
    dataZoom: [
        {
            type: 'inside',
            disable: true // 禁用内部缩放
        },
        {
            show: false, // 隐藏外部缩放控件
            type: 'slider',
            disable: true // 禁用外部缩放
        }
    ],
    toolbox: {
        feature: {
            saveAsImage: {}
            // 其他工具项按需配置，但避免使用拖动相关的工具项
        }
    }
};

// 使用配置项生成图表
myChart.setOption(option);

方法二：监听触摸事件并阻止默认行为

如果你希望保留图表的某些触摸功能，但防止滑动导致图表消失，可以监听触摸事件并阻止默认行为：

let chartContainer = document.getElementById('main');

chartContainer.addEventListener('touchmove', function(event) {
    event.preventDefault(); // 阻止默认触摸滑动行为
    // 可以在这里添加自定义的触摸处理逻辑
});

// 初始化Echarts实例和其他配置保持不变
let myChart = echarts.init(chartContainer);
// ...（同上）

方法三：检查容器样式和事件冒泡

确保图表的容器没有设置可能导致元素隐藏或重新渲染的样式，同时检查是否有其他事件处理函数（如父容器的触摸事件）可能影响到图表的显示。

通过上述方法，你应该能够解决uni-app中使用Echarts时手指滑动导致图表消失的问题。如果问题依然存在，可能需要进一步检查具体的代码实现和配置。

回到顶部