docs(bigdata-system-dev): 大数据系统开发实验3，添加 ECharts 图表示例
- 新增 K 线图、折线图、散点图、柱状图、热力图、雷达图和饼图的 HTML 文件- 添加 Main.java 文件作为项目入口 - 创建 pom.xml 文件配置 Maven 项目
This commit is contained in:
parent
b2f5b0e40b
commit
1a1d4b52f4
17
bigdata-system-dev/pom.xml
Normal file
17
bigdata-system-dev/pom.xml
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project xmlns="http://maven.apache.org/POM/4.0.0"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||||
|
<modelVersion>4.0.0</modelVersion>
|
||||||
|
|
||||||
|
<groupId>cn.vscoder</groupId>
|
||||||
|
<artifactId>bigdata-system-dev</artifactId>
|
||||||
|
<version>1.0-SNAPSHOT</version>
|
||||||
|
|
||||||
|
<properties>
|
||||||
|
<maven.compiler.source>8</maven.compiler.source>
|
||||||
|
<maven.compiler.target>8</maven.compiler.target>
|
||||||
|
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
|
||||||
|
</properties>
|
||||||
|
|
||||||
|
</project>
|
||||||
17
bigdata-system-dev/src/main/java/cn/vscoder/Main.java
Normal file
17
bigdata-system-dev/src/main/java/cn/vscoder/Main.java
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
package cn.vscoder;
|
||||||
|
|
||||||
|
//TIP To <b>Run</b> code, press <shortcut actionId="Run"/> or
|
||||||
|
// click the <icon src="AllIcons.Actions.Execute"/> icon in the gutter.
|
||||||
|
public class Main {
|
||||||
|
public static void main(String[] args) {
|
||||||
|
//TIP Press <shortcut actionId="ShowIntentionActions"/> with your caret at the highlighted text
|
||||||
|
// to see how IntelliJ IDEA suggests fixing it.
|
||||||
|
System.out.printf("Hello and welcome!");
|
||||||
|
|
||||||
|
for (int i = 1; i <= 5; i++) {
|
||||||
|
//TIP Press <shortcut actionId="Debug"/> to start debugging your code. We have set one <icon src="AllIcons.Debugger.Db_set_breakpoint"/> breakpoint
|
||||||
|
// for you, but you can always add more by pressing <shortcut actionId="ToggleLineBreakpoint"/>.
|
||||||
|
System.out.println("i = " + i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>K线图</title>
|
||||||
|
<script src="js/echarts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main" style="width:800px;height:800px;"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: 'K线图'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'candlestick',
|
||||||
|
data: [
|
||||||
|
[20, 34, 10, 38],
|
||||||
|
[40, 35, 30, 50],
|
||||||
|
[31, 38, 33, 44],
|
||||||
|
[38, 15, 5, 42]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85952
bigdata-system-dev/src/main/java/cn/vscoder/experiment_3/js/echarts.js
Executable file
85952
bigdata-system-dev/src/main/java/cn/vscoder/experiment_3/js/echarts.js
Executable file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>折线图</title>
|
||||||
|
<script src="js/echarts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main" style="width:800px;height:800px;"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '折线图'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [150, 230, 224, 218, 135, 147, 260],
|
||||||
|
type: 'line'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>散点图</title>
|
||||||
|
<script src="js/echarts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main" style="width:800px;height:800px;"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '散点图'
|
||||||
|
},
|
||||||
|
xAxis: {},
|
||||||
|
yAxis: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
symbolSize: 20,
|
||||||
|
data: [
|
||||||
|
[10.0, 8.04],
|
||||||
|
[8.07, 6.95],
|
||||||
|
[13.0, 7.58],
|
||||||
|
[9.05, 8.81],
|
||||||
|
[11.0, 8.33],
|
||||||
|
[14.0, 7.66],
|
||||||
|
[13.4, 6.81],
|
||||||
|
[10.0, 6.33],
|
||||||
|
[14.0, 8.96],
|
||||||
|
[12.5, 6.82],
|
||||||
|
[9.15, 7.2],
|
||||||
|
[11.5, 7.2],
|
||||||
|
[3.03, 4.23],
|
||||||
|
[12.2, 7.83],
|
||||||
|
[2.02, 4.47],
|
||||||
|
[1.05, 3.33],
|
||||||
|
[4.05, 4.96],
|
||||||
|
[6.03, 7.24],
|
||||||
|
[12.0, 6.26],
|
||||||
|
[12.0, 8.84],
|
||||||
|
[7.08, 5.82],
|
||||||
|
[5.02, 5.68]
|
||||||
|
],
|
||||||
|
type: 'scatter'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>柱状图</title>
|
||||||
|
<script src="js/echarts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main" style="width:800px;height:800px;"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '柱状图'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>热力图</title>
|
||||||
|
<script src="js/echarts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main" style="width:800px;height:800px;"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
|
||||||
|
// prettier-ignore
|
||||||
|
const hours = [
|
||||||
|
'12a', '1a', '2a', '3a', '4a', '5a', '6a',
|
||||||
|
'7a', '8a', '9a', '10a', '11a',
|
||||||
|
'12p', '1p', '2p', '3p', '4p', '5p',
|
||||||
|
'6p', '7p', '8p', '9p', '10p', '11p'
|
||||||
|
];
|
||||||
|
// prettier-ignore
|
||||||
|
const days = [
|
||||||
|
'Saturday', 'Friday', 'Thursday',
|
||||||
|
'Wednesday', 'Tuesday', 'Monday', 'Sunday'
|
||||||
|
];
|
||||||
|
// prettier-ignore
|
||||||
|
const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
|
||||||
|
.map(function (item) {
|
||||||
|
return [item[1], item[0], item[2] || '-'];
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '热力图'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
height: '50%',
|
||||||
|
top: '10%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: hours,
|
||||||
|
splitArea: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: days,
|
||||||
|
splitArea: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
min: 0,
|
||||||
|
max: 10,
|
||||||
|
calculable: true,
|
||||||
|
orient: 'horizontal',
|
||||||
|
left: 'center',
|
||||||
|
bottom: '15%'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Punch Card',
|
||||||
|
type: 'heatmap',
|
||||||
|
data: data,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>雷达图</title>
|
||||||
|
<script src="js/echarts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main" style="width:800px;height:800px;"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '雷达图'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['Allocated Budget', 'Actual Spending']
|
||||||
|
},
|
||||||
|
radar: {
|
||||||
|
// shape: 'circle',
|
||||||
|
indicator: [
|
||||||
|
{name: 'Sales', max: 6500},
|
||||||
|
{name: 'Administration', max: 16000},
|
||||||
|
{name: 'Information Technology', max: 30000},
|
||||||
|
{name: 'Customer Support', max: 38000},
|
||||||
|
{name: 'Development', max: 52000},
|
||||||
|
{name: 'Marketing', max: 25000}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Budget vs spending',
|
||||||
|
type: 'radar',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||||
|
name: 'Allocated Budget'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||||
|
name: 'Actual Spending'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>饼图</title>
|
||||||
|
<script src="js/echarts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main" style="width:800px;height:800px;"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '饼图',
|
||||||
|
subtext: 'Fake Data',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: [
|
||||||
|
{value: 1048, name: 'Search Engine'},
|
||||||
|
{value: 735, name: 'Direct'},
|
||||||
|
{value: 580, name: 'Email'},
|
||||||
|
{value: 484, name: 'Union Ads'},
|
||||||
|
{value: 300, name: 'Video Ads'}
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user