js教程

echarts增加loading加载中效果方法

我的站长站 2024-09-24 人阅读

需要开发echarts中的loading加载中效果,我们可以使用到echart自带showLoading()方法。

在需要加载数据的地方使用showLoadin()方法显示loading加载中效果,数据加载完成后再调用hideLoading()方法,隐藏loading加载中效果。

官方文档

官方文档地址:https://echarts.apache.org/zh/api.html#echartsInstance.showLoading

显示加载动画效果:

echartsInstance. showLoading Function

可以在加载数据前手动调用该接口显示加载动画,在数据加载完成后调用 hideLoading 隐藏加载动画。

参数:

type

可选,加载动画类型,目前只有一种'default'

opts

可选,加载动画配置项,跟type有关,下面是默认配置项:

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,
  // 字体粗细。从 `v5.0.1` 开始支持。
  fontWeight: 'normal',
  // 字体风格。从 `v5.0.1` 开始支持。
  fontStyle: 'normal',
  // 字体系列。从 `v5.0.1` 开始支持。
  fontFamily: 'sans-serif'
}

隐藏动画加载效果:

echartsInstance. hideLoadingFunction

完整示例代码:

import echarts from 'echarts';
 
const mycharts = echarts.init(document.getElementById('echart'));
// 调用showLoading方法
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);
 
const option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};


相关推荐
  • echarts
  • echarts柱状图样式参数

    1:线条/节点颜色series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: &#39;line&#39;, itemStyle: { normal: { color: &#39;#E6A23C&#39;, lineStyle: { color: &#39;#409EFF&#39...

    js教程 8 1个月前
  • 百度echarts柱状图使用教程
    百度echarts柱状图使用教程

    echarts简介echarts是百度出品的一款开源JS柱状图框架,目前市面柱状图大部分都是使用这款echarts。作为前端开发者不得不学好echarts框架,echarts文档太复杂,我的站长站精简了使用方法,不看原理,只给...

    js教程 6 1个月前
  • echarts增加loading加载中效果方法

    需要开发echarts中的loading加载中效果,我们可以使用到echart自带showLoading()方法。在需要加载数据的地方使用showLoadin()方法显示loading加载中效果,数据加载完成后再调用hideLoading()方法,隐藏loading加载中效果。官方文档官方文档地址:https://ec...

    js教程 7 2周前
最新更新