Echarts饼图(荧光旋转效果)

usp1994

已于 2024-06-21 16:02:27 修改

阅读量1.5k

点赞数 38

分类专栏： echarts案例文章标签：数据分析 python 数据挖掘

于 2024-05-31 11:58:20 首次发布

本文链接：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139348480

版权

echarts案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果预览

本次实现的是一个饼图，蓝色科技背景色，星球转动效果 + 荧光显示。

GIF 2024-6-21 15-51-48

实现思路

大致实现思路：

初始化 ECharts 图表：
- 页面加载完成后，使用 echarts.init 方法初始化图表实例 myChart。
准备数据：
- 定义 trafficWay 数组，存储不同类型的请假数据，包括名称和请假天数。
定义颜色数组：
- 定义 color 数组，存储不同系列的颜色值。
生成图表数据：
- 使用循环为 data 和 data2 数组填充数据，每个数据项包含请假天数、名称和样式配置。
配置图表选项：
- 定义 option 对象，设置图表的全局配置，包括背景色、颜色、图例、系列等。
图例配置：
- 在 legend 配置中，设置了图例的位置、图标形状、文字样式等。
自定义系列渲染：
- 使用 renderItem 方法自定义系列的渲染逻辑，绘制弧线和点。
辅助函数：
- getCirlPoint 函数用于计算圆上某点的坐标，用于绘制圆上的点。
动画效果：
- draw 函数用于更新图表的 angle 变量，实现动画效果。使用 setInterval 定时调用 draw 函数。
设置图表选项：
- 调用 myChart.setOption(option) 将配置项应用到图表上。
定时刷新图表：
- 使用 setInterval 定时执行 draw 函数，刷新图表的动画效果。
样式定义：
- 在 <style> 标签中定义了 .EChartBox 类的样式，设置了图表容器的宽度和高度。

整体来看，代码实现了一个具有动画效果的图表，其中包含了多个自定义系列，用于展示不同类型的请假天数。图表的图例根据 series 中的 name 自动生成，并通过 legend 配置项进行样式设置。动画效果通过改变角度 angle 并重新设置图表选项来实现。

关键代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../reset.css">
  <style>
    .EChartBox {
      width: 800px;
      height: 600px;
    }
  </style>
</head>
<body>
  <!-- 散点图容器 -->
  <div id="ECharts" class="EChartBox"></div>
  <!-- 引入 ECharts 图表库 -->
  <script src="./echarts-5.2.0.js"></script>
  <script>
    window.onload = function () {
      // 初始化 ECharts 图表
      var myChart = echarts.init(document.getElementById('ECharts'));
      
      // 定义图表数据
      var trafficWay = [
        { name: '病假', value: 20 },
        { name: '事假', value: 1 },
        // ... 其他数据项
      ];
      
      // 定义颜色数组
      var color = ['#2A8BFD', '#BAFF7F', // ... 其他颜色值];

      // 准备图表数据
      var data = trafficWay.map(item => ({
        value: item.value,
        name: item.name,
        itemStyle: {
          normal: {
            color: color[trafficWay.indexOf(item)],
            // ... 其他样式设置
          }
        }
      }));

      // 图表配置项
      var option = {
        // ... 全局配置项
        series: [
          {
            name: '请假类型',
            type: 'pie',
            data: data,
            // ... 其他配置项
          },
          // ... 其他系列配置项
        ]
      };

      // 设置图表选项
      myChart.setOption(option);
    };
  </script>
</body>
</html>

完整代码

点我获取完整代码和依赖库

usp1994

关注

38
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts饼图(荧光旋转效果)

整体来看，代码实现了一个具有动画效果的图表，其中包含了多个自定义系列，用于展示不同类型的请假天数。本次实现的是一个饼图，蓝色科技背景色，星球转动效果 + 荧光显示。配置项进行样式设置。动画效果通过改变角度。// 初始化 ECharts 图表。并重新设置图表选项来实现。// ... 其他颜色值];// ... 其他系列配置项。// ... 其他样式设置。// ... 其他数据项。// ... 全局配置项。// ... 其他配置项。
复制链接

扫一扫