Echarts加载动画结束加载动画

echarts yekong

最近有个vue项目开发时要求Echarts在请求接口前需要有个加载动画,请求完数据后隐藏动画,于是收集了一下代码

显示加载动画

chart.showLoading() //显示加载动画,默认样式

隐藏加载动画

myChart.showLoading({
        text: 'loading', //显示的文本
        color: '#c23531', //显示转圈的圆圈颜色
        textCloor: '#000', //显示文本的颜色
        maskColor: 'rgba(255,255,255,0.8)',
        // 字体大小。从 `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'
      })

隐藏加载动画

chart.hideLoading() //隐藏加载动画

官方文档

官方文档

喜欢