qt可视化数据展板_数据可视化：基于 Echarts + Python 实现的动态实时大屏范例一...

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

话不多说，开始分享干货，欢迎讨论！QQ和微信号相同 6550523

首先看动态效果图 ：

再看实时分片数据图：

一、 确定需求方案

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

1920px*1080px，F11全屏后占满整屏且无滚动条。其它分辨率也可自适应。

2、功能模块

用户访问来源分析(饼图):包括搜索引擎，联盟广告，直接访问

访问地区分布(柱状图 + 地图 + 热力图)：浙江、上海、广东、北京

年龄分布(饼图)：0岁以上、20-29岁、30-39岁、40-49岁、50岁以上

职业分布(饼图)：电子商务、教育、IT/互联网、金融、学生、其他

兴趣分布(饼图)：汽车、旅游、财经、教育、软件、其他

终端设备分布(线图)：Android + iOS移动端设备使用量

频道访问量Top5(柱状图)：实时显示最新Top5频道

点赞量Top5(饼图):实时显示最新Top5地区

3、部署方式

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

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

二、整体架构设计

前端基于Echarts开源库设计，使用WebStorm编辑器；

后端基于Python Web实现，使用Pycharm编辑器；

数据传输格式：JSON；

数据源类型：目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，还可以定制HTTP API接口方式或其它类型数据库。

数据更新方式：摒弃了前端页面定时拉取的方式(这种方式带来严重的资源浪费)，采用后端数据实时更新，实时推送到前端展示；

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

前端html代码：

index

页面加载中...

大数据可视化展板 —— 互联网企业数据分析

用户访问来源

访问地区分布

12581189

3912410

总阅读量(pv)

总收益

终端设备分布

频道访问量Top5

点赞量Top5

前端js代码：

var echarts_series_data = [

{value: 335, name: '直接访问'},

{value: 310, name: '邮件营销'},

{value: 234, name: '联盟广告'},

];

$(function() {

echarts_1();

echarts_2();

echarts_4();

echarts_31();

echarts_32();

echarts_33();

echarts_5();

echarts_6();

function echarts_1() {

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

option = {

title: {

// text: '某站点用户访问来源',

// subtext: '纯属虚构',

left: 'center'

},

tooltip: {

trigger: 'item',

formatter: '{a}

{b} : {c} ({d}%)'

},

legend: {

// orient: 'vertical',

left: 'left',

// data: echarts_data

},

series: [

{

name: '访问来源',

type: 'pie',

radius: '55%',

center: ['50%', '60%'],

data: echarts_series_data,

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

window.addEventListener("resize", function () {

myChart.resize();

});

}

function echarts_2() {

// 基于准备好的dom，初始化echarts实例

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

var echarts_data = ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'];

var echarts_series_data = [1500, 1200, 600, 200, 300, 300, 900];

option = {

// backgroundColor: '#00265f',

tooltip: {

trigger: 'axis',

axisPointer: { type: 'shadow'}

},

grid: {

left: '0%',

top:'10px',

right: '0%',

bottom: '4%',

containLabel: true

},

xAxis: [{

type: 'category',

data: echarts_data,

axisLine: {

show: true,

lineStyle: {

color: "rgba(255,255,255,.1)",

width: 1,

type: "solid"

},

},

axisTick: {

show: false,

},

axisLabel: {

interval: 0,

// rotate:50,

show: true,

splitNumber: 15,

textStyle: {

color: "rgba(255,255,255,.6)",

fontSize: '12',

},

},

}],

yAxis: [{

type: 'value',

axisLabel: {

//formatter: '{value} %'

show:true,

textStyle: {

color: "rgba(255,255,255,.6)",

fontSize: '12',

},

},

axisTick: {

show: false,

},

axisLine: {

show: true,

lineStyle: {

color: "rgba(255,255,255,.1)",

width: 1,

type: "solid"

},

},

splitLine: {

lineStyle: {

color: "rgba(255,255,255,.1)",

}

}

}],

<