在Uniapp中使用Ucharts实时动态更新数据时重新渲染，导致图表闪烁和抖动问题，解决方法

原创已于 2024-11-01 10:56:14 修改

· 1.1k 阅读

3 ·

版权

文章标签：

#uni-app

于 2024-11-01 10:16:40 首次发布

在Uniapp中使用Ucharts组件进行实时动态数据展示，发现每次更新数据时，图表会出现闪烁和抖动。

解决方案：

在opts对象中，增加属性: update：true, duration：0, animation：false,

具体代码如下：

<template>
  <view class="charts-box">
    <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        categories: ["00:00", "01:04", "03:05", "04:12", "05:00"],
        series: [
          {
            name: "",
            data: [10, 20, 30, 40, 50], // Y轴配置
          },
        ],
      },
      opts: {
        color: ["#fcb13c"], // 每一条的颜色
        // padding: [15, 10, 0, 15],
        enableScroll: false,
        animation: false, // 关闭动画
        update: true, // 关键：是否开启连续更新数据的方法,开启之后就不会抖动了
        duration: 0, // 关闭动画过度
        legend: {
          //图例相关配置
          show: false,
        },
        dataLabel: false,
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
          },
        },
      },
    }
  },
  computed: {
   
  },
  
  mounted() {
    
  },
  methods: {
    
  },
}
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 300rpx;
}
</style>

修改后效果，没有出现抖动和闪烁了，请看下图gif动画效果