The emergence of large-screen data visualization has set off a wave after another, and many business owners have wanted to build their own "cool dangling sky" domineering president's large-screen cockpit.
Some 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
Renderings show
1. Determine the demand plan
1. Determine the screen LED resolution for the online deployment of the product
This case is based on 16:9 aspect ratio, F11 full screen display.
2. Deployment method
Install-free executable program: support Windows, Linux, Mac and other operating systems; just copy the program to the server, no other environment dependencies are required;
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 - page layout layout & style
<body style="background-color:rgba(10, 2, 39, 0.796)">
<div class="container_fluid">
<div class="row_fluid" id="vue_app">
<div class="col-xs-12 col-md-12" style="padding:0 0;">
<h3 style="color:rgba(11, 240, 125, 0.796); text-align: center" id="container_0">
<strong></strong>
</h3>
<dv-decoration-5 style="width=100%;height:4%;">
</dv-decoration-5>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0;">
<div style="height:15%; padding:0%;">
<dv-border-box-7>
<p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>实时步数
<img src="myimg/1.png" style="height: 25%; ">
</p>
<p id="container_1"
style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>心率
<img src="myimg/2.png" style="height: 25%; ">
</p>
<p id="container_2"
style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>
血氧饱和度
<img src="myimg/3.png" style="height: 25%; ">
</p>
<p id="container_3"
style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>压力
<img src="myimg/4.png" style="height: 25%; ">
</p>
<p id="container_4"
style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-5" style="padding:0 0;">
<div style="height:75%;" id="container_5"></div>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_6">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_7">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_8">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_9">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_10">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_11">
</div>
</dv-border-box-6>
</div>
</div>
</div>
</body>2. Front-end JS code - each echarts chart
var idContainer_5 = "container_5";
var chartDom = document.getElementById(idContainer_5);
var myChart = echarts.init(chartDom, gTheme);
option = {
title: {
text: "运动卡路里等级",
left: "left",
textStyle: {
color: "rgba(11, 240, 125, 0.796)",
fontSize: "12",
},
},
series: {
type: "sunburst",
data: [],
radius: [3, "90%"],
itemStyle: {
borderRadius: 15,
borderWidth: 1,
borderColor: "rgba(255,255,255,.1)",
},
label: {
textStyle:{
color: "rgba(0,0,0,.8)",
}
},
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
function asyncData_5() {
$.getJSON("json/sunburst.json").done(function (data) {
var myChart = echarts.init(document.getElementById(idContainer_5));
myChart.setOption({
series: [{ data: data }],
});
}); //end $.getJSON
}
asyncData_5();
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
[{"name": "有氧", "children": [{"name": "球类", "children": [{"name": "羽毛球", "value": 32}, {"name": "乒乓球", "value": 39}, {"name": "篮球", "value": 40}, {"name": "足球", "value": 48}, {"name": "网球", "value": 42}, {"name": "排球", "value": 46}, {"name": "冰球", "value": 24}, {"name": "棒球", "value": 33}, {"name": "橄榄球", "value": 12}, {"name": "板球", "value": 34}]}, {"name": "田径类", "children": [{"name": "马拉松", "value": 43}, {"name": "竞走", "value": 12}, {"name": "快跑", "value": 31}]}]}, {"name": "无氧", "children": [{"name": "竞技类", "children": [{"name": "赛跑", "value": 14}, {"name": "跳远", "value": 47}]}, {"name": "其他", "children": [{"name": "深蹲", "value": 29}, {"name": "举重", "value": 46}, {"name": "平板支撑", "value": 23}, {"name": "拔河", "value": 11}, {"name": "投掷", "value": 35}]}]}]Fourth, development configuration & code structure description
5. More cases
This sharing is over, welcome to discuss! QQ WeChat same number: 6550523