echarts 自带loading属性配置，echarts实例属性详解

echarts 自带loading属性配置

我们在使用echarts的时候，从接口获取数据到echarts实例渲染需要一些时间，但是这个时间段我们什么处理都不做的话，整体渲染看起来就不流畅，一般会采用loading加载的形式

let myChart = echarts.init(chartDom);
myChart.showLoading();  //开启loading状态 开始渲染

let option = {};
option && myChart.setOption(option);
myChart.hideLoading();  //关闭loading状态 渲染完成

myChart.showLoading() 默认显示的是 loading，官方也提供方法可以自定义loading的一些属性

// 讲loading 改为 加载中
// 设置字体大小为 16px
// 设置字体颜色为 #000 黑色
myChart.showLoading('default', { text:'加载中', fontSize: 16, textColor: '#000' })

showLoading 具体属性配置

showLoading (type?: string, opts?: Object)
type 可选，加载动画类型，目前只有一种’default’,
opts 可选，加载动画配置项，跟type有关，下面是默认配置项：

opts: {
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’
}

其余echarts实例属性参照官方
包含事件 方法 相关API

实例属性链接: https://echarts.apache.org/zh/api.html#echarts