【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据

最新推荐文章于 2023-06-23 13:42:40 发布

YYDataV数据可视化

最新推荐文章于 2023-06-23 13:42:40 发布

阅读量7.5k

点赞数 12

分类专栏：【可视化大屏案例Python/Echarts】文章标签： echarts python 数据可视化大屏可视化大屏

本文链接：https://blog.csdn.net/lildkdkdkjf/article/details/106783264

版权

【可视化大屏案例Python/Echarts】专栏收录该内容

73 篇文章 215 订阅

订阅专栏

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

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

之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》Echarts-0基础入门--其他视频教程-编程语言-CSDN程序员研修院，希望小伙伴们多多支持。

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

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

效果展示

一、确定需求方案

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

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

2、功能模块

湖南货物收入
湖南省地图
全国地图
货物周转量
湖南高速公路
湖南省飞机场
湖南省业务量
货物周转量

3、部署方式

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

观看方式：既可在服务器上直接观看程序界面，也可在远程用浏览器打开播放，例如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代码：

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <meta content="*" http-equiv="Access-Control-Allow-Origin"/>
    <title>index</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <link href="css/comon0.css" rel="stylesheet">
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });
</script>

<body>
<!--<div class="canvas" style="opacity: .2">-->
<!--    <iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>-->
<!--</div>-->
<div class="loading">
    <div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <h1>案例 - 物流大数据服务平台</h1>
    <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>
    <script>

        var t = null;
        t = setTimeout(time, 1000);//开始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            //async_data();
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }

    </script>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 3.1rem">
                <div class="main_title"><img alt="" src="img/t_1.png">湖南货物收入</div>
                <div class="allnav" id="echart_1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.15rem">
                <div class="main_title">湖南省地图<img alt="" src="img/t_2.png"></div>
                <div class="allnav" id="echart_2"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.1rem" >

                <div class="main_title">
                    <img alt="" src="img/t_7.png">
                    湖南省交通
                </div>
                <div class="main_table t_btn8">
                    <table id="table_1">
                        <thead>
                        <tr>
                            <th>运营数(辆)</th>
                            <th>线路总长度(公里)</th>
                            <th>客运总量(万人次)</th>
                            <th>日期</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>21059</td>
                            <td>26497</td>
                            <td>184448</td>
                            <td>2018年</td>
                        </tr>
                        <tr>
                            <td>18777</td>
                            <td>21140</td>
                            <td>188808</td>
                            <td>2017年</td>
                        </tr>
                        <tr>
                            <td>15757</td>
                            <td>20225</td>
                            <td>201143</td>
                            <td>2016年</td>
                        </tr>
                        <tr>
                            <td>17458</td>
                            <td>19567</td>
                            <td>202446</td>
                            <td>2015年</td>
                        </tr>
                        <tr>
                            <td>11323</td>
                            <td>14562</td>
                            <td>279854</td>
                            <td>2014年</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div  class="boxall"  style="height: 6.5rem">
                <div class="main_title">全国地图<img alt="" src="img/t_map.png"></div>
                <div class="map4" id="echart_map" ></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall"  style="height: 3.1rem" >

                <div class="main_title" >
                    <img alt="" src="img/t_7.png">
                    湖南省业务量
                </div>
                <div class="main_table t_btn8">
                    <table id="table_2">
                        <thead>
                        <tr>
                            <th>运营数(辆)</th>
                            <th>线路总长度(公里)</th>
                            <th>客运总量(万人次)</th>
                            <th>日期</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>21059</td>
                            <td>26497</td>
                            <td>184448</td>
                            <td>2018年</td>
                        </tr>
                        <tr>
                            <td>18777</td>
                            <td>21140</td>
                            <td>188808</td>
                            <td>2017年</td>
                        </tr>
                        <tr>
                            <td>15757</td>
                            <td>20225</td>
                            <td>201143</td>
                            <td>2016年</td>
                        </tr>
                        <tr>
                            <td>17458</td>
                            <td>19567</td>
                            <td>202446</td>
                            <td>2015年</td>
                        </tr>
                        <tr>
                            <td>11323</td>
                            <td>14562</td>
                            <td>279854</td>
                            <td>2014年</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:3.1rem">
                <div class="main_title"><img alt="" src="img/t_4.png">货物周转量</div>
                <div class="allnav" id="echart_3"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.15rem">
                <div class="main_title"> <img alt="" src="img/t_5.png">湖南高速公路</div>
                <div class="allnav" id="echart_4"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.1rem">
                <div class="main_title"><img alt="" src="img/t_6.png">湖南省飞机场</div>
                <div class="allnav" id="echart_5"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<div class="back"></div>


