ECharts饼图动态请求数据加载效果实现

1、引入echarts

<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2、初始化echarts

<!--  定义dom，设置初始宽高-->
<div id="main" style="width: 500px; height: 500px;"></div> 

3、主要代码：

<script type="text/javascript">

    // 对echarts进行初始化
    var Chart = echarts.init(document.getElementById('main'));

    //showLoading(),显示加载样式
    Chart.showLoading();
    Chart.setOption({
      title: {
        text: '爱好数据统计饼图'
      },
      legend: {
        data: [
          {
            name: '爱好数据'
          }
        ]
      },
      series : [
        {
          name: '爱好数据',
          type: 'pie',    // 饼图
          radius: '55%',  // 饼图的半径
          data:[
            {"value":235, "name":"音乐"},
            {"value":274, "name":"电影"},
            {"value":310, "name":"篮球"},
            {"value":335, "name":"足球"},
            {"value":400, "name":"跑步"}
          ]
        }
      ]
    })
    setTimeout(()=>{
      //隐藏加载样式
      Chart.hideLoading();
    }, 2000);
  </script>

 4、运行结果：

 

2秒钟后：