基于Flask的Echarts图表展示

Flask 小而灵活的Python Web开发神器，半小时即可入门。

ECharts 使用 JavaScript 编写的开源可视化库，涵盖各行业图表，满足各种需求，重点是开源免费。

Flask+Echarts 人见人爱，花见花开

一、先来个案例安利一下

1、项目目录结构

在这里插入图片描述

2、demo.py 实现

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("echarts_demo.html")

if __name__ == '__main__':
    app.run(debug=True)

3、echarts_demo.html实现

以下内容只需要了解格式，拷贝官网实现就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts-Demo</title>
    <script src="/static/echarts.js"></script>
</head>
<body>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

</body>
</body>
</html>

从上述案例中可以看出来Echart实现主要在echarts_demo.html文件中

需要以下几个流程

a、引入echarts.js

 <script src="/static/echarts.js"></script>

b、创建图标绘制元素，本案例中绘制在

<div id="main" style="width: 600px;height:400px;"></div>

c、初始化图表实例

var myChart = echarts.init(document.getElementById('main'));

d、为图表添加配置与数据

var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            ...
        };

f、绘制图表

myChart.setOption(option);

来看看效果
在这里插入图片描述

通过以上Demo实现一个基本效果没问题了，是时候来研究一下ECharts相关概念了

二、相关概念

echarts 实例

a、一个网页中可以创建多个 echarts 实例

b、每个 echarts 实例独占一个 DOM 节点。

系列（series）
a、系列（series）是指：一组数值以及他们映射成的图。

b、一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）…

组件（component）
在系列之上，echarts 中各种内容，被抽象为“组件”。

例如，echarts 中至少有这些组件：

xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、…

用 option 描述图表
echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：

有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。

简而言之，option 表述了：

数据、数据如何映射成图形、交互行为。

当然啦，对于这些概念相关最好结合案例验证下

三、来一波案例效果

只需要结合官方案例效果+自己数据即可实现特定需求
在这里插入图片描述