数据可视化——使用echars图表展示

目录

1、前言

2、解决方案

2.1、echars（前端等组件库）

2.2、PPT等其他软件工具

2.3、使用flourish等在线数据可视化制作平台

2.4、自己用代码实现

---

1、前言

• 有一个小作业，需要自己收集一组数据，然后进行数据可视化，并且对数据进行分析
• 对此，有多种解决方案，纠结一会后，最终我选择echars！
• 毕竟对我来说，echars快捷简单，并且还可以动！🚀泰裤辣！！！

 

2、解决方案

2.1、echars（前端等组件库）

效果图

 代码分享：

数据可视化作业.zip - 蓝奏云文件大小：629.1 K|https://wwwf.lanzout.com/i8c100xy3yni

2.2、PPT等其他软件工具

 可以做，但是没必要，而且要做一个数据大屏，还是挺浪费时间的！

2.3、使用flourish等在线数据可视化制作平台

 软考备考记录_哔哩哔哩_bilibili竞赛题在线制作网站：https://app.flourish.studio（真好用！还可以用来水个作业bushi）本视频在线预览：https://public.flourish.studio/visualisation/13931917/ ps:准备使用Python的bar_chart_race 生成动态条形图的，但是好多数据都不兼容唉，搞了1小时都没有调整好...（大哭.jpg）, 视频播放量 209、弹幕量 0、点赞数 2、投硬币枚数 0、收藏人数 0、转发人数 3, 视频作者 电石QwQ, 作者简介 不甘寂寞，相关视频：23上半年软考泄题总结，为什么都劝穷人家孩子学计算机而不是其他专业？句句戳心！别再执迷不悟了！！！，2023软考泄题，大学期间计算机专业最值得拿的五个含金量高的证书，保研加分，面试求职快人一步！，科软学长带你划重点（408计组王道书），盲目自学计算机的惨痛教训，句句戳心，别再执迷不悟了，2023上半年中级软件设计师下午估分(转载至我神zst_2001的答案)，我摊牌了，我就是这样上岸了，6个月备考公务员，附计划表，443分第一上岸南大：政治经验分享&备考心得，【全364集】赶紧安排上！火遍B站的【网络工程师】大佬带你恶补网工入门到进阶必学课程，收藏起来慢慢学！网工入门_华为认证_HCIA_HCIP_网工学习路线https://www.bilibili.com/video/BV1Xz4y1i7T3

 效果挺好

2.4、自己用代码实现

比较麻烦（数据容易不匹配）

import pandas as pd
import matplotlib.pyplot as plt
import os
import imageio
 
# 读取 Excel 文件
df = pd.read_excel('schedule.xlsx')
 
# 提取耗时数据列
columns = ['睡觉', '吃饭', '娱乐', '学习英语', '准备软考']
values = df[columns].values
 
# 创建竞赛动态条形图的每一帧
frames = []
for i in range(len(df)):
    # 创建 Matplotlib Figure 对象
    fig, ax = plt.subplots(figsize=(6, 3.5))
 
    # 绘制当前行的数据
    bar = ax.bar(columns, values[i], color=['gray', 'red', 'blue', 'green', 'orange'])
 
    # 在每一个条形上添加文字标签
    for rect in bar:
        height = rect.get_height()
        ax.annotate(f'{height:.1f}', xy=(rect.get_x() + rect.get_width() / 2, height), xytext=(0, 3),
                    textcoords='offset points', ha='center', va='bottom', fontsize=8)
 
    # 隐藏 X 轴的标签和刻度线
    ax.set_xticklabels([])
    ax.tick_params(axis='x', length=0)
 
    # 设置 Y 轴的范围
    ax.set_ylim(0, 10)
    ax.set_ylabel('Time (h)')
 
    # 设置图表的标题
    date = pd.Timestamp(df.loc[i, '日期']).strftime('%Y-%m-%d')
    ax.set_title(f'Daily Schedule: {date}')
 
    # 将当前帧转换为 PIL Image 对象
    fig.tight_layout()
    fig.canvas.draw()
    pil_image = plt.gcf().canvas.buffer_rgba()
 
    # 将 PIL Image 对象添加到帧列表中
    frames.append(pil_image)
 
    # 清空 Matplotlib Figure 对象以便下一次使用
    plt.cla()
 
