用vscode编写异步加载

最新推荐文章于 2024-07-18 18:19:41 发布

啊啊啊脑子要没了

最新推荐文章于 2024-07-18 18:19:41 发布

阅读量342

点赞数 5

文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/z912631832/article/details/138164832

版权

myChart.showLoading();

这一行是在加载数据前，显示加载动画

这个就是加载数据完成后，隐藏加载动画和时间设置

设置完后如果是用谷歌打开，需要去谷歌快捷方式图表属性里的目标后添加 --allow-file-access-from-files，确定就可以了，打开谷歌，拖入网页即可

全部代码如下

<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <script type="text/javascript" src="js/echarts.js" ></script>
        <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
 
        <title></title>

    </head>
 
    <body>

 
    <div id="main" style="width: 700px;height:600px;"></div>
    <script type="text/javascript">

 
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.get("咖啡店各年订单.json",function(data){
        myChart.setOption({
        		 title: {
                     text: '咖啡年售量',
                     
                 },
                 tooltip: {
                     trigger: 'item',
                     formatter:"{a}<br/>{b}:{c}({d}%)"
                 },
                 legend: {
                     data: ['2012年','2013年', '2014年', '2015年', '2016年', '2017年'],
                     top:70
                 },
                 toolbox: {
                     show: true,
                     feature: {
                         mark: { show: true },
                         dataView: { show: true, readOnly: false },
                         magicType: { show: true, type: ['line', 'bar'] },
                         restore: { show: true },
                         saveAsImage: { show: true },
                     },
                 },
                 calculable: true,
 
            	series: [
            		{          
 					name:'咖啡年销量',
                    type:'pie',
                    radius:'66%',
                    center:['58%','55%'],
                    colockWise:true,
                    data:data.data
                }
            ]
                 	
        });
    },'json');
 
 
        setTimeout(function(){
              myChart.hideLoading();
        
        },1000)
      


    </script>
 
</body>
 
</html>

数据如下，我们需把数据复制到txt里，然后把txt后缀改成json，拖入到vscode里就行了

{
"data":[
{"value":172.9, "name":"2012年"},{"value":232.8, "name":"2013年"},
{"value":254.5, "name":"2014年"},{"value":177.8, "name":"2015年"},
{"value":206.3, "name":"2016年"},{"value":235.4, "name":"2017年"}
],
"product":["2012年", "2013年", "2014年", "2015年", "2016年", "2017年"],
"values1":[56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
"values2":[51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
"values3":[40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
"values4":[25.2, 37.1, 41.2, 18, 33.9, 49.1],
"names1":"Milk Tea",
"names2":"Matcha Latte",
"names3":"Cheese Cocoa",
"names4":"Walnut Brownie"
}