echarts鼠标移入柱状图，上方数值闪烁消失，鼠标移开则再次出现

原创于 2022-08-10 09:53:36 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端 #vue.js #前端框架

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种解决ECharts中鼠标移入柱状图时数值闪烁消失的问题的方法。通过设置echarts配置项setOption的第二个参数为true，可以有效避免数值闪烁现象，提升用户体验。

场景复现

场景描述

鼠标移入柱状图，上方数值闪烁消失，鼠标移开则重新显示

问题复现

由于业务需求，在调后端接口数据，没有返回时，默认显示一个空图表，闪烁问题和这个有关

解决方法

通过echarts配置项setOption增加第二个参数为true

  let option: EChartsOption = {
    xAxis: {
      type: "category",
      data: xAxis.value
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: series.value,
        type: "bar",
        barWidth: 30,
        label: {
          show: true,
          position: "top"
        }
      }
    ]
  };
  myChart.value.setOption(option, true);