正文

“轻松上手！用ECharts轻松制作迁徙数据GIF动画教程”

/0 浏览量
1104

简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括折线图、柱状图、饼图、地图等。今天，我们将一起学习如何使用 ECharts 制作迁徙数据 GIF 动画。通过本教程，你将了解到如何准备数据、配置图表、添加动画效果，并最终导出 GIF 动画。

准备工作

在开始之前，请确保你已经安装了 Node.js 和 npm。接下来，按照以下步骤进行操作：

  1. 安装 ECharts：在命令行中运行以下命令安装 ECharts：
   npm install echarts --save
  1. 创建 HTML 文件：创建一个名为 index.html 的 HTML 文件，并添加以下内容：
   <!DOCTYPE html>
   <html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <title>ECharts</title>
       <!-- 引入 ECharts 文件 -->
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
   </head>
   <body style="height: 100%; margin: 0">
       <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
       <div id="main" style="height: 100%"></div>
       <!-- 引入 ECharts 动画扩展 -->
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/echarts-gl.min.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dataTool.min.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/map.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/china.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/bmap.min.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dataZoom.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/geo.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/ve.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/statistics.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/wordcloud.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dark.js"></script>
   </body>
   </html>

配置图表

  1. 引入 ECharts：在 HTML 文件中，我们已经引入了 ECharts 的核心库和扩展库。

  2. 初始化图表：在 HTML 文件的 <script> 标签中，添加以下代码初始化图表：

   var myChart = echarts.init(document.getElementById('main'));
  1. 配置图表选项：接下来，我们需要配置图表的选项。以下是一个迁徙数据图表的基本配置：
   var option = {
       title: {
           text: '迁徙数据',
           subtext: '示例数据',
           left: 'center'
       },
       tooltip: {
           trigger: 'item'
       },
       legend: {
           orient: 'vertical',
           left: 'left'
       },
       visualMap: {
           min: 0,
           max: 1000,
           left: 'left',
           top: 'bottom',
           text: ['高','低'],           // 文本，默认为数值文本
           calculable: true
       },
       geo: {
           map: 'china',
           roam: true,
           label: {
               emphasis: {
                   show: false
               }
           },
           itemStyle: {
               normal: {
                   areaColor: '#323c48',
                   borderColor: '#111'
               },
               emphasis: {
                   areaColor: '#2a333d'
               }
           }
       },
       series: [
           {
               name: '迁入',
               type: 'effectScatter',
               coordinateSystem: 'geo',
               data: [
                   {name: '北京', value: 100},
                   {name: '上海', value: 200},
                   // ... 其他数据
               ],
               symbolSize: function (val) {
                   return val / 10;
               },
               showEffectOn: 'render',
               rippleEffect: {
                   brushType: 'stroke'
               },
               hoverAnimation: true,
               label: {
                   normal: {
                       formatter: '{b}',
                       position: 'right',
                       show: true
                   }
               },
               zlevel: 1
           }
       ]
   };
  1. 设置动画效果：为了使迁徙数据具有动画效果，我们需要在 series 配置中添加 animation 属性。以下是一个示例：
   series: [
       {
           name: '迁入',
           type: 'effectScatter',
           coordinateSystem: 'geo',
           data: [
               {name: '北京', value: 100},
               {name: '上海', value: 200},
               // ... 其他数据
           ],
           symbolSize: function (val) {
               return val / 10;
           },
           showEffectOn: 'render',
           rippleEffect: {
               brushType: 'stroke'
           },
           hoverAnimation: true,
           label: {
               normal: {
                   formatter: '{b}',
                   position: 'right',
                   show: true
               }
           },
           zlevel: 1,
           animation: {
               duration: 1000,
               delay: function (idx) {
                   return idx * 50;
               }
           }
       }
   ]

导出 GIF 动画

  1. 使用 ECharts 动画扩展：在 HTML 文件中，我们已经引入了 ECharts 的动画扩展库。

  2. 导出动画：在 <script> 标签中，添加以下代码导出动画：

   var exportGif = function () {
       var canvas = document.createElement('canvas');
       var ctx = canvas.getContext('2d');
       var width = document.documentElement.clientWidth;
       var height = document.documentElement.clientHeight;
       canvas.width = width;
       canvas.height = height;
       var image = new Image();
       image.src = 'data:image/png;base64,' + option.toDataURL('image/png');
       image.onload = function () {
           ctx.drawImage(image, 0, 0, width, height);
           var gif = new GIF({
               workers: 2,
               quality: 10,
               workerScript: 'https://cdn.bootcdn.net/ajax/libs/gif.js/2.6.0/gif.worker.min.js'
           });
           gif.addFrame(ctx, 0, 0, width, height);
           gif.on('finished', function (gif) {
               gif.save('animation.gif');
           });
           gif.render();
       };
   };
  1. 调用导出函数：在 HTML 文件的 <button> 标签中，添加以下代码调用导出函数：
   <button onclick="exportGif()">导出 GIF 动画</button>

总结

通过本教程，你学会了如何使用 ECharts 制作迁徙数据 GIF 动画。你可以根据自己的需求修改数据、配置图表和动画效果，制作出更加精美的动画。希望本教程对你有所帮助！

-- 展开阅读全文 --