利用Sanic框架实现Python + echarts 数据可视化展现(一)

bigegpt 2025-01-20 10:57 3 浏览

Python是数据分析的利器，近年来在各领域应用的十分广泛。有时候我们会需要把数据分析的结界进行一些可视化的展示,很多时候一般的数据可视化可以使用Matplotlib等，但是如果是面向一些非专业人士，直接通过Web的方式进行展示会更加的方便和优美。

先看一下基本效果，虽然比较简陋，差不多该有的都有了，需要更漂亮的页面，可以在自己美化一下。

关于工具和框架的选择

为什么选择Sanic？

Python可用的Web框架选择性很多，比如大而全的Django，小而美的Flask等；此处选择了Sanic框架，主要是因为其轻量化和快速的特点；另外还有一个更重要的特点，就是Sanic自身就是一个可应用于生产环境的Web服务应用，不需要其他Nginx、或者Apache等其他工具去部署。（对于不熟悉Web环境的人来说，这些应用部署花费的精力还是挺高的）

为什么选择Echarts？

这主要是因为之前使用的多了，比较熟悉，而且有非常完善的中文文档，使用也比较方便。

为什么没有使用Pyecharts？

Pyecharts功能挺强大，使用也挺方便，如果简易环境下可以选择使用。当然，不喜欢使用JS、CSS和HTML的也建议选择使用。个人没选择主要还是考虑后续的部署展示，所以还是一步到位，直接应用 Sanic + Echarts 。另外，Echarts的使用和配置确实比较简单。

开始之前，建议先打开Sanic文档和Echarts文档，随时查看需要的信息。

准备开始第一步

1、可以先新建一个虚拟环境；（当然这并不是必须的）

2、安装Sanic；

# 直接安装
pip install sanic

# 安装sanic_jinja2，用于html模板的应用
pip install sanic_jinja2

3、新建一个py文件，一个html文件，一个js文件；

py文件最精简内容：

import os, time, datetime

from sanic import Sanic

app = Sanic("MyEcharts")

@app.get("/sync")
def sync_handler(request):
    time.sleep(3)
    return text("sync Done. 完成")

@app.get("/async")
async def async_handler(request):
    await asyncio.sleep(0.1)
    return text("async+async+async+Done. 完成！")

if __name__ == '__main__':

    app.run(host="0.0.0.0", port=8080)

直接运行这个文件就已经可以建立一个web服务了！当然这距离我们的项目还有点距离。

此时，在浏览器输入http://127.0.0.1:8080/sync，就能看见我们的运行结果了；

html文件精简内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>XXXX数据概览</title>
		
	</head>
	<body>
		<div class="container-fluid">
		<!-- Content here -->
		    <div class="row text-center" id="title">
				<h1>XXXX系统数据展示</h1>				
			</div>
			<div class="row">
				<div class="col">
					<i>数据A展示一 | 数据二
						<p style="font-size: 52px;color: rgba(0, 59, 144, 1.0);">
							1258 <small style="color: #000;">|</small> 376
						</p>
					</i>
				</div>
				<div class="col">
					<i>数据B展示一 | 数据二
						<p style="font-size: 52px;color: rgba(0, 59, 144, 1.0);">
							5896 <small style="color: #000;">|</small> 998
						</p> 
					</i>
				</div>
				<div class="col">
					<i>数据C展示一 | 数据二
						<p style="font-size: 52px;color: rgba(0, 59, 144, 1.0);">
							4896 <small style="color: #000;">|</small> 1199
						</p> 
					</i>
				</div>
				<div class="col col-md-auto">
					<i>总数 | 待通知数 | 待接收数 | 已接收数
						<p style="font-size: 52px;color: rgba(0, 59, 144, 1.0);">
							9258 <small style="color: #000;">|</small> 
							1385 <small style="color: #000;">|</small> 
							2459 <small style="color: #000;">|</small> 
							2546
						</p>
					</i>
				</div>
			</div>
			<div class="row">
				<div class="col" style="color: #FF0000; border: 1px solid #000;">
					<h2>表一数据信息</h2>

					<p>1 of 2</p>
				</div>
				<div class="col" style="color: #00FF00;">
					<h2>XXXX状态数据信息</h2>

					2 of 2
				</div>
				<div class="col">
					<h2>XXXX数据信息</h2>

					1 of 3
				</div>
			</div>
			<div class="row">
				<div class="col col-9">
					<h2>XXXX数据信息</h2>

				</div>
				<div class="col col-3">
					<h2>XXXX数据信息</h2>

				</div>
			
		</div>

	</body>
</html>

这个基本就是一个简单的web页面了，虽然很简陋，装修的事情后面在处理。

基本看起来是这种样子

至于具体的页面排版，可以按自己的需求去修改。

js文件基本内容：（内容源自官方示例）

var chartDom01 = document.getElementById('chart01');
var myChart01 = echarts.init(chartDom01);
var option01;

option01 = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};

option01 && myChart01.setOption(option01);

var chartDom02 = document.getElementById('chart02');
var myChart02 = echarts.init(chartDom02);
var option02;

option02 = {
  title: {
    text: 'Waterfall Chart',
    subtext: 'Living Expenses in Shenzhen'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      var tar = params[1];
      return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: [0, 1700, 1400, 1200, 300, 0]
    },
    {
      name: 'Life Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'inside'
      },
      data: [2900, 1200, 300, 200, 900, 300]
    }
  ]
};

option02 && myChart02.setOption(option02);
/ / 其他内容都是类似的…………

js、css和html结合后的效果：

此处先到这里，后续内容会抽时间在陆续补上，目前能想到的需要补充内容包括（不限于）：

Sanic模板的应用；
Sanic部分设置内容；
Python处理的数据传递到Echarts的方法；
Echarts图表部分设置内容；

第一次在头条写文章，有不足之处还请见谅；学习道路上的小学生，如有错误或疏漏之处，还请大家批评指正。

echarts自定义tooltip

上一篇：【开源资讯】ECharts 发布第 100 个版本 4.7.0
下一篇：c盘满了，这些大文件可以删除?

利用Sanic框架实现Python + echarts 数据可视化展现(一)

关于工具和框架的选择

准备开始第一步

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

Laravel框架使用图片处理简单教程

PHP 远程调试最佳实践