使用中继器和Echarts生成可视化图表(实现动态实时大屏范例的Python数据可视化)
本文目录：
导读：echarts是一个基于 JavaScript的开源可视化图表库，里面包含很多常用且美观的统计图表。作者就通过使用中继器，结合echart的图标代码，做出可视化图表的原型模板，一起来看一下吧。
echarts是一个基于 JavaScript的开源可视化图表库，里面包含很多常用且美观的统计图表。但是由于大部分产品经理不太懂代码，导致他们在画原型图的时候，不能直接使用该工具，就算会代码，使用起来也不太方便。所以作者就通过使用中继器，结合echart的图标代码，做出可视化图表的原型模板，用户使用该模板时只需在中继器表格中填入数据，就能够自动生成echart图表，且实现高保真的交互效果。下面，我会通过饼图的案例作为教程，具体效果如下：
原型地址：https://gb6zh9.axshare.com/#g=1
一、思路讲解制作的原理是通过js调用echart的图表，然后在通过中继器修改替换对应的文字，实现以后再次使用时，仅需要在中继器表格中修改数据自动生成图表的效果。
首先我们要观察一下echart饼图的代码
上图左边是代码，右边是代码实现的效果，左边红色方框内的就是数据内容，也就是我们需要用中继器替换的文本。
其他的效果，例如有标有没有tooltrip、legend等可以自己设置，也可以默认不改变
二、所需材料1、中继器中继器只用于记录数据和逻辑交互，并不用于显示所以我们可以把中继器内部自带的矩形删除，或者隐藏中继器。
中继器表格设置：只需要两列xAxis（项目）和yAxis（项目对应的具体数据），如下图所示填写，实际使用时根据实际数据填写，自由增加或删除行都可以。
2、矩形我们设置一个矩形命名为code，后续会将代码导入到矩形内，同时该矩形也是用于显示图表，可以调整该矩形的大小来控制图表的大小。
3、文本标签默认隐藏，默认值为空值，只用于记录中继器数据
三、交互制作1、中继器每项加载时因为中继器的数据是一行一行加载的，所以我们要通过设置文本的交互，将所有数据记录在文本标签里面。我们想观察代码中红框的文本： {value: 1048,name: ‘搜索引擎’}
Item.yAxis：具体的数据，我们替换掉1048,
Item.xAxis:项目名称，我们替换掉搜索引擎
target.text：保留前面的数据
这样我们就把数据存入到文本标签里面了。
2、矩形载入时这里我们通过js让矩形变成echart的载体，具体有以下的交互
等待：我们需要等待中继器每项加载完成之后才能执行交互，这里等来0.01秒即可。
打开链接：在当前窗口链接到URL或者文件路径，在里面输入一下代码，总共有3段代码，第一三端代码是调用echart的代码。
第一段代码如下图所示：
script.src这个是js的地址，这里要展开介绍一下，如果可以连接外网的话，直接在echarts的官网找一下在线的js地址替换掉，这样就可以直接在预览的时候看到图表，使用也是非常方便。如果不能连接外网的话，就要在echarts的官网里下载js文本，将文件“echarts.min.js”放在axure的DefaultSettings\Prototype_Files\resources\scripts目录下，这样生成html的时候，也可以直接统计图表。这里需要注意的是，因为axure在预览时是没有办法读取本地文件，所以js本地化的话是没有办法在预览中看到，所以如果能链接外网的话，还是用外网的js地址比较方便。
第二段代码如下图所示：
这里的上面的代码其实就是在echart复制过来的，你们可以看回思路讲解里面的图，里面红色框的数据，我们用变量[[LVAR1]]代替，LVAR1就是通过中继器保存起来的文本标签的值。所以后续我们就可以直接修改中继器表格，实现自动生成图表。
第三段代码如下图所示：
第一段代码和第三段代码是保持不变的。我们其实只需要修改中继器的代码就可以了。
柱状图、条形图、环形图、玫瑰图、雷达图、k线图、漏斗图等echarts基础图表都可以用这套代码，制作思路都是一致的，用中继器替换第二段代买里面的值。这样做出来的模板，就算是完全不懂代码的小白都可以直接使用，而且复用性很强哦。
那以上就是本期的全部内容了，感谢您的阅读，我们下期见，88~~~
本文由 @做产品但不是经理 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
数据可视化：基于 Echarts Python 实现的动态实时大屏范例「七」
近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【用户行为 数据可视化大屏】。
话不多说，开始分享干货，欢迎讨论！
❤️效果展示❤️1、动态效果图2、实时分片数据图3、丰富的主题样式
为了满足不同用户的审美需求，本案例实现了多个主题样式：
一、 确定需求方案1、确定产品上线部署的屏幕LED分辨率1280px*768px，F11全屏后占满整屏且无滚动条；其它分辨率屏幕均可自适应显示。
2、功能模块根据市场上同类产品数据分析的 关键指标，本案例实现的功能模块如下：
- 年龄分布
- 性别占比
- 地域分布
- 终端系统分布
- 机型价格分布
- 访问来源分布
- 产品印象
- B/S版： 可以流畅地运行在 PC （Windows系统，Linux及各衍生系统）和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）；
- C/S版： 整个项目仅一个可执行文件，超简单的方式，没有之一。
- 前端基于Echarts开源库设计，使用WebStorm编辑器；
- 后端基于Python Web实现，使用Pycharm编辑器；
- 数据传输格式：JSON；
- 数据源类型：支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，还可以定制HTTP API接口方式或其它类型数据库。
- 数据更新方式：摒弃了前端页面定时拉取的方式（这种方式带来严重的资源浪费），采用后端数据实时更新，实时推送到前端展示；
<html><head> <title>数据可视化大屏解决方案</title> <meta charset=&34;> <meta name=&34; content=&34;> <meta http-equiv=&34; content=&34;> <style type=&34;> </style></head><link rel=&34; type=&34; href=&34;><link rel=&34; href=&34;><link rel=&34; href=&34;><script src=&34;></script><script src=&34;></script><script src=&34;></script><body style=&050e27&34;container_fluid&34;row_fluid&34;vue_app&34;padding:0 0&34;col-xs-12 col-md-12&34;height:4%;&34;container_h&34;padding:0 0&34;col-xs-12 col-md-3&34;height:29%;padding:0 0&34;col-xs-12 col-md-12&34;height:100%;padding:5% 5% 5% 5%;&34;container_0&34;padding:0 0&34;col-xs-12 col-md-12&34;height:29%;padding:0 0&34;col-xs-12 col-md-12&34;height:100%;padding:5% 5% 5% 5%;&34;container_1&34;padding:0 0&34;col-xs-12 col-md-12&34;height:29%;padding:0 0&34;col-xs-12 col-md-12&34;height:100%;padding:5% 5% 5% 5%;&34;container_2&34;padding:0 0&34;col-xs-12 col-md-6&34;height:87%;padding:0 0&34;col-xs-12 col-md-12&34;height:100%;padding: 2% 2% 2% 2%&34;container_3&34;padding:0 0&34;col-xs-12 col-md-3&34;height:29%;padding:0 0&34;col-xs-12 col-md-12&34;height:100%;padding:5% 5% 5% 5%;&34;container_4&34;padding:0 0&34;col-xs-12 col-md-12&34;height:29%;padding:0 0&34;col-xs-12 col-md-12&34;height:100%;padding:5% 5% 5% 5%;&34;container_5&34;padding:0 0&34;col-xs-12 col-md-12&34;height:29%;padding:0 0&34;col-xs-12 col-md-12&34;height:100%;padding:5% 5% 5% 5%;&34;container_6&34;container_0&34;年龄分布&34;left&34;34;, fontSize: &34;, }, }, ], tooltip: { trigger: &34;, formatter: &34;, position: function (p) { //其中p为当前鼠标的位置 return [p[0] 10, p[1] - 10]; }, }, legend: { top: &34;, itemWidth: 10, itemHeight: 10, // data: [], textStyle: { color: &34;, fontSize: &34;, }, }, series: [ { name: &34;, type: &34;, center: [&34;, &34;], radius: [&34;, &34;], // color: [&065aab&39;39;, &0682ab&39;39;, &06a0ab&39;39;, &06c8ab&39;39;, &06f0ab&39;0岁以下&39;20-29岁&39;30-39岁&39;40-49岁&39;50岁以上&34;resize&34;json/echart_0.json& -*- coding:utf-8 -*-import ioimport osimport sysimport urllibimport jsonfrom http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServerip = &34; 监听端口，配置项index_url = &34; %(ip, port) 34;HTTP/1.0&34;PSHS/0.1&34;Python/3.7.x&34;./& 监听目录，配置项 def do_GET(self): if self.path.find(&34;) > 0: print(self.path) req = {&34;: &34;} self.send_response(200) self.send_header(&34;, &34;) self.end_headers() with open(self.path, &39;, encoding=&34;) as f: data = json.load(f) rspstr = json.dumps(data) self.wfile.write(rspstr.encode(&34;)) else: SimpleHTTPRequestHandler.do_GET(self); def do_POST(self): if self.path == &34;: print(&34;) else: print(&34;) data = self.rfile.read(int(self.headers[&34;])) data = json.loads(data) self.send_response(200) self.send_header(&34;, &34;) self.end_headers() rspstr = &34; rspstr = json.dumps(data, ensure_ascii=False) self.wfile.write(rspstr.encode(&34;))def HttpServer(): try: server = HTTPServer((ip, port), MyRequestHandler) listen = &34; %(ip, port) print(&34;, listen) server.serve_forever() except ValueError as e: print(&34;, e) server.socket.close()if __name__ == &34;: HttpServer()❤️ 源码下载（包含HTTP服务 JSON数据 Echart图表）
本次分享结束，欢迎讨论
GitHub精选 | 基于JS的大屏数据可视化项目集合
《GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于JS写的大屏数据可视化项目。
项目介绍：
该项目主要把复杂抽象的数据，通过视图的方式展现出来，用户可以形象直观的看到数据包含的信息和规律。具体可以使用在信息展示，数据分析与管理，数据排版和分类等生活的方方面面。
项目展示：
旭日图 - 基于ECharts V4.2
旭日图（Sunburst）是ECharts 4.0新增的图表类型，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。
树图 - 基于ECharts V4.2
树图是一种流行的利用包含关系表达层次化数据的可视化方法。
地图数据可视化 - 基于ECharts Geo
地图热点、飞线动效，世界地图、中国地图、省份地图、城市地图、区县地图
3D图表展示 - 基于ECharts GL
3D柱形图，3D地球，二维数据的3D化展示
热力图展示 - 基于ECharts & 地图
基于地图的热力图，基于笛卡尔坐标系的热力图
ECharts扩展示例
词云，水球图，烟花秀，关系图谱，中国地图
具体案例
_ 全国主要城市空气质量分布_
_ 上市公司概览_
_ 树状图_
_ 3D图表_
_ 大屏数据模板_
研究表明人眼通过视觉和图像比文本和数字更容易吸收和掌握信息，通过数据可视化，业务组织可以提高他们在需要时查找所需信息的能力，并且比其他公司更高效地完成这些工作，它使用户能够更有效地查看在操作条件和业务性能之间发生的连接，还可以更快地掌握跨多个数据集的客户行为和市场条件的变化，值得尝试。
GITHUB：https://github.com/yyhsong/iDataV
