zoukankan      html  css  js  c++  java
  • Echarts--异步数据加载和更新

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>异步数据加载和更新</title>
    </head>
    <body>
    <div id="main" style="800px;height:600px;"></div>
    <script src="jquery.min.js"></script>
    <script src="echarts.js"></script>
    <script>
    $(function(){
    myChart = echarts.init(document.querySelector('#main'));
    myChart.setOption({
    title:{
    text:'异步数据加载示例'
    },
    tooltip:{},
    legend:{
    data:['销量']
    },
    xAxis:{
    data:[]
    // data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    yAxis:{},
    series:[{
    name:'销量',
    type:'bar',
    data:[]
    // data:[12,45,32,61,24,11]/
    }]
    })
    myChart.showLoading();
    var json=[{name:'衬衫',value:12},{name:'羊毛衫',value:45},{name:'雪纺衫',value:32},{name:'裤子',value:61},{name:'高跟鞋',value:24},{name:'袜子',value:11}]
    var dataName = [];
    var dataVal = [];
    for(var i=0;i< json.length; i++){
    dataName[i] = json[i].name;
    dataVal[i] = json[i].value;
    }
    var time = setTimeout(function(){
    clearTimeout(time);
    myChart.setOption({
    xAxis:{
    data:dataName
    },
    series:[{
    name:'销量',
    data:dataVal
    }]
    })
    },3000)
    var time1 = setTimeout(function(){
    myChart.hideLoading();
    },2800)
    
    })
    
    </script>
    </body>
    </html>
  • 相关阅读:
    Mybatis简单的入门之增删改查
    循环的角度求均值
    谈谈软件设计
    秒杀多线程第四篇 一个经典的多线程同步问题
    (转)dp动态规划分类详解
    P1006 传纸条
    P1005 矩阵取数游戏
    1D1D动态规划优化
    NOI 2009A 诗人小G
    P1078 文化之旅
  • 原文地址:https://www.cnblogs.com/webBlog-gqs/p/7103910.html
Copyright © 2011-2022 走看看