# 使用 imageio 库将帧列表保存为 GIF 动态图
imageio.mimsave('schedule.gif', frames, 'GIF', duration=0.5)
 
# 删除生成的临时 PNG 文件
os.system('del temp_*.png')

好看的echars——雷达图

option = {
  backgroundColor: '#000',
  radar: {
    center: ['50%', '50%'],
    radius: '85%',
    name: {
      textStyle: {
        color: '#fff',
        fontSize: 12,
        fontFamily: 'PingFangSC-Regular, PingFang SC;',
        // fontWeight: "500",
      },
    },
    axisLine: {
      lineStyle: {
        color: '#013A3F',
      },
    },
    indicator: [
      { name: '资产负债率', max: 6500 },
      { name: '利息保障倍数', max: 6000 },
      { name: '长期负债比率', max: 30000 },
      { name: '现金流量比率', max: 38000 },
      { name: '现金比率', max: 52000 },
      { name: '速动比率', max: 52000 },
      { name: '流动比率', max: 52000 },
      { name: '产权比率', max: 52000 },
    ],
    splitArea: {
      show: false,
      areaStyle: {
        color: 'rgba(255,0,0,0)',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: '#01424C',
      },
    },
  },
  series: [
    {
      name: '成绩单',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000, 50000, 18000],
          symbol: 'none',
          areaStyle: { color: 'rgba(71,237,252,.3)' },
          lineStyle: {
            color: '#47EDFC',
            width: 1,
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            },
          },
        },
        
      ],
      //流动光效配置
      effect: true,
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke',
        scale: 2.5,
      },
      //提示框配置
      tooltip: {
        trigger: 'item',
      },
    },
    {
        type: 'graphic',
        // 设定层级
        zlevel: 1000,
        elements: [{
            type: 'circle',
            shape: {
                r: 20
            },
            style: {
                fill: '#fff',
                stroke: '#47EDFC',
                lineWidth: 3
            },
            position: ['50%', '50%'],
            // 表示图案从 0 到 1 循环播放
            // duration 指定了每次循环所需时间
            // delay 表示初始化时需要等待的时间，由于要在雷达图基础上添加效果，可以适当调高延迟时长
            // repeatDelay 表示每次播放完成后需要等待的时间
            // repeat 表示动效需要播放的次数，0 表示无限循环
            // easing 表示动效缓动函数，linear 就是线性变化，无需使用其他函数
            // scale 表示动效所需的缩放数值，表示图案从 0 到 scale 缩放
            // opacity 表示图形不透明度变化，表示图案从 0 到 opacity 的不透明度变化
            // 如果 scale 与 opacity 都为 0，则意味着这个动效的展示方式是完全消失，这里 scale 设定为 1，opacity 设定为 0.8
            // 然后将 duration 设定为一个适中的值，这里就设定为 2000ms，每次循环完成后需要延迟 1000ms
            // 最后在 graphic 组件的元素中加入 text，设置好显示的 text，如果不需要只需要删去即可
            // 需要注意：由于我们让整个 graphic 组件的 zlevel 设定为 1000，因此 text 显示在页面最顶层上。
            animation: 'scale',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            duration: 2000,
            delay: 2000,
            repeatDelay: 1000,
            repeat: 0,
            easing: 'linear',
            scale: 1,
            opacity: 0.8,
            style: {
                text: 'Hello World!',
                textAlign: 'center',
                textVerticalAlign: 'middle',
                textFont: 'bold 30px Microsoft YaHei',
                fill: '#47EDFC',
            }
        }]
    }
  ],
 
};