The emergence of large-screen data visualization has set off a wave after another, and many companies have wanted to build their own "cool dangling sky" domineering president's large-screen cockpit.
Before, my friends suggested that I take some video courses to learn Echarts, so that I can get started faster, so I recorded "Echarts - 0 Basic Introductory Course" , hoping to help those in need.
portal
Show results
1. Determine the demand plan
1. Determine the screen LED resolution for the online deployment of the product
1920px*1080px, 15:9 aspect ratio, full screen after F11 full screen and no scroll bar.
2. Deployment method
Install-free executable program: support Windows, Linux, Mac and other operating systems; just copy the program to the server without other environment dependencies;
Viewing method: You can watch the program interface directly on the server, or you can open and play remotely with a browser, such as Chrome browser, 360 browser, etc.
2. Overall architecture design
- The front end is designed based on the Echarts open source library and uses the WebStorm editor;
- The backend is implemented based on Java Web, using IDEA editor;
- Data transmission format: JSON;
- Data source type: JSON file is currently used. Adding Mybatis by yourself can support PostgreSQL, MySQL, Oracle, Microsoft SQL Server, and SQLite. Adding Pandas by yourself can support Excel tables, etc. You can also customize the HTTP API interface method.
- Data update method: use http get polling method . In practical applications, you can also choose to monitor the real-time update of the back-end data and push it to the front-end in real time according to the situation;
3. Coding implementation (key code)
1. Front-end html code
<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. Front-end JS code
//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. Back-end Java code
@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. Data communication 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
}
}
]Fourth, development configuration & code structure description
5. More resources
This sharing is over, welcome to discuss! QQ WeChat same number: 6550523