VUE设置Echarts Loading和样式

1 先引入echarts

import * as echarts from "echarts";

2 利用Echart自带的loading方法，如果是动态数据应该放在请求之前开始loading。

// 初始化
let charts = echarts.init(document.getElementById('chart'));

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

3 如果需要修改其他配置，可在showLoading方法中根据以下修改：

 // 字体大小。从 `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'

4 最后在setOption之后hideLoading.

let options = {...}

charts.setOption(options);

charts.hideLoading();

这篇好文章是转载于：学新通技术网