<script src="js/area_echarts.js" type="text/javascript"></script>

<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<!--<script src="js/dataTool.js"></script>-->

<script src="js/echarts.min.js"></script>

<script src="js/index.js"></script>
<script src="js/china.js"></script>
<script src="js/hunan.js"></script>
</body>
</html>

2、前端JS代码

$(function () {
    echart_1();
    echart_2();

    echart_3();
    echart_4();

    echart_map();
    echart_5();

    //echart_1湖南货物收入
    function echart_1() {
        chart_1_data = [{
            value: 900.58,
            name: '张家口',
            itemStyle: {
                normal: {
                    color: '#f845f1'
                }
            }
        },
            {
                value: 1100.58,
                name: '承德',
                itemStyle: {
                    normal: {
                        color: '#ad46f3'
                    }
                }
            },
            {
                value: 1200.58,
                name: '衡水',
                itemStyle: {
                    normal: {
                        color: '#5045f6'
                    }
                }
            },
            {
                value: 1300.58,
                name: '邢台',
                itemStyle: {
                    normal: {
                        color: '#4777f5'
                    }
                }
            },
            {
                value: 1400.58,
                name: '邯郸',
                itemStyle: {
                    normal: {
                        color: '#44aff0'
                    }
                }
            },
            {
                value: 1500.58,
                name: '保定',
                itemStyle: {
                    normal: {
                        color: '#45dbf7'
                    }
                }
            },
            {
                value: 1500.58,
                name: '秦皇岛',
                itemStyle: {
                    normal: {
                        color: '#f6d54a'
                    }
                }
            },
            {
                value: 1600.58,
                name: '石家庄',
                itemStyle: {
                    normal: {
                        color: '#f69846'
                    }
                }
            },
            {
                value: 1800,
                name: '唐山',
                itemStyle: {
                    normal: {
                        color: '#ff4343'
                    }
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            }
        ]
        // console.log(JSON.stringify( chart_1_data ));
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart_1'));
        option = {
            //鼠标缩放和平移
            roam: true,
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}万元"
            },
            legend: {
                x: 'center',
                y: '15%',
                data: ['张家口', '承德', '衡水', '邢台', '邯郸', '保定', '秦皇岛', '石家庄', '唐山'],
                icon: 'circle',
                textStyle: {
                    color: '#fff',
                }
            },
            calculable: true,
            series: [{
                name: '',
                type: 'pie',
                //起始角度，支持范围[0, 360]
                startAngle: 0,
                //饼图的半径，数组的第一项是内半径，第二项是外半径
                radius: [41, 100.75],
                //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                center: ['50%', '40%'],
                //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 面积展现数据的百分比，半径展现数据的大小。
                //  'area' 所有扇区面积相同，仅通过半径展现数据大小
                roseType: 'area',
                //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        formatter: '{c}万元'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length2: 1,
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: chart_1_data
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //echart_2湖南省地图
    function echart_2() {
        series_data = [{
            name: '长沙市',
            value: 100
        }, {
            name: '株洲市',
            value: 96
        }, {
            name: '湘潭市',
            value: 98
        }, {
            name: '衡阳市',
            value: 80
        }, {
            name: '邵阳市',
            value: 88
        }, {
            name: '岳阳市',
            value: 79
        }, {
            name: '常德市',
            value: 77,
        }, {
            name: '张家界市',
            value: 33
        }, {
            name: '益阳市',
            value: 69,
        }, {
            name: '郴州市',
            value: 66
        }, {
            name: '永州市',
            value: 22
        }, {
            name: '娄底市',
            value: 51
        }, {
            name: '湘西土家族苗族自治州',
            value: 44
        }, {
            name: '怀化市',
            value: 9
        }];
        // console.log(JSON.stringify(data));
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart_2'));
        myChart.setOption(option = {
            //鼠标缩放和平移
            roam: true,
            // backgroundColor: '#ffffff',
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },

            visualMap: {
                show: true,
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                // realtime: true,
                calculable: true,
                // text文字颜色
                textStyle:{
                    color:'#ffffff',
                },
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [{
                type: 'map',
                mapType: 'hunan',
                zlevel: 2,
                label: {
                    show: true
                },
                data: series_data
            }]
        });

        // 使用刚指定的配置项和数据显示图表。
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    // echart_map中国地图
    function echart_map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart_map'));

        var mapName = 'china'
        var data = []
        var toolTipData = [];

        /*获取地图数据*/
        myChart.showLoading();
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        myChart.hideLoading();
        var geoCoordMap = {
            '福州': [119.4543, 25.9222],
            '长春': [125.8154, 44.2584],
            '重庆': [107.7539, 30.1904],
            '西安': [109.1162, 34.2004],
            '成都': [103.9526, 30.7617],
            '常州': [119.4543, 31.5582],
            '北京': [116.4551, 40.2539],
            '北海': [109.314, 21.6211],
            '海口': [110.3893, 19.8516],
            '长沙': [113.019455, 28.200103],
            '上海': [121.40, 31.73],
            '内蒙古': [106.82, 39.67]
        };

        var GZData = [
            [{
                name: '长沙'
            }, {
                name: '福州',
                value: 95
            }],
            [{
                name: '长沙'
            }, {
                name: '长春',
                value: 80
            }],
            [{
                name: '长沙'
            }, {
                name: '重庆',
                value: 70
            }],
            [{
                name: '长沙'
            }, {
                name: '西安',
                value: 60
            }],
            [{
                name: '长沙'
            }, {
                name: '成都',
                value: 50
            }],
            [{
                name: '长沙'
            }, {
                name: '常州',
                value: 40
            }],
            [{
                name: '长沙'
            }, {
                name: '北京',
                value: 30
            }],
            [{
                name: '长沙'
            }, {
                name: '北海',
                value: 20
            }],
            [{
                name: '长沙'
            }, {
                name: '海口',
                value: 10
            }],
            [{
                name: '长沙'
            }, {
                name: '上海',
                value: 80
            }],
            [{
                name: '长沙'
            }, {
                name: '内蒙古',
                value: 80
            }]
        ];

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord]
                    });
                }
            }
            return res;
        };

        var color = ['#c5f80e'];
        var series = [];
        [
            ['石家庄', GZData]
        ].forEach(function (item, i) {
            console.log(i, item, item[0], item[1])
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: 'arrow',
                    symbolSize: 5
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    v = {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                    return v
                })

            });

        });

        option = {
            //鼠标缩放和平移
            roam: true,
            tooltip: {
                trigger: 'item'
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(47,79,79, .1)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                }
            },
            series: series
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

    }

    //echart_3货物周转量
    function echart_3() {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart_3'));

        data =  [
            {
                name:'铁路货物',
                type:'line',
                areaStyle: {},
                data:[3961.88, 4233.63, 4183.14, 3633.01, 3704.47]
            },
            {
                name:'国家铁路货物',
                type:'line',
                areaStyle: {},
                data:[3374.76, 3364.76, 3274.76, 3371.82, 3259.87]
            },
            {
                name:'地方铁路货物',
                type:'line',
                areaStyle: {},
                data:[14.77, 15.17, 13.17, 14.56, 15.84]
            },
            {
                name:'合资铁路货物',
                type:'line',
                areaStyle: {},
                data:[686.17,847.26,895.22,865.28,886.72]
            },
            {
                name:'公路货物',
                type:'line',
                areaStyle: {},
                data:[6133.47, 6577.89, 7019.56,6821.48,7294.59]
            },
            {
                name:'水运货物',
                type:'line',
                areaStyle: {},
                data:[509.60, 862.54, 1481.77,1552.79,1333.62]
            }
        ]
        // console.log(JSON.stringify(data))
        // myChart.clear();
        option = {
            //鼠标缩放和平移
            roam: true,
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['铁路货物', '国家铁路货物', '地方铁路货物', '合资铁路货物', '公路货物', '水运货物'],
                textStyle: {
                    color: '#fff'
                },
                // top: '8%',
            },
            grid: {
                top: '40%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2012年', '2013年', '2014年', '2015年', '2016年'],
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {
                name: '亿吨公里',
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            series: data
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //湖南高速公路
    function echart_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart_4'));

        myChart.setOption({
            tooltip : {
                trigger: 'item'
            },
            series: [{
                type: 'map',
                mapType: 'hunan'
            }]
        });

        var geoCoordMap = {
            '怀化': [109.999867, 27.518949],
            '吉首': [109.741528, 28.332629],
            '张家界': [110.491722, 29.112001],
            '常德': [111.701486, 29.076683],
            '益阳': [112.348741, 28.544124],
            '岳阳': [113.126486, 29.382401],
            '长沙': [113.019455, 28.200103],
            '株洲': [113.163141, 27.8418],
            '湘潭': [112.91977, 27.882141],
            '邵阳': [111.467859, 27.21915],
            '娄底': [112.012438, 27.745506],
            '衡阳': [112.63809, 26.895225],
            '永州': [111.577632, 26.460144],
            '郴州': [113.039396, 25.81497]
        };

        var goData = [
            [{
                name: '张家界'

            }, {
                id: 1,
                name: '常德',
                value: 86
            }],
            [{
                name: '吉首'

            }, {
                id: 1,
                name: '常德',
                value: 86
            }],
            [{
                name: '常德'

            }, {
                id: 1,
                name: '益阳',
                value: 70
            }],
            [{
                name: '益阳'

            }, {
                id: 1,
                name: '长沙',
                value: 95
            }],
            [{
                name: '长沙'

            }, {
                id: 1,
                name: '岳阳',
                value: 70
            }],
            [{
                name: '长沙'

            }, {
                id: 1,
                name: '湘潭',
                value: 80
            }],
            [{
                name: '长沙'

            }, {
                id: 1,
                name: '株洲',
                value: 80
            }],
            [{
                name: '长沙'

            }, {
                id: 1,
                name: '衡阳',
                value: 80
            }],
            [{
                name: '衡阳'

            }, {
                id: 1,
                name: '郴州',
                value: 70
            }],
            [{
                name: '衡阳'

            }, {
                id: 1,
                name: '永州',
                value: 70
            }],
            [{
                name: '湘潭'

            }, {
                id: 1,
                name: '娄底',
                value: 60
            }],
            [{
                name: '娄底'

            }, {
                id: 1,
                name: '邵阳',
                value: 75
            }],
            [{
                name: '邵阳'

            }, {
                id: 1,
                name: '怀化',
                value: 75
            }],
        ];
        //值控制圆点大小
        var backData = [
            [{
                name: '常德'

            }, {
                id: 1,
                name: '张家界',
                value: 80
            }],
            [{
                name: '常德'

            }, {
                id: 1,
                name: '吉首',
                value: 66
            }],
            [{
                name: '益阳'

            }, {
                id: 1,
                name: '常德',
                value: 86
            }],
            [{
                name: '长沙'

            }, {
                id: 1,
                name: '益阳',
                value: 70
            }],
            [{
                name: '岳阳'

            }, {
                id: 1,
                name: '长沙',
                value: 95
            }],
            [{
                name: '湘潭'

            }, {
                id: 1,
                name: '长沙',
                value: 95
            }],
            [{
                name: '株洲'

            }, {
                id: 1,
                name: '长沙',
                value: 95
            }],
            [{
                name: '衡阳'

            }, {
                id: 1,
                name: '长沙',
                value: 95
            }],
            [{
                name: '郴州'

            }, {
                id: 1,
                name: '衡阳',
                value: 80
            }],
            [{
                name: '永州'

            }, {
                id: 1,
                name: '衡阳',
                value: 80
            }],
            [{
                name: '娄底'

            }, {
                id: 1,
                name: '湘潭',
                value: 80
            }],
            [{
                name: '邵阳'

            }, {
                id: 1,
                name: '娄底',
                value: 60
            }],
            [{
                name: '怀化'

            }, {
                id: 1,
                name: '邵阳',
                value: 75
            }],
        ];

        var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
        var arcAngle = function (data) {
            var j, k;
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                if (dataItem[1].id == 1) {
                    j = 0.2;
                    return j;
                } else if (dataItem[1].id == 2) {
                    k = -0.2;
                    return k;
                }
            }
        }

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (dataItem[1].id == 1) {
                    if (fromCoord && toCoord) {
                        res.push([{
                            coord: fromCoord,
                        }, {
                            coord: toCoord,
                            value: dataItem[1].value //线条颜色

                        }]);
                    }
                } else if (dataItem[1].id == 2) {
                    if (fromCoord && toCoord) {
                        res.push([{
                            coord: fromCoord,
                        }, {
                            coord: toCoord
                        }]);
                    }
                }
            }
            return res;
        };

        var color = ['#fff', '#FF1493', '#0000FF'];
        var series = [];
        [
            ['1', goData],
            ['2', backData]
        ].forEach(function (item, i) {
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 2,
                symbol: ['arrow', 'arrow'],
                //线特效配置
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.1,
                    symbol: 'arrow', //标记类型
                    symbolSize: 5
                },
                lineStyle: {
                    normal: {
                        width: 1,
                        opacity: 0.4,
                        curveness: arcAngle(item[1]), //弧线角度
                        color: '#fff'
                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 14
                        },
                        formatter: function (params) {
                            var txt = '';
                            if (params.data.speed !== undefined) {
                                txt = params.data.speed;
                            }
                            return txt;
                        },
                    }
                },
                data: convertData(item[1])
            }, {
             name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                //波纹效果
                rippleEffect: {
                    period: 2,
                    brushType: 'stroke',
                    scale: 3
                },
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                //终点形象
                symbol: 'circle',
                //圆点大小
                symbolSize: function (val) {

                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        show: true
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })

            });

        });

       
        option = {
            title: {
                text: '',
                subtext: '',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            //线颜色及飞行轨道颜色
            visualMap: {
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                textStyle:{
                    color:'#ffffff',
                },
                // realtime: true,
                calculable: true,
                color: ['green','red', 'blue']
            },
            //地图相关设置
            geo: {
                map: 'hunan',
                //视角缩放比例
                zoom: 1,
                //显示文本样式
                label: {
                    normal: {
                        show: false,  //没有数据的地方不显示文本
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                //鼠标缩放和平移
                roam: true,
                itemStyle: {
                    normal: {
                        //          	color: '#ddd',
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(	47,79,79, .2)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                }
            },
            series: series
            //series: []
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

    }

    //湖南省飞机场
    function echart_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart_5'));

        function showProvince() {
            var geoCoordMap = {
                '长沙黄花国际机场': [113.226512, 28.192929],
                '张家界荷花机场': [110.454598, 29.107223],
                '常德桃花源机场': [111.651508, 28.921516],
                '永州零陵机场': [111.622869, 26.340994],
                '怀化芷江机场': [109.714784, 27.44615],
            };
            var data = [{
                name: '长沙黄花国际机场',
                value: 100
            },
                {
                    name: '张家界荷花机场',
                    value: 100
                },
                {
                    name: '常德桃花源机场',
                    value: 100
                },
                {
                    name: '永州零陵机场',
                    value: 100
                },
                {
                    name: '怀化芷江机场',
                    value: 100
                }
            ];
            var max = 480,
                min = 9; // todo
            var maxSize4Pin = 100,
                minSize4Pin = 20;
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
            console.log(JSON.stringify(convertData(data)))
            myChart.setOption(option = {
                title: {
                    top: 20,
                    text: '',
                    subtext: '',
                    x: 'center',
                    textStyle: {
                        color: '#ccc'
                    }
                },
                legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: ['pm2.5'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {}
                },
                geo: {
                    show: true,
                    map: 'hunan',
                    mapType: 'hunan',
                    label: {
                        normal: {},
                        //鼠标移入后查看效果
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    //鼠标缩放和平移
                    roam: true,
                    itemStyle: {
                        normal: {
                            //          	color: '#ddd',
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(	47,79,79, .2)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    }
                },
                series: [{
                    name: 'light',
                    type: 'map',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    itemStyle: {
                        normal: {
                            color: '#F4E925'
                        }
                    }
                },
                    {
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: function (val) {
                            var a = (maxSize4Pin - minSize4Pin) / (max - min);
                            var b = minSize4Pin - a * min;
                            b = maxSize4Pin - a * max;
                            return a * val[2] + b;
                        },
                        label: {
                            normal: {
                                // show: true,
                                // textStyle: {
                                //     color: '#fff',
                                //     fontSize: 9,
                                // }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F62157', //标志颜色
                            }
                        },
                        zlevel: 6,
                        data: convertData(data),
                    },
                    {
                        name: 'light',
                        type: 'map',
                        mapType: 'hunan',
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#FFFFFF',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        animation: false,
                        data: data
                    },
                    {
                        name: ' ',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 5)),
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#05C3F9',
                                shadowBlur: 10,
                                shadowColor: '#05C3F9'
                            }
                        },
                        zlevel: 1
                    },

                ]
            });
        }

        showProvince();

        // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //点击跳转
    // $('#chart_map').click(function () {
    //     window.location.href = './page/index.html';
    // });
    // $('.t_btn2').click(function () {
    //     window.location.href = "./page/index.html?id=2";
    // });
    // $('.t_btn3').click(function () {
    //     window.location.href = "./page/index.html?id=3";
    // });
    // $('.t_btn4').click(function () {
    //     window.location.href = "./page/index.html?id=4";
    // });
    // $('.t_btn5').click(function () {
    //     window.location.href = "./page/index.html?id=5";
    // });
    // $('.t_btn6').click(function () {
    //     window.location.href = "./page/index.html?id=6";
    // });
    // $('.t_btn7').click(function () {
    //     window.location.href = "./page/index.html?id=7";
    // });
    // $('.t_btn8').click(function () {
    //     window.location.href = "./page/index.html?id=8";
    // });
    // $('.t_btn9').click(function () {
    //     window.location.href = "./page/index.html?id=9";
    // });
});



