コンテンツ
大画面データの視覚化の出現は次々と波を起こし、多くのビジネスオーナーは、圧倒的な大統領の独自の「クールでまばゆいばかりの」大画面コックピットを構築したいと考えていました。今日お話しするのは[インターネットエンタープライズデータ分析]です。
以前、友達がEchartsを学ぶためにいくつかのビデオコースを受講することを提案しました。これにより、より早く始めることができます。そこで、「Echarts-0基本紹介コース」 Echarts-0基本紹介-その他のビデオチュートリアル-プログラミング言語-CSDNプログラマートレーニングを録画しました。研究所。
結果を示す
1.最初に動的レンダリングを確認します
。
2.リアルタイムの断片化データグラフを見てください
。
1.ニーズの確認
1.製品のオンライン展開の画面LED解像度を決定します
1920px * 1080px、F11フルスクリーン後のフルスクリーン、スクロールバーなし。他の解像度も適応させることができます。
2.機能モジュール
- ユーザーアクセスソース分析（円グラフ）： 検索エンジン、アフィリエイト広告、直接アクセスを含む
- 訪問地域の分布（棒グラフ+マップ+ヒートマップ）：浙江、上海、広東、北京
- 年齢分布（円グラフ）： 0 +、20-29、30-39、40-49、50 +
- 職業分布（円グラフ）： eコマース、教育、IT /インターネット、金融、学生、その他
- 利息分布（円グラフ）：自動車、旅行、金融、教育、ソフトウェア、その他
- 端末デバイスの分布（折れ線グラフ）： Android+iOSモバイルデバイスの使用
- トップ5チャネル訪問（棒グラフ）：最新のトップ5チャネルをリアルタイムで表示します
- Likes Top5（円グラフ）：最新のTop5地域のリアルタイム表示
3.展開方法
インストール不要の実行可能プログラム：Windows、Linux、Mac、およびその他のオペレーティングシステムをサポートします。プログラムをサーバーにコピーするだけで、他の環境依存関係は必要ありません。
表示方法：サーバー上でプログラムインターフェイスを直接視聴することも、Chromeブラウザや360ブラウザなどのブラウザでリモートで開いて再生することもできます。
2.全体的なアーキテクチャ設計
- フロントエンドは、Echartsオープンソースライブラリに基づいて設計されており、WebStormエディターを使用します。
- バックエンドは、IDEAエディターを使用してJavaWebに基づいて実装されます。
- データ送信形式：JSON;
- データソースの種類：PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excelフォームなどが現在サポートされており、HTTPAPIインターフェイスやその他の種類のデータベースもカスタマイズできます。
- データ更新方法：http getpollingmethodを使用します 。実際のアプリケーションでは、バックエンドデータのリアルタイム更新を監視し、状況に応じてリアルタイムでフロントエンドにプッシュすることもできます。
3.開発環境の構築
1.Java開発環境の構成
次に、GENERATE、パッケージをダウンロードします。
2.jsonライブラリの構成
alibabaのjsonライブラリを使用して、pom.xmlファイルに構成を追加します。
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>第四に、コーディングの実装（キーコード）
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>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script language="JavaScript" src="js/js.js"></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>
//alert("aaaaaa");
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.2rem">
<div class="alltitle">用户访问来源</div>
<div class="allnav" id="echart1"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">访问地区分布</div>
<div class="allnav" id="echart2"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div style="height:100%; width: 100%;">
<div class="sy" id="fb1"></div>
<div class="sy" id="fb2"></div>
<div class="sy" id="fb3"></div>
</div>
<div class="boxfoot">
</div>
</div>
</li>
<li>
<div class="bar">
<div class="barbox">
<ul class="clearfix">
<li class="pulll_left counter " id="total_pv">12581189</li>
<li class="pulll_left counter" id="total_income">3912410</li>
</ul>
</div>
<div class="barbox2">
<ul class="clearfix">
<li class="pulll_left">总阅读量（pv）</li>
<li class="pulll_left">总收益</li>
</ul>
</div>
</div>
<div class="map">
<div class="map1"><img src="picture/lbx.png"></div>
<div class="map2"><img src="picture/jt.png"></div>
<div class="map3"><img src="picture/map.png"></div>
<div class="map4" id="map_1"></div>
</div>
</li>
<li>
<div class="boxall" style="height:3.4rem">
<div class="alltitle">终端设备分布</div>
<div class="allnav" id="echart4"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">频道访问量Top5</div>
<div class="allnav" id="echart5"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3rem">
<div class="alltitle">点赞量Top5</div>
<div class="allnav" id="echart6"></div>
<div class="boxfoot"></div>
</div>
</li>
</ul>
</div>
<div class="back"></div>
<script src="js/china.js" type="text/javascript"></script>
<script src="js/area_echarts.js" type="text/javascript"></script>
</body>
</html>
2.フロントエンドのjsコード
function echarts_1() {
var myChart = echarts.init(document.getElementById('echart1'));
option = {
title: {
// text: '某站点用户访问来源',
// subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{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();
});
}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": "直接访问", "value": 293}, {"name": "邮件营销", "value": 396}, {"name": "联盟广告", "value": 311}]5.コード構造の説明
a。静的パス
b。Javaディレクトリ
c。ポート構成
4.プロジェクトの運営
1.コマンドを開始します
。
2.プロジェクトのReadMeの説明
<!-- 启动server文件 -->
BigscreenApplication.java
<!-- 浏览器中输入网址查看大屏（端口为 application.properties 中的 server.port 值） -->
http://localhost:80xx
<!-- 更多资料参考我的博客主页 -->
https://yydatav.blog.csdn.net/
<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616
我的微信号：6550523 欢迎多多交流5、ソースコードのダウンロード
1 [ソースコード]データの視覚化：Echarts +JavaSpringBootに基づく動的なリアルタイムの大画面の例-インターネットエンタープライズデータ分析
素晴らしい事例のまとめ
YYDatavのデータ視覚化「素晴らしい事例の要約」_YYDataVのブログ-CSDNブログ
「ファクトリーオーダーインバウンドおよびアウトバウンド情報管理システム」の完全なケースの詳細な説明（デモURLアカウントを含む）（Go＆Vueソースコード）-YYDataVのブログ-CSDNブログ
この共有は終わりました、議論することを歓迎します！QQ WeChat同じ番号：6550523