计算机系统应用教程网站

网站首页 > 技术文章 正文

使用flask+echarts+html+Ajax实现数据分析可视化看板

btikc 2024-11-26 00:38:51 技术文章 31 ℃ 0 评论

下面是一个使用Flask+Echarts+HTML+Ajax实现数据分析可视化看板的程序示例代码，您可以参考一下：

数据准备

这里我们假设有一个data.csv的数据文件，内部包含各类排名信息：

type,rank,move,trend
technology,1,0,up
energy,2,1.5,down
finance,3,2,up
education,4,0.5,up
...

我们使用Pandas库读取该数据，进行数据处理和清洗：

import pandas as pd

df = pd.read_csv('data.csv')

# 将数据按类型分类，计算同类型排名平均值和平均移动距离
df_grouped = df.groupby('type').agg({'rank': 'mean', 'move': 'mean'})
df_grouped.reset_index(inplace=True)

# 将数据按趋势、上升、下降分类，计算各类别所占比例
df_counts = df.groupby('trend').size().reset_index(name='counts')

HTML页面与Ajax

在Flask程序根目录下新建templates和static文件夹，分别用于存放HTML模板和静态文件。

HTML页面

在templates文件夹下创建layout.html模板文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
  {% block head %}
  {% endblock %}
</head>
<body>
  <div id="container" style="height: 600px"></div>
  {% block scripts %}
  {% endblock %}
</body>
</html>

在模板中，我们使用了模板中的占位符{{ title }}和{% block %}。{% block %}用于占位，供后续HTML文件继承和填充；{{ title }}用于替换<title>标签中的标题。

在templates文件夹下创建index.html文件，继承自layout.html模板：

{% extends 'layout.html' %}

{% block head %}
  <!-- 引入Echarts库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
{% endblock %}

{% block scripts %}
  <script type="text/javascript">
     // 使用Ajax获取数据
     function getData() {
         $.ajax({
             url: '/data',
             type: 'GET',
             dataType: 'json',
             success: function (data) { drawCharts(data); },
             error: function (xhr, status, error) { console.log('Error: ' + error); }
         });
     }

     // 绘制图表
     function drawCharts(data) {
         var myChart = echarts.init(document.getElementById('container'));
         // 绘制柱状图
         var option_bar = {
             title: { text: 'Rank by Type' },
             legend: { data: ['Rank', 'Move'] },
             tooltip: {},
             xAxis: { data: data.types },
             yAxis: {},
             series: [
                 { name: 'Rank', type: 'bar', data: data.ranks },
                 { name: 'Move', type: 'bar', data: data.moves }
             ]
         };
         myChart.setOption(option_bar);

         // 绘制饼图
         var option_pie = {
             title: { text: 'Trend' },
             tooltip: {},
             legend: { data: data.trends },
             series: [
                 {
                     name: 'Trend',
                     type: 'pie',
                     data: data.trend_counts.map(function (ele) {
                         return { 'name': ele.trend, 'value': ele.counts };
                     }),
                     itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
                 }
             ]
         };
         myChart.setOption(option_pie);
     }

     // 页面载入时获取数据并绘制图表
     $(document).ready(function () { getData(); });
  </script>
{% endblock %}

在HTML中我们引入了Echarts库，并使用Ajax进行数据请求和处理。我们在页面载入后自动获取数据并绘制图表。

注意，这里我们使用了jQuery库，

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表