echarts数据可视化(echarts数据可视化教学)-梦梦星球

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

【用户行为数据可视化大屏】

。

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

??效果展示??

1、动态效果图

2、实时分片数据图

3、丰富的主题样式

为了满足不同用户的审美需求，本案例实现了多个主题样式：

一、确定需求方案

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

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

2、功能模块

根据市场上同类产品数据分析的

关键指标

，本案例实现的功能模块如下：

年龄分布
性别占比
地域分布
终端系统分布
机型价格分布
访问来源分布
产品印象

3、部署方式：

B/S版：可以流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器；
C/S版：整个项目仅一个可执行文件，超简单的方式，没有之一。

二、整体架构设计

前端基于echarts开源库设计，使用WebStorm编辑器；
后端基于Python Web实现，使用Pycharm编辑器；
数据传输格式：JSON；
数据源类型：支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，还可以定制HTTP API接口方式或其它类型数据库。
数据更新方式：摒弃了前端页面定时拉取的方式，采用后端数据实时更新，实时推送到前端展示；

三、编码实现

1、前端html代码

<html>


<head>
      <title>数据可视化大屏解决方案</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <style type="text/css">
      </style>
</head>
<link rel="icon" type="image.png" href="/static/images/favicon.ico">
<link rel="stylesheet" href="/static/js/fun.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/echart/opt/vue.js"></script>
<script src="/static/echart/opt/dv.js"></script>
<script src="/static/js/jquery-2.2.3.min.js"></script>
<body style="background-color: #050e27">
      <div class="container_fluid">
            <div class="row_fluid" id="vue_app">
                  <div style="padding:0 0" class="col-xs-12 col-md-12">
                        <dv-decoration-1 style="height:4%;">
                        </dv-decoration-1>
                        <h3 id="container_h"></h3>
                  </div>
                  <div style="padding:0 0" class="col-xs-12 col-md-3">
                        <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_0"></div>
                        </dv-border-box-1>
                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                                    <div style="height:100%;padding:5% 5% 5% 5%;" id="container_1"></div>
                              </dv-border-box-1>
                        </div>
                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                                    <div style="height:100%;padding:5% 5% 5% 5%;" id="container_2"></div>
                              </dv-border-box-1>
                        </div>
                  </div>
                  <div style="padding:0 0" class="col-xs-12 col-md-6">
                        <dv-border-box-1 style="height:87%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding: 2% 2% 2% 2%" id="container_3"></div>
                        </dv-border-box-1>
                  </div>
                  <div style="padding:0 0" class="col-xs-12 col-md-3">
                        <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_4"></div>
                        </dv-border-box-1>
                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                                    <div style="height:100%;padding:5% 5% 5% 5%;" id="container_5"></div>
                              </dv-border-box-1>
                        </div>
                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                                    <div style="height:100%;padding:5% 5% 5% 5%;" id="container_6"></div>
                              </dv-border-box-1>
                        </div>
                  </div>
            </div>
      </div>
</body>
</html>

2、前端JS代码

var idContainer_0 = "container_0";


function initEchart_0() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(idContainer_0), gTheme);
  option = {
    title: ,
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function (p) {
        //其中p为当前鼠标的位置
        return  + 10, p - 10];
      },
    },
    legend: {
      top: "80%",
      itemWidth: 10,
      itemHeight: 10,
      // data: ,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "10",
      },
    },
    series: ,
        radius: ,
        // color: ,
        // 环形图的组成部分不显示文字
        label: { show: false },
        // labelLine: { show: false },
        // data: 
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
function asyncData_0() {
  $.getJSON("json/echart_0.json").done(function (data) {
    var myChart = echarts.init(document.getElementById(idContainer_0));
    myChart.setOption({
      series: ,
    });
  }); //end $.getJSON
}
initEchart_0();
asyncData_0();

3、后端python代码

# -*- coding:utf-8 -*-


import io
import os
import sys
import urllib
import json
from http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServer
ip = "localhost"   # 监听IP，配置项
port = 8815       # 监听端口，配置项
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))
            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()

四、上线运行

五、源码下载

?? 源码下载

【用户行为 数据可视化大屏】

关键指标

本次分享结束，欢迎讨论

【用户行为数据可视化大屏】