function async_data_chart_1() {
    // 异步加载数据
    $.getJSON('json/chart_1.json').done(function (data) {
        var myChart = echarts.init(document.getElementById('echart_1'));

        ret = myChart.setOption({
            series: [{
                data: data
            }]
        });

    });//end $.getJSON

}

function async_data_chart_2() {
    // 异步加载数据
    $.getJSON('json/chart_2.json').done(function (data) {
        var myChart = echarts.init(document.getElementById('echart_2'));

        ret = myChart.setOption({
            series: [{
                data: data
            }]
        });

    });//end $.getJSON
}
function async_data_chart_map() {
    // 异步加载数据
    $.getJSON('json/chart_map_effectScatter.json').done(function (data_effectScatter) {
        $.getJSON('json/chart_map_lines.json').done(function (data_lines) {
            var myChart = echarts.init(document.getElementById('echart_map'));

            ret = myChart.setOption({
                series: [{
                    name: data_lines["name"],
                    data: data_lines["data"]
                }, {
                    name: data_effectScatter["name"],
                    data: data_effectScatter["data"]
                }]
            });
        });//end $.getJSON
    });//end $.getJSON

}
function async_data_chart_3() {
    // 异步加载数据
    $.getJSON('json/chart_3.json').done(function (data) {
        var myChart = echarts.init(document.getElementById('echart_3'));

        myChart.setOption({
            legend: data["legend"],
            xAxis: data["xAxis"],
            yAxis: data["yAxis"],
            series: data["series"]

        });
    });//end $.getJSON

}
function async_data_chart_4() {
// 异步加载数据
    $.getJSON('json/chart_4.json').done(function (data) {
        var myChart = echarts.init(document.getElementById('echart_4'));

        myChart.setOption({
            series: data
        });

    });//end $.getJSON
}
function async_data_chart_5() {
// 异步加载数据
    $.getJSON('json/chart_5.json').done(function (data) {
        var myChart = echarts.init(document.getElementById('echart_5'));

        myChart.setOption({
            series: [{data: data},
                {data: data},
                {data: data},
                {data: data}]
        });

    });//end $.getJSON
}


