• Echarts异步数据与动画加载

    目录

    简介

    头部代码

    这段代码是使用 Echarts 绘制图表的关键部分。首先，初始化了一个 Echarts 实例。然后，通过 Ajax 请求获取数据，并基于此设置图表选项。其中包括颜色、背景色、标题、提示框、图例以及饼图的具体配置。

    具体解释如下：

    开启动画效果

    关闭动画效果并且设置时间（比例、1000：1秒）

    完整代码

    运行图片

    vscode下载插件(Live Preview)

    浏览器转圈圈不出现图表解决方法

    复制到浏览器直接打开

    简介

    在这篇博客中，我将分享如何使用 Echarts 库来绘制咖啡店各年订单的饼图。通过直观的图表展示异步数据与动画加载，可以更清晰地了解不同年份的销售情况。

    使用了echarts.js以及jquery-3.3.1.js需自行下载

    这段代码是网页的头部和主体部分，包含了必要的元标签、Echarts 和 jQuery 库的引用，以及一个用于显示图表的 div 元素。

    头部代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <script src="js/echarts.js"></script>
    7.     <script src="js/jquery-3.3.1.js"></script>
    8.     <div id="main" style="width: 600px;height: 400px;"></div>
    9.     <title>发财糕的异步数据与动画加载</title>
    10. </head>
    11. <body>

    这段代码是使用 Echarts 绘制图表的关键部分。首先，初始化了一个 Echarts 实例。然后，通过 Ajax 请求获取数据，并基于此设置图表选项。其中包括颜色、背景色、标题、提示框、图例以及饼图的具体配置。

    1. var myChart = echarts.init(document.getElementById('main'));
    2. myChart.showLoading();
    3. $.get("js/咖啡店各年订单.json",function(data){
    4.     myChart.setOption({
    5.         color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],
    6.         backgroundColor: '#d6ecf0', // 配置背景色，rgba 设置透明度 0.1
    7.         title: {
    8.             text: '咖啡店年销',
    9.             x:'center'
    10.         },
    11.         tooltip: {
    12.             trigger: 'axis',
    13.             axisPointer:{
    14.                 type:'shadow'
    15.             }
    16.         },
    17.         legend: {
    18.             height:20,
    19.             width:2,
    20.             type: 'croll',//过多类型时自适应分页显示
    21.             width:'50%',
    22.             orient: 'horizontal',//方向 horizontal 水平显示，vertical 垂直显示
    23.             bottom: 'bottom',//图片底部 left: 'top',左上， right: 'top' 右上,
    24.             icon: 'circle',
    25.             data: ['2017 年','2018 年', '2019 年', '2020 年', '2021 年', '2022 年'],
    26.         },
    27.         series: [
    28.             {          
    29.                 name:'咖啡年销量',
    30.                 type:'pie',
    31.                 radius:'66%',
    32.                 //center:['58%','55%'],
    33.                 orient: 'horizontal',
    34.                 colockWise:true,
    35.                 data:data.data
    36.             }
    37.         ]
    38.     });
    39. });
    40. setTimeout(function(){
    41.     myChart.hideLoading();
    42. },1000)
    43. </script>

    具体解释如下：

    • color：定义了饼图的颜色。
    • backgroundColor：设置背景色及其透明度。
    • title：指定图表标题和位置。
    • tooltip：确定提示框的触发方式和指针类型。
    • legend：配置图例的各项属性，如高度、宽度、显示类型、位置等。
    • series：定义饼图的名称、类型、半径、方向等，并传入数据。

    开启动画效果

    myChart.showLoading();

    关闭动画效果并且设置时间（比例、1000：1秒）

    1. setTimeout(function(){
    2.     myChart.hideLoading();
    3. },1000)

    完整代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <script src="js/echarts.js"></script>
    7.     <script src="js/jquery-3.3.1.js"></script>
    8.     <div id="main" style="width: 600px;height: 400px;"></div>
    9.     <title>发财糕的异步数据与动画加载</title>
    10. </head>
    11. <body>
    12.     <script text="text/javascript">
    13.          // 基于准备好的dom，初始化echarts实例
    14.          var myChart = echarts.init(document.getElementById('main'));
    15.          
    16.         myChart.showLoading();
    17.         $.get("js/咖啡店各年订单.json",function(data){
    18.         myChart.setOption({
    19.             color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],
    20. 				backgroundColor: '#d6ecf0', // 配置背景色，rgba设置透明度0.1
    21.         		 title: {
    22.                      text: '咖啡店年销',
    23.                      x:'center'
    24.                  },
    25.                  tooltip: {
    26.                      trigger: 'axis',
    27.                      axisPointer:{
    28.                     	 type:'shadow'
    29.                      }
    30.                  },
    31.                  legend: {
    32.                     height:20,
    33.                     width:2,
    34.                     type: 'scroll',//过多类型时自适应分页显示
    35.                     width:'50%',
    36.                     orient: 'horizontal',//方向horizontal水平显示，vertical垂直显示
    37.                     bottom: 'bottom',//图片底部 left: 'top',左上， right: 'top' 右上,
    38.                     icon: 'circle',
    39.                      data: ['2017年','2018年', '2019年', '2020年', '2021年', '2022年'],
    40.                  },
    41.                  series: [
    42.             		{          
    43.  					name:'咖啡年销量',
    44.                     type:'pie',
    45.                     radius:'66%',
    46.                     //center:['58%','55%'],
    47.                     orient: 'horizontal',
    48.                     colockWise:true,
    49.                     data:data.data
    50.                 }
    51.             ]
    52.                  	
    53.         });
    54.  	
    55.     });    
    56.         setTimeout(function(){
    57.               myChart.hideLoading();
    58.         
    59.         },1000)
    60.     </script>
    61. </body>
    62. </html>

    运行图片

    vscode下载插件(Live Preview)

    这样就可以在Vscode下实时观看运行效果了

    浏览器转圈圈不出现图表解决方法

    复制如图本地文件链接

    复制到浏览器直接打开

    通过以上步骤，我们成功地将咖啡店每年的订单数据以饼图形式展现出来，实现了数据的可视化。

    希望这篇博客能为您提供帮助！如有任何疑问或建议，欢迎随时留言。

  • 相关阅读:
    【iOS】多线程梳理
    QT中QRadioButton实现分组C++
    如何在一台服务器上同时运行搭载JDK 8, JDK 17, 和 JDK 21的项目：终极指南
    Vue项目中如何使用Vuex进行全局管理
    ⟨A⟩ = Tr(ρA) 从数学上来讲什么意思
    什么是网络智能运维？如何保障业务7x24小时在线？
    RocketMQ 入门
    最快的开源UDP传输工具：Kcptun
    Vue render 函数
    Python模块和包：sys模块、os模块和变量函数的使用
  • 原文地址：https://blog.csdn.net/zhangfafa_c/article/details/138171592