12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链
生活随笔
收集整理的這篇文章主要介紹了
12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
數據可視化大屏的出現，掀起一番又一番的浪潮，眾多企業主紛紛想要打造屬于自己的“酷炫吊炸天”的霸道總裁大屏駕駛艙。
之前有小伙伴們建議我出一些視頻課程來學習Echarts，這樣可以更快上手，所以我就追星趕月的錄制了《Echarts - 0基礎入門課程》，希望對有需要的小伙伴有幫助。
傳送門
YYDatav的數據可視化大屏《精彩案例匯總》（Java SpringBoot&Echarts源碼）_YYDataV的博客-CSDN博客
12【源碼】數據可視化：基于Echarts+JavaSpringBoot實現的動態實時大屏范例-供應商大屏.zip-Java文檔類資源-CSDN下載
效果圖展示
?
?
?
一、?確定需求方案
1、確定產品上線部署的屏幕LED分辨率
本案例基于16:9 屏寬比，F11全屏顯示。
2、部署方式?
基于免安裝可執行程序：支持Windows、Linux、Mac等各種操作系統；將程序復制到服務器上即可，無需其它環境依賴；
觀看方式：既可在服務器上直接觀看程序界面，也可在遠程用瀏覽器打開播放，例如Chrome瀏覽器、360瀏覽器等。
二、整體架構設計
三、編碼實現 （關鍵代碼）
1、前端html代碼 - 頁面布局layout&樣式style
<body background="/myimg/starfield.jpg"><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-7 style="height:87%;padding:0 0"><div style="height:100%;padding:5%;" id="container_1" class="col-xs-12 col-md-12"></div></dv-border-box-7></div><div style="padding:0 0" class="col-xs-12 col-md-6"><div style="height:87%;padding:1%" id="container_3" class="col-xs-12 col-md-12"></div><div class="div-title-1"><p class="p-titile">全球總成交額<img src="myimg/1.png" style="height: 40%; "></p><p id="container_2_1" class="p-value"></p></div><div class="div-title-2"><p class="p-titile">供應商數量<img src="myimg/2.png" style="height: 40%; "></p><p id="container_2_2" class="p-value"></p></div><div class="div-title-3"><p class="p-titile">采購上線率<img src="myimg/3.png" style="height: 40%; "></p><p id="container_2_3" class="p-value"></p></div></div><div style="padding:0 0" class="col-xs-12 col-md-3"><dv-border-box-7 style="height:20%;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-7><dv-border-box-7 style="height:20%;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-7><dv-border-box-7 style="height:20%;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-7><dv-border-box-7 style="height:27%;padding:0 0" class="col-xs-12 col-md-12"><div style="height:100%;padding:5% 5% 5% 5%;" id="container_7"></div></dv-border-box-7></div></div></div> </body>2、前端JS代碼 - 各個echarts圖表
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} <br/>{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%",// 距離頂部邊框的相對距離，太近壓到了legendtop: "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();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
[{"name": "Afghanistan", "value": 914}, {"name": "Angola", "value": 543}, {"name": "Albania", "value": 313}, {"name": "United Arab Emirates", "value": 352}, {"name": "Argentina", "value": 338}, {"name": "Armenia", "value": 93}, {"name": "French Southern and Antarctic Lands", "value": 149}, {"name": "Australia", "value": 661}, {"name": "Austria", "value": 247}, {"name": "Azerbaijan", "value": 671}, {"name": "Burundi", "value": 156}, {"name": "Belgium", "value": 197}, {"name": "Benin", "value": 456}, {"name": "Burkina Faso", "value": 311}, {"name": "Bangladesh", "value": 81}, {"name": "Bulgaria", "value": 542}, {"name": "The Bahamas", "value": 523}, {"name": "Bosnia and Herzegovina", "value": 569}, {"name": "Belarus", "value": 809}, {"name": "Belize", "value": 661}, {"name": "Bermuda", "value": 698}, {"name": "Bolivia", "value": 633}, {"name": "Brazil", "value": 416}, {"name": "Brunei", "value": 834}, {"name": "Bhutan", "value": 178}, {"name": "Botswana", "value": 180}, {"name": "Central African Republic", "value": 109}, {"name": "Canada", "value": 212}, {"name": "Switzerland", "value": 314}, {"name": "Chile", "value": 597}, {"name": "China", "value": 758}, {"name": "Ivory Coast", "value": 673}, {"name": "Cameroon", "value": 90}, {"name": "Democratic Republic of the Congo", "value": 822}, {"name": "Republic of the Congo", "value": 434}, {"name": "Colombia", "value": 399}, {"name": "Costa Rica", "value": 208}, {"name": "Cuba", "value": 720}, {"name": "Northern Cyprus", "value": 943}, {"name": "Cyprus", "value": 569}, {"name": "Czech Republic", "value": 95}, {"name": "Germany", "value": 98}, {"name": "Djibouti", "value": 577}, {"name": "Denmark", "value": 872}, {"name": "Dominican Republic", "value": 497}, {"name": "Algeria", "value": 165}, {"name": "Ecuador", "value": 794}, {"name": "Egypt", "value": 102}, {"name": "Eritrea", "value": 110}, {"name": "Spain", "value": 369}, {"name": "Estonia", "value": 190}, {"name": "Ethiopia", "value": 265}, {"name": "Finland", "value": 850}, {"name": "Fiji", "value": 812}, {"name": "Falkland Islands", "value": 699}, {"name": "France", "value": 330}, {"name": "Gabon", "value": 887}, {"name": "United Kingdom", "value": 772}, {"name": "Georgia", "value": 436}, {"name": "Ghana", "value": 574}, {"name": "Guinea", "value": 998}, {"name": "Gambia", "value": 225}, {"name": "Guinea Bissau", "value": 972}, {"name": "Equatorial Guinea", "value": 806}, {"name": "Greece", "value": 522}, {"name": "Greenland", "value": 876}, {"name": "Guatemala", "value": 217}, {"name": "French Guiana", "value": 830}, {"name": "Guyana", "value": 173}, {"name": "Honduras", "value": 245}, {"name": "Croatia", "value": 591}, {"name": "Haiti", "value": 57}, {"name": "Hungary", "value": 530}, {"name": "Indonesia", "value": 566}, {"name": "India", "value": 850}, {"name": "Ireland", "value": 445}, {"name": "Iran", "value": 179}, {"name": "Iraq", "value": 720}, {"name": "Iceland", "value": 530}, {"name": "Israel", "value": 396}, {"name": "Italy", "value": 702}, {"name": "Jamaica", "value": 641}, {"name": "Jordan", "value": 405}, {"name": "Japan", "value": 570}, {"name": "Kazakhstan", "value": 864}, {"name": "Kenya", "value": 466}, {"name": "Kyrgyzstan", "value": 346}, {"name": "Cambodia", "value": 277}, {"name": "South Korea", "value": 218}, {"name": "Kosovo", "value": 425}, {"name": "Kuwait", "value": 945}, {"name": "Laos", "value": 870}, {"name": "Lebanon", "value": 467}, {"name": "Liberia", "value": 625}, {"name": "Libya", "value": 489}, {"name": "Sri Lanka", "value": 495}, {"name": "Lesotho", "value": 487}, {"name": "Lithuania", "value": 424}, {"name": "Luxembourg", "value": 363}, {"name": "Latvia", "value": 802}, {"name": "Morocco", "value": 641}, {"name": "Moldova", "value": 776}, {"name": "Madagascar", "value": 879}, {"name": "Mexico", "value": 211}, {"name": "Macedonia", "value": 370}, {"name": "Mali", "value": 877}, {"name": "Myanmar", "value": 419}, {"name": "Montenegro", "value": 705}, {"name": "Mongolia", "value": 596}, {"name": "Mozambique", "value": 760}, {"name": "Mauritania", "value": 115}, {"name": "Malawi", "value": 967}, {"name": "Malaysia", "value": 232}, {"name": "Namibia", "value": 913}, {"name": "New Caledonia", "value": 269}, {"name": "Niger", "value": 398}, {"name": "Nigeria", "value": 239}, {"name": "Nicaragua", "value": 644}, {"name": "Netherlands", "value": 122}, {"name": "Norway", "value": 825}, {"name": "Nepal", "value": 588}, {"name": "New Zealand", "value": 746}, {"name": "Oman", "value": 677}, {"name": "Pakistan", "value": 772}, {"name": "Panama", "value": 922}, {"name": "Peru", "value": 622}, {"name": "Philippines", "value": 666}, {"name": "Papua New Guinea", "value": 627}, {"name": "Poland", "value": 949}, {"name": "Puerto Rico", "value": 83}, {"name": "North Korea", "value": 125}, {"name": "Portugal", "value": 138}, {"name": "Paraguay", "value": 537}, {"name": "Qatar", "value": 561}, {"name": "Romania", "value": 645}, {"name": "Russia", "value": 763}, {"name": "Rwanda", "value": 600}, {"name": "Western Sahara", "value": 460}, {"name": "Saudi Arabia", "value": 903}, {"name": "Sudan", "value": 161}, {"name": "South Sudan", "value": 652}, {"name": "Senegal", "value": 161}, {"name": "Solomon Islands", "value": 770}, {"name": "Sierra Leone", "value": 532}, {"name": "El Salvador", "value": 467}, {"name": "Somaliland", "value": 605}, {"name": "Somalia", "value": 620}, {"name": "Republic of Serbia", "value": 785}, {"name": "Suriname", "value": 307}, {"name": "Slovakia", "value": 285}, {"name": "Slovenia", "value": 681}, {"name": "Sweden", "value": 811}, {"name": "Swaziland", "value": 500}, {"name": "Syria", "value": 754}, {"name": "Chad", "value": 608}, {"name": "Togo", "value": 799}, {"name": "Thailand", "value": 925}, {"name": "Tajikistan", "value": 641}, {"name": "Turkmenistan", "value": 741}, {"name": "East Timor", "value": 144}, {"name": "Trinidad and Tobago", "value": 602}, {"name": "Tunisia", "value": 436}, {"name": "Turkey", "value": 72}, {"name": "United Republic of Tanzania", "value": 203}, {"name": "Uganda", "value": 524}, {"name": "Ukraine", "value": 165}, {"name": "Uruguay", "value": 991}, {"name": "United States of America", "value": 662}, {"name": "Uzbekistan", "value": 106}, {"name": "Venezuela", "value": 682}, {"name": "Vietnam", "value": 235}, {"name": "Vanuatu", "value": 380}, {"name": "West Bank", "value": 964}, {"name": "Yemen", "value": 657}, {"name": "South Africa", "value": 519}, {"name": "Zambia", "value": 209}, {"name": "Zimbabwe", "value": 902}]四、開發配置&代碼結構說明
?數據可視化：基于 Echarts +Java SpringBoot 實現的動態實時大屏【Java開發環境搭建】
五、更多案例?
YYDatav的數據可視化大屏《精彩案例匯總》（Python&Echarts源碼）_YYDataV的博客-CSDN博客
《工廠訂單出入庫信息管理系統》完整案例詳解（含演示網址賬號）（Go&Vue源碼）_YYDataV的博客-CSDN博客
本次分享結束，歡迎討論！QQ微信同號： 6550523
總結
以上是生活随笔為你收集整理的12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用java进行本地文件全盘搜索
- 下一篇： 【Java开发】 Mybatis-Plu