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

之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》 ，希望可以帮到有需要的小伙伴。

传送门

YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码）_YYDataV的博客-CSDN博客

2【源码】数据可视化：基于Echarts+JavaSpringBoot实现的动态实时大屏范例-物流大数据-企业管理文档类资源-CSDN下载

效果展示

一、 确定需求方案

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

1920px*1080px，15:9屏宽比，F11全屏后占满整屏且无滚动条。

2、部署方式 

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

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

二、整体架构设计

前端基于Echarts开源库设计，使用WebStorm编辑器；后端基于Java Web实现，使用 IDEA 编辑器；数据传输格式：JSON；数据源类型：目前采用JSON文件方式，自行添加Mybatis可支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加Pandas可支持Excel表格等，还可以定制HTTP API接口方式。数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；

三、编码实现 （关键代码）

1、前端html代码

     页面加载中...


    案例 - 物流大数据服务平台
    
    


    

        
            
                湖南货物收入
                
                
            
            
                湖南省地图
                
                
            
            

                
                    
                    湖南省交通
                
                
                    

                        

                        

                            
运营数(辆)
                            
线路总长度(公里)
                            
客运总量(万人次)
                            
日期
                        
                        
                        

                        

                            
21059
                            
26497
                            
184448
                            
2018年
                        
                        

                            
18777
                            
21140
                            
188808
                            
2017年
                        
                        

                            
15757
                            
20225
                            
201143
                            
2016年
                        
                        

                            
17458
                            
19567
                            
202446
                            
2015年
                        
                        

                            
11323
                            
14562
                            
279854
                            
2014年
                        
                        
                    
                
                
            
        
        
            
                全国地图
                
                
            
            

                
                    
                    湖南省业务量
                
                
                    

                        

                        

                            
运营数(辆)
                            
线路总长度(公里)
                            
客运总量(万人次)
                            
日期
                        
                        
                        

                        

                            
21059
                            
26497
                            
184448
                            
2018年
                        
                        

                            
18777
                            
21140
                            
188808
                            
2017年
                        
                        

                            
15757
                            
20225
                            
201143
                            
2016年
                        
                        

                            
17458
                            
19567
                            
202446
                            
2015年
                        
                        

                            
11323
                            
14562
                            
279854
                            
2014年
                        
                        
                    
                
                
            
        
        
            
                货物周转量
                
                
            
            
                 湖南高速公路
                
                
            
            
                湖南省飞机场
                
                
            
        
    

2、前端JS代码

    //echart_1湖南货物收入
    function echart_1() {
        
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart_1'));
        option = {
            //鼠标缩放和平移
            roam: true,
            tooltip: {
                trigger: 'item',
                formatter: "{a} 
{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();
        });
    }

    

3、后端Java代码

@RestController
@RequestMapping("/json")
public class Process {

    @RequestMapping("/{filename}")
    public String json(@PathVariable("filename") String filename) throws Exception {
        System.out.println(filename);
        ChangeJSON(filename);

        String jsonStr = readJSON(filename);
        System.out.println(jsonStr);
        return jsonStr;
    }

4、数据通信 JSON

[
    {
        "value": 285,
        "name": "张家口",
        "itemStyle": {
            "normal": {
                "color": "#f845f1"
            }
        }
    },
    {
        "value": 662,
        "name": "承德",
        "itemStyle": {
            "normal": {
                "color": "#ad46f3"
            }
        }
    },
    {
        "value": 2826,
        "name": "衡水",
        "itemStyle": {
            "normal": {
                "color": "#5045f6"
            }
        }
    },
    {
        "value": 599,
        "name": "邢台",
        "itemStyle": {
            "normal": {
                "color": "#4777f5"
            }
        }
    },
    {
        "value": 2502,
        "name": "邯郸",
        "itemStyle": {
            "normal": {
                "color": "#44aff0"
            }
        }
    },
    {
        "value": 984,
        "name": "保定",
        "itemStyle": {
            "normal": {
                "color": "#45dbf7"
            }
        }
    },
    {
        "value": 582,
        "name": "秦皇岛",
        "itemStyle": {
            "normal": {
                "color": "#f6d54a"
            }
        }
    },
    {
        "value": 2324,
        "name": "石家庄",
        "itemStyle": {
            "normal": {
                "color": "#f69846"
            }
        }
    },
    {
        "value": 2060,
        "name": "唐山",
        "itemStyle": {
            "normal": {
                "color": "#ff4343"
            }
        }
    },
    {
        "value": 893,
        "name": "",
        "itemStyle": {
            "normal": {
                "color": "transparent"
            }
        },
        "label": {
            "show": false
        },
        "labelLine": {
            "show": false
        }
    }
]

四、开发配置&代码结构说明

数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏【Java开发环境搭建】

五、更多资源 

YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客

《工厂订单出入库信息管理系统》完整案例详解（含演示网址账号）（Go&Vue源码）_YYDataV的博客-CSDN博客

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