function genTr(tr_data) {
    // tr_data = data["tr"]

    var $theadHtml =  $("<thead></thead>");
    var $trTmp = $("<tr></tr>");
    for( var i = 0; i < tr_data.length; i++ ) {
        $trTmp.append("<td>" + tr_data[i] + "</td>");
    }
    $trTmp.appendTo($theadHtml)
    return $theadHtml
}

function genTd(td_data){
    var $tbodyHtml =  $("<tbody></tbody>");
    for( var i = 0; i < td_data.length; i++ ) {
        //动态创建一个tr行标签,并且转换成jQuery对象
        var $trTmp = $("<tr></tr>");
        var tdTmp = td_data[i]
        //往行里面追加 td单元格
        for( var k = 0; k < tdTmp.length; k++ ) {
            $trTmp.append("<td>"+ tdTmp[k] +"</td>");
        }
        // $tbodyHtml.append($trTmp)
        $trTmp.appendTo($tbodyHtml)
        console.log("td_data %d", i)

    }
    return $tbodyHtml
}

function async_data_table_1() {
    // 异步加载数据
    $.getJSON('json/table_1.json').done(function (data) {
        $("#table_1").empty();
        genTr(data["tr"]).appendTo("#table_1");
        genTd(data["td"]).appendTo("#table_1");
    });//end $.getJSON

}

