前言
很长一段时间没有更新了，但我不是在偷懒。这段时间一直学习前端的知识，之前也有一些小工具的输出：
- pandasUI，界面操作即可生成对应的pandas 代码
- pandas-query，方便查询 pandas 中的各种方法
这些只是我入门阶段的小目标输出。但我一直有一个非常想实现的功能—— 能够简单又灵活生成堪比 BI 软件的可视化联动报告。
现在我真的做出来了！这就是 pyvisflow，已经发布在 pip 上，以下是安装：
代码语言：javascript复制pie install pyvisflow本来取名 pyvision，可惜这个名字被别人用了
这个库的特点：
- 灵活自由的交互。所有组件的每个属性都能互相联动
- 超强大简单的联动语法。与 python 中属性赋值一样简单
- 零依赖输出。输出为一个 html 文件，用户只需要用浏览器打开即可使用，保留所有的交互效果
- 强类型标注，所有api都有充足的智能提示
接下来我就用几个简单入门例子，好好了解这些特点
一切可联动
首先，我希望制作一个这样子的页面：
很简单的2个部分，一个是一段文字，下方再来一个输入框。
看看 pyvisflow 怎么使用：
代码语言：javascript复制import pyvisflow as pvf
md=pvf.markdown('''
# pyvisflow 功能
- 制作动态交互数据报告
- 直观联动设置
- 零依赖结果
你输入的内容是：
''')
input = pvf.input()
pvf.to_html('demo1.html')
- 行1：导入，并且给一个简单的名字，方便后续使用
- 行3-11：pvf.markdonw() ，你可以使用 markdown 语法快速创建静态内容
- 行13：pvf.input() ，创建一个输入框
- 行15：pvf.to_html() ，输出结果
执行后，基目录下就会得到一个 demo1.html 文件，用浏览器即可打开(一般情况下，双击就是默认浏览器打开)，即可看到效果。
- 很明显，每次调用 pvf.xxxx 都会在页面上输出相应的物件
- 每个物件会独占一行
pyvisflow 提供了很多方便的方法让你可以调整他们的样式（宽度，背景颜色，字体等等）
"你这只是一个静态页面，我随便用一个第三方库都能做到！"
现在我们来看看 pyvisflow 基本的联动能力，我们希望文本内容中的 "你输入的内容是：" 的后面，就是 下方输入框的内容
简单修改下代码：
- 行10：在 markdown 文本中，我们使用
{{}}作为占位符，里面的text是自定义，为了在后面使用 - 行15：通过 md 对象的 set 方法，把 input.value 属性(这个属性表示输入框的输入内容)赋值给
text占位符
再次运行，现在用浏览器再次打开(如果文件名没有变化，可以在之前的基础上刷新一下浏览器即可)，效果如下：
pyvisflow 的宗旨是一切可联动！
现在我们多加一个输入框，希望 第一个输入框的内容与第二个输入框的内容同步 ：
- 行14：新增一个输入框
- 行15：输入框2 的输入内容 等于(=) 输入框1的输入内容
就这么简单！再次执行，看看效果：
轻松制作、轻松分发
我一直非常注重易用性，因此我在编写 pyvisflow 的时候总是为每个方法标注具体类型，组件的属性都是用代码自动生成，因此他们都有充足的智能提示。
还是接上面的例子再说明。
刚刚是输入框1的内容同步到输入框2，我们在平常的网页上看到的输入框，在还没有输入内容之前都有一个水印文字提示。这个叫 placeholder
那么现在我们改成同步到水印文字提示吧，如果你使用 vscode 或 pycharm 或 jupter notebook ，都能看到提示：
也看看他的效果：
这里也展示了 一切可联动 的效果。
没错，只要属性之间值有效，任何物件的任何属性都能互相绑定联动。
同时，所有的效果都是基于网页技术，是不依赖 python 的，因此你只要把输出的文件发给别人，别人有浏览器就可以看到这些联动效果
当然，你也可以从 web 服务上发布。之后我也会制作 pyvisflow-server 版本，这是一个依赖 python 的版本，同时他也能获得更加自由多变的联动效果
表格与图表
目前为止也只是小打小闹，在可视化报告里面少不了图表与表格。
我们就拿泰坦尼克号的数据作为示例，这个示例会让你看到 pyvisflow 强大的联动能力
先看看我们希望的结果页面：
- 第一行是一个标题
- 第二行有2个图表并排
- 第三行是一个表格
看看代码：
- 这些是数据处理的，不多做解析，后面的图表与表格就是用这些数据
pyvisflow 的调用：
- 行12：标题用 markdown 制作即可
- 行16：pvf.cols() 可以把一行划分出多列，这个方法会返回一个元组，元组的数量就看你传入的数字是多少。
- 行18、19：现在我们希望在左边的列放置一个图表，所以现在需要使用刚刚得到的 left 对象(他有创建物件的方法) ,通过 echart 方法，把数据传入。
- 由于 echart 图表的配置非常多，所以我提供了一些快速制作图表的方法，通过 pie.utils.use_pie() ，就可以制作饼图
- 行21、22：同理制作面积图
- 行24：pvf.dataTable()，制作表格，很简单，不多说明
执行看看效果：
- 表格自带分页(分页的配置都可以在 表格对象中的属性进行修改和联动绑定)
- 每个图表都是使用 echart 制作，本身有一些基本的动画和联动效果。
- 左边是性别生还比例饼图，右边是年龄生还人数面积图(包含所有的性别)
这种简单的联动效果，你使用 pyechart 也能做出来，这没啥好说。
接下来， 我们就用 pyvisflow ，使得 他们都能交互联动起来 。
首先，我们希望点击左边的饼图某个区域(某个性别)，右边的面积图显示对应性别的年龄面积图：
- 行25：面积图做数据过滤，使用 area.filters 方法。方法里面我们要表达
面积图的数据中的 sex 字段等于拼图 点击信息中的系列名字。 - 使用 图表对象的 data 属性，可以访问对应字段的数值
- 使用 图表对象的 clickInfo 属性，可以访问点击图表时的信息，其中 name 是系列名字。
执行一下，看看效果：
下方的表格同样可以联动：
- table 有一个 query 方法，由于 table 对象本身就表示数据，所以你可以直接使用 table['对应字段'] 访问数据
就这么简单，表达出表格的数据应该与饼图点击的性别联动，效果很好：
最后，我们发现右边面积图没有标题，我们很难看出来他要表达啥，为此我们给他的标题属性绑定：
- 这就是 pyvisflow 的神奇之处，你可以使用 python 常用的运算
最后的效果，注意右边面积图的顶部，在左边饼图点击后，就会出现标题：
最后
由于 pyvisflow 的实现机制非常简单，你可以使用普通的 python 自定义函数即可组装自己的联动物件，简单复用代码。
此外，pyvisflow 之后还有增强很多功能，比如可以让用户自己拖入 excel 表格数据，图表下钻 等等。pyvisflow 提供了灵活的机制，让你定制属于自己的联动交互数据报告，以后我会用更多的案例介绍更多的联动玩法
