大画面データの視覚化の出現は次々と波を起こし、多くの企業が独自の「クールなぶら下がっている空」を支配する大統領の大画面コックピットを構築したいと考えていました。
以前、友達からビデオコースを受講してEchartsを学ぶように勧められたので、より早く始められるように 、困っている人を助けたいと思って「Echarts-0基本入門コース」を録画しました。
ポータル
YYDatavの大画面データ視覚化「SummaryofWonderfulCases」（Java SpringBoot＆Echartsソースコード）-YYDataVのブログ-CSDNブログ
結果を示す
1.需要計画を決定します
1.製品のオンライン展開の画面LED解像度を決定します
1920px * 1080px、アスペクト比15：9、F11フルスクリーン後のフルスクリーン、スクロールバーなし。
2.展開方法
インストール不要の実行可能プログラム：Windows、Linux、Mac、およびその他のオペレーティングシステムをサポートします。プログラムをサーバーにコピーするだけで、他の環境依存関係は必要ありません。
表示方法：サーバー上でプログラムインターフェイスを直接視聴することも、Chromeブラウザや360ブラウザなどのブラウザでリモートで開いて再生することもできます。
2.全体的なアーキテクチャ設計
- フロントエンドは、Echartsオープンソースライブラリに基づいて設計されており、WebStormエディターを使用します。
- バックエンドは、IDEAエディターを使用してJavaWebに基づいて実装されます。
- データ送信形式：JSON;
- データソースタイプ：JSONファイルが現在使用されています。Mybatisを自分で追加すると、PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLiteをサポートできます。Pandaを自分で追加すると、Excelテーブルなどをサポートできます。HTTPAPIインターフェイスメソッドをカスタマイズすることもできます。
- データ更新方法：http getpollingmethodを使用します 。実際のアプリケーションでは、バックエンドデータのリアルタイム更新を監視し、状況に応じてリアルタイムでフロントエンドにプッシュすることもできます。
3.コーディングの実装（キーコード）
1.フロントエンドのhtmlコード
<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>
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} <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();
});
}
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 +JavaSpringBootに基づく動的なリアルタイムの大画面[Java開発環境の構築]
5.その他のリソース
YYDatavの大画面データ視覚化「SummaryofWonderfulCases」（PythonとEchartsのソースコード）-YYDataVのブログ-CSDNブログ
「ファクトリーオーダーインバウンドおよびアウトバウンド情報管理システム」の完全なケースの詳細な説明（デモURLアカウントを含む）（Go＆Vueソースコード）-YYDataVのブログ-CSDNブログ
この共有は終わりました、議論することを歓迎します！QQ WeChat同じ番号：6550523