ECharts异步加载动画

最新推荐文章于 2024-05-15 17:13:36 发布

木可子x

最新推荐文章于 2024-05-15 17:13:36 发布

阅读量294

点赞数 7

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/2301_81685623/article/details/138199635

版权

关键代码

    fetch('data01.json')  //文件夹地址，不使用全局地址
            .then(response => response.json()) // 解析为JSON  
            .then(data => {  
                var seriesData = data.map(item => ({  
                    value: item.rate, // rate属性表示录取率  
                    name: item.year //year属性表示年份  
                }));  
                // 更新选项以包含数据 
                $('#selection').change(function() {  
            var themeName = $(this).val();  
             })  
                option1.series[0].data = seriesData;  
  })

案例完整代码1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>w3cschool (www.w3cschool.cn) </title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    function fetchData(cb) {
      // 通过 setTimeout 模拟异步加载
      setTimeout(function () {
        cb({
          categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          data: [5, 20, 36, 10, 10, 20]
        });
      }, 3000);
    }
    // 初始 option
    option = {
      title: {
        text: '异步数据加载示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: []
      }]
    };
    myChart.showLoading();
    myChart.setOption(option);
    fetchData(function (data) {
      myChart.hideLoading();
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          // 根据名字对应到相应的系列
          name: '销量',
          data: data.data
        }]
      });
    });
  </script>
</body>
</html>

实现

案例完整代码2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个DOM容器 -->
    <div id="myecharts" style="width: 800px;height: 400px;border: 2px solid;"></div>
    <script>
        var base = +new Date(2024,4,21);
        // 一天多少毫秒
        var oneDay = 24 * 3600 * 1000;
        var date = [];
        
        // 随机生成数据
        var data = [Math.random() * 150];
        var now = new Date(base)
 
        function addData(flag){
            // 字符串拼接
            now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join("/");
            date.push(now);
            data.push((Math.random() - 0.4) * 10 + data[data.length-1]);
 
            if(flag){
                // 如果是更新状态，每次删除列表第一个数据
                date.shift();
                data.shift();
            }
            now = new Date(+new Date(now) + oneDay);
        }
 
        for(let i = 1;i < 100;i++){
            addData();
        }
 
        var option = {
            xAxis:{
                type:'category',
                boundaryGap:false,
                data:date
            },
            yAxis:{
                boundaryGap:[0,'50%'],
                type:'value'
            },
            series:[
                {
                    name:'成交',
                    type:'line',
                    smooth:true,
                    symbol:'none',
                    stack:'a',
                    areaStyle:{
                        normal:{}
                    },
                    data:data
                }
            ]
        };
 
        setInterval(function(){
            addData(true);
            myChart.setOption({
                xAxis:{
                    data:date
                },
                series:[{
                    name:'成交',
                    data:data
                }]
            });
        },500);
 
        var myChart = echarts.init(document.getElementById("myecharts"));
        myChart.setOption(option);
    </script>
</body>
</html>

实现