Echarts实例中echartsInstance. showLoading和hideLoading

在Echarts中,为了有友好的用户体验,加载大量数据时,需要用到Loading动画效果,具体的组件就是:echartsInstance. showLoading和echartsInstance. hideLoading,且必须成对使用。
在这里插入图片描述
一,组件语法
echartsInstance. showLoading (type?: string, opts?: Object)

default: {
  text: 'loading',
  color: '#c23531',
  textColor: '#000',
  maskColor: 'rgba(255, 255, 255, 0.8)',
  zlevel: 0,

  // 字体大小。从 `v4.8.0` 开始支持。
  fontSize: 12,
  // 是否显示旋转动画(spinner)。从 `v4.8.0` 开始支持。
  showSpinner: true,
  // 旋转动画(spinner)的半径。从 `v4.8.0` 开始支持。
  spinnerRadius: 10,
  // 旋转动画(spinner)的线宽。从 `v4.8.0` 开始支持。
  lineWidth: 5
}

演示应用:


mycharts.showLoading({
      text: 'loading',
      color: '#c23531',
      textColor: '#000',
      maskColor: 'rgba(255, 255, 255, 0.2)',
      zlevel: 0,
    });

setTimeout(() => {
  // setOption前隐藏loading事件 
  mycharts.hideLoading();
  mycharts.setOption(option);
}, 1000);

hideLoading,直接调用即可。

二、使用位置:

  // 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('map'));
  //showLoading遮盖层显示
    myChart.showLoading();
    var option ={}
// setOption前隐藏loading事件 
  mycharts.hideLoading();
  mycharts.setOption(option);

Done!

©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值