function async_data_table_2() {
    // 异步加载数据
    $.getJSON('json/table_2.json').done(function (data) {
        $("#table_2").empty();
        genTr(data["tr"]).appendTo("#table_2");
        genTd(data["td"]).appendTo("#table_2");
    });//end $.getJSON
}

function async_data_table_3() {
    // 异步加载数据
    $.getJSON('json/table_3.json').done(function (data) {
        $("#table_3").empty();
        genTr(data["tr"]).appendTo("#table_3");
        genTd(data["td"]).appendTo("#table_3");
    });//end $.getJSON
}

function async_data() {
    async_data_chart_1();
    async_data_chart_2();
    async_data_chart_map();
    async_data_chart_3();
    async_data_chart_4();
    async_data_chart_5();
    async_data_table_1();
    async_data_table_2();
    async_data_table_3();
}

// async_data();

3、后端python代码

import _thread
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import QWebEngineView
from pyecharts import Geo
from PyQt5.QtCore import QUrl
from win32api import GetSystemMetrics
from PyQt5 import QtGui
from httpserver import *
from asyncJson import *

class MainWindow(QMainWindow):
  def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.loadfinished = False
    self.setWindowTitle('大屏展示')
    self.showMaximized()
    #全屏显示
    self.showFullScreen()
    self.isFullScreen = True

    self.webview = WebEngineView()
    self.webview.load(QUrl(index_url))
    self.setCentralWidget(self.webview)

    QShortcut(QtGui.QKeySequence("Escape"), self, self.Esc)
    self.webview.loadFinished.connect(self.SetLoadFinished)

    _thread.start_new_thread(HttpServer, ())
    _thread.start_new_thread(self.ChangeData, ())

  def SetLoadFinished(self):
      self.loadfinished = True

  #模拟刷新数据
  def ChangeData(self):
      while 1:
          #页面加载完毕再开始刷新数据
          if self.loadfinished == False :
              # print("self.loadfinished == False")
              continue
          # print("self.loadfinished == True")
          # change_all_json()
          change_chart_1()
          self.webview.page().runJavaScript("async_data_chart_1()")
          change_chart_2()
          self.webview.page().runJavaScript("async_data_chart_2()")
          change_chart_map()
          self.webview.page().runJavaScript("async_data_chart_map()")
          time.sleep(1)

          change_chart_3()
          self.webview.page().runJavaScript("async_data_chart_3()")
          change_chart_4()
          self.webview.page().runJavaScript("async_data_chart_4()")
          time.sleep(1)

          change_chart_5()
          self.webview.page().runJavaScript("async_data_chart_5()")
          change_table(table_1_FILENAME)
          self.webview.page().runJavaScript("async_data_table_1()")
          change_table(table_2_FILENAME)
          self.webview.page().runJavaScript("async_data_table_2()")
          change_table(table_3_FILENAME)
          self.webview.page().runJavaScript("async_data_table_3()")

          time.sleep(1)


  #按ESC全屏或缩小
  def Esc(self):
      if self.isFullScreen == True :
          self.isFullScreen = False
          #不加这句的话，标题栏就看不到了
          self.showNormal()
          #设置固定宽高
          self.setGeometry(GetSystemMetrics(0)/2, GetSystemMetrics(1)/2, 1280, 768)
          #再移动到屏幕中央
          screen = QDesktopWidget().screenGeometry()
          size = self.geometry()
          self.move((screen.width() - size.width()) / 2, (screen.height() - size.height()) / 2)
      else:
          self.showFullScreen()
          self.isFullScreen = True


