echarts重绘不生效,setOption第二个参数设为true

问题:当修改setOption值的时候,我们异步回来的数据层级比较深的情况下,需要echarts重绘,否则不会如愿显示
主要体现:你增加数据可以,但是减少数据,发现视图上还是保持着最多数据的展示效果,很纳闷,明明可以通过移步修改数据,为何增加可以绘制地图而减少好像就什么都没有做

解决:原来是setOption的第二参数(notMerge)在做怪

因为echarts绘制都要创建一个Echarts实例,返回echartsInstance。所以我们只需要在重新创建的时候,移除之前创建的实例并且重新创建一个Echarts实例:

var option = {
        tooltip: {
          trigger: "axis",
          extraCssText: "max-height: 200px; overflow: auto;", // 设置悬浮窗样式
          position: function (pos, params, dom) {
            dom.style.pointerEvents = "auto"; // 修改悬浮窗不可绑定事件的css属性
          },
        },
        legend: {
          type: "scroll",
          data: this.arrCourse_legend,
        },
        grid: {
          top: "14%",
          left: "0",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: { rotate: 45 },
          data: this.arrCourse_xAxis,
        },
        yAxis: {
          type: "value",
          axisLabel: { rotate: 45 },
        },
        series: this.arrCourseSeries,
      };
myChart.setOption(option, true); // 参数二传true进去

设置为true的话,就是notMerge 不合并,false的话,就Merge 之前的东西还保留~

可选,是否不跟之前设置的 option 进行合并,默认为 false,即合并。

拓展:setOption中3个参数的含义
option—— 图表的配置项和数据
notMerge—— 可选,是否不跟之前设置的 option 进行合并,默认为 false,即合并。
lazyUpdate—— 可选,在设置完 option 后是否不立即更新图表,默认为 false,即立即更新。

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值