近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【 供应链 - 数据可视化大屏解决方案】。

话不多说，开始分享干货，欢迎讨论！

效果展示

1、首先看动态效果图

2、丰富的主题样式

一、 确定需求方案

1、确定产品上线部署的屏幕LED分辨率

1280px*768px，F11全屏后占满整屏无滚动条；其它分辨率屏幕可自适应显示。

2、功能模块

• 供应商排名：综合评价，总成交额
• 全球成交额分布
• 资产总额
• 资产负债率
• 资产营收
• 资产营收应付账款, 应收账款

3、部署方式

• 基于免安装可执行程序： 支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；

• 观看方式： 既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、360浏览器等主流浏览器。

二、整体架构设计

1. 前端基于Echarts开源库设计，使用WebStorm编辑器；
2. 后端基于Python Web实现，使用Pycharm编辑器；
3. 数据传输格式：JSON；
4. 数据源类型：目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，还可以定制HTTP API接口方式或其它类型数据库。
5. 数据更新方式：摒弃了前端页面定时拉取的方式（这种方式带来严重的资源浪费），采用后端数据实时更新，实时推送到前端展示；

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码

2、前端JS代码

模块 - 供应商排名

var idContainer_1 = "container_1";var chartDom = document.getElementById(idContainer_1);function initEchart_1() { var myChart = echarts.init(chartDom, window.gTheme); var option = { title: { text: "供应商排名", left: "center", textStyle: { color: "#00ffff", fontSize: "12", }, }, tooltip: { trigger: "item", formatter: "{a}
{b}: {c} 亿元", position: function (p) { //其中p为当前鼠标的位置 return [p[0] + 10, p[1] - 10]; }, }, legend: { data: ["成交额", "综合评价"], textStyle: { color: "rgba(255,255,255,.8)", fontSize: "10", }, top: "5%", }, grid: { left: "12%", right: "15%", bottom: "3%", // 距离顶部边框的相对距离，太近压到了legend top: "15%", containLabel: true, }, dataZoom: [ { type: "slider", yAxisIndex: 0, left: "0%", start: 70, end: 100, }, ], xAxis: [ { name: "成交额(亿元)", type: "value", min: 0, max: 5000, nameLocation:'start', nameTextStyle: { color: "#3690be", fontSize: 10, }, axisLabel: { textStyle: { color: "rgba(255,255,255,.8)", fontSize: 10, }, }, axisLine: { lineStyle: { color: "rgba(255,255,255,.2)", }, }, splitLine: { lineStyle: { color: "rgba(255,255,255,.1)", }, }, }, { name: "综合评价", type: "value", min: 0, max: 100, nameLocation:'start', nameTextStyle: { color: "#3690be", fontSize: 10, }, axisLabel: { textStyle: { color: "rgba(255,255,255,.8)", fontSize: 10, }, }, axisLine: { lineStyle: { color: "rgba(255,255,255,.2)", }, }, splitLine: { lineStyle: { color: "rgba(255,255,255,.1)", }, }, }, ], yAxis: { // name:'供应商', type: "category", data: [], axisLabel: { textStyle: { color: "rgba(255,255,255,.8)", fontSize: 10, }, }, axisLine: { lineStyle: { color: "rgba(255,255,255,.2)", }, }, splitLine: { lineStyle: { color: "rgba(255,255,255,.1)", }, }, }, series: [ { name: "成交额", type: "bar", xAxisIndex: 0, label: { show: true, }, emphasis: { focus: "series", }, data: [], }, { name: "综合评价", type: "bar", xAxisIndex: 1, label: { show: true, }, emphasis: { focus: "series", }, data: [], }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });}function asyncData_1() { $.getJSON("json/bar_horizontal.json").done(function (data) { var myChart = echarts.init(document.getElementById(idContainer_1), window.gTheme); myChart.setOption({ yAxis: { data: data["yAxis"]["data"] }, series: [{ data: data["series"][0]["data"] }, { data: data["series"][1]["data"] }], }); }); //end $.getJSON}}initEchart_1();asyncData_1();

模块 - 切换主题

var rm = document.getElementById("rightMenu");document.documentElement.oncontextmenu = function (e) { e = e || window.event; var mx = e.clientX; var my = e.clientY; var rmWidth = parseInt(rm.style.width); var pageWidth = document.documentElement.clientWidth; if (mx + rmWidth < pageWidth) { rm.style.left = mx + "px"; rm.style.top = my + "px"; } else { rm.style.right = mx + "px"; rm.style.top = my + "px"; } rm.style.display = "block"; return false;};document.documentElement.onclick = function () { rm.style.display = "none";};document.oncontextmenu = function (e) { return false;};window.onload = function () { liList = document.getElementById("rightMenu").getElementsByTagName("li"); for (i = 0; i < liList.length; i++) { liList[i].onclick = function () { // alert(this.innerHTML); var theme = this.innerHTML; var url = location.href.substring("h", location.href.indexOf("?")); urlTheme = url + "?theme=" + theme; location.replace(urlTheme); }; }};

3、后端python代码

-- coding:utf-8 --import ioimport osimport sysimport urllibimport jsonfrom http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServerip = "localhost" # 监听IP，配置项port = 8812 # 监听端口，配置项index_url = "http://%s:%d/index.html" %(ip, port) # 监听主页url，配置项class MyRequestHandler(SimpleHTTPRequestHandler): protocol_version = "HTTP/1.0" server_version = "PSHS/0.1" sys_version = "Python/3.7.x" target = "./" # 监听目录，配置项 def do_GET(self): if self.path.find("/json/") > 0: print(self.path) req = {"success": "true"} self.send_response(200) self.send_header("Content-type", "json") self.end_headers() with open(self.path, 'r', encoding="utf-8") as f: data = json.load(f) rspstr = json.dumps(data) self.wfile.write(rspstr.encode("utf-8")) else: SimpleHTTPRequestHandler.do_GET(self); def do_POST(self): if self.path == "/signin": print("postmsg recv, path right") else: print("postmsg recv, path error") data = self.rfile.read(int(self.headers["content-length"])) data = json.loads(data) self.send_response(200) self.send_header("Content-type", "text/html") self.end_headers() rspstr = "recv ok, data = " rspstr += json.dumps(data, ensure_ascii=False) self.wfile.write(rspstr.encode("utf-8"))def HttpServer(): try: server = HTTPServer((ip, port), MyRequestHandler) listen = "http://%s:%d" %(ip, port) print("服务器监听地址： ", listen) server.serve_forever() except ValueError as e: print("Exception", e) server.socket.close()if name == "main": HttpServer()

xxxxxxxxxxbr # -- coding:utf-8 --brbrimport iobrimport osbrimport sysbrimport urllibbrimport jsonbrfrom http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServerbrbrip = "localhost" # 监听IP，配置项brport = 8812 # 监听端口，配置项brindex_url = "http://%s:%d/index.html" %(ip, port) # 监听主页url，配置项brbrclass MyRequestHandler(SimpleHTTPRequestHandler):br protocol_version = "HTTP/1.0"br server_version = "PSHS/0.1"br sys_version = "Python/3.7.x"br target = "./" # 监听目录，配置项brbr def do_GET(self):br if self.path.find("/json/") > 0:br print(self.path)br req = {"success": "true"}br self.send_response(200)br self.send_header("Content-type", "json")br self.end_headers()br with open(self.path, 'r', encoding="utf-8") as f:br data = json.load(f)br rspstr = json.dumps(data)br self.wfile.write(rspstr.encode("utf-8"))brbr else:br SimpleHTTPRequestHandler.do_GET(self);brbr def do_POST(self):br if self.path == "/signin":br print("postmsg recv, path right")br else:br print("postmsg recv, path error")br data = self.rfile.read(int(self.headers["content-length"]))br data = json.loads(data)br self.send_response(200)br self.send_header("Content-type", "text/html")br self.end_headers()br rspstr = "recv ok, data = "br rspstr += json.dumps(data, ensure_ascii=False)br self.wfile.write(rspstr.encode("utf-8"))brbrbrdef HttpServer():br try:br server = HTTPServer((ip, port), MyRequestHandler)br listen = "http://%s:%d" %(ip, port)br print("服务器监听地址： ", listen)br server.serve_forever()br except ValueError as e:br print("Exception", e)br server.socket.close()brbrif name == "main":br HttpServer()

四、上线运行