class WebEngineView(QWebEngineView):
  windowList = []

  # 重写createwindow()
  def createWindow(self, QWebEnginePage_WebWindowType):
    new_webview =  WebEngineView()
    new_window = MainWindow()
    new_window.setCentralWidget(new_webview)
    #new_window.show()
    self.windowList.append(new_window) #注：没有这句会崩溃！！！
    return new_webview


if __name__ == "__main__":
  app = QApplication(sys.argv)
  w = MainWindow()
  w.show()
  sys.exit(app.exec_())

四、上线运行

五、源码下载

【源码】数据可视化：基于Echarts+Python实现的动态实时大屏范例2-物流大数据.zip_大屏的酷炫echarts-管理软件文档类资源-CSDN下载

注：源码包括python的webserver + json数据源码 + echarts

启动命令：打开cmd命令行，切换到案例根目录，运行 python httpserver.py

引用：基于互联网大牛的前端改进一下，做了个可执行程序，获取数据后更新到页面上。

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

本次分享结束，欢迎讨论！QQ微信同号： 6550523

YYDataV数据可视化

关注

12
点赞
踩
112

收藏

觉得还不错? 一键收藏
打赏
3
评论
【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的“酷炫吊炸天”的霸道总裁大屏驾驶舱。今天为大家来分享的是物流大数据服务平台。话不多说，开始分享干货，欢迎讨论！QQ和微信号相同6550523首先看动态效果图：一、确定需求方案最终样式图1、确定产品上线部署的屏幕LED分辨率1920px*1080px，F11全屏后占满整屏且无滚动条。其它分辨率也可自适应。2、功能模块湖南货物收入湖南省地图全国地图货物周转量湖...
复制链接

扫一扫