构建可视化大屏：
构建布局：通过css和html对整个页面进行模块拆分，控制好每一张图的位置和大小，再将echarts实例化对象放到不同的盒子里
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>大屏可视化</title>
<style>
.box{
width:30%;
height: 45%;
position: absolute;
top: 10%;
left: 0;
/* background-color:aqua; */
}
.ss{
width: 30%;
height: 45%;
position: absolute;
top: 55%;
left: 0;
/* background-color: aquamarine; */
}
body{
background-color:rgb(152, 170, 223)
}
.sl{
width: 25%;
height: 45%;
position: absolute;
top: 10%;
right: 0;
margin-right: 40px;
/* background: #000; */
}
.ye{
width: 30%;
height: 45%;
position: absolute;
top: 55%;
right: 0;
/* background: red; */
}
.xhz{
/* background-image: url(./tupian/微信图片_20231123095915.png); */
width: 40%;
height:10%;
position: absolute;
top: 0;
left: 0;
margin: auto;
margin-left: 600px;
}
.zj{
width: 40%;
height: 90%;
top: 10%;
left: 30%;
right: 30%;
position:absolute;
/* background-color: aqua; */
}
</style>
<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<span class="xhz"><h1>Echarts数据分析</h1></span>
<!-- 2.准备具有大小的DOM容器 -->
<div class="box">box</div>
<div class="ss">ss</div>
<div class="zj"></div>
<div class="sl"></div>
<div class="ye"></div>
<script>
var myCharts = echarts.init(document.querySelector('.ss'))
var option = {
// legend: {
// top: 'bottom'
// },
// toolbox: {
// show: true,
// feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [30, 150],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: '数据1' },
{ value: 38, name: '数据2' },
{ value: 32, name: '数据3' },
{ value: 30, name: '数据4' },
{ value: 28, name: '数据5' },
{ value: 26, name: '数据6' },
{ value: 22, name: '数据7' },
{ value: 18, name: '数据8' }
]
}
]
};
myCharts.setOption(option)
var box_echarts= echarts.init(document.querySelector('.sl'))
var option = {
title: {
// text: 'Stacked Area Chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['鞋子', '帽子', '衬衫', '裤子', '棉衣']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '鞋子',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '帽子',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '衬衫',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '裤子',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '棉衣',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
box_echarts.setOption(option)
var sl_echarts=echarts.init(document.querySelector('.box'))
option = {
// backgroundColor: '#2c343c',
title: {
text: '大数据 Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: 'hadoop' },
{ value: 310, name: 'spark' },
{ value: 274, name: 'zookeeper' },
{ value: 235, name: 'flume' },
{ value: 400, name: 'flink' }
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
// animationDelay: function (idx) {
// return Math.random() * 200;
// }
}
]
};
sl_echarts.setOption(option)
var ye_echarts=echarts.init(document.querySelector('.ye'))
var option = {
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'
}
]
};
ye_echarts.setOption(option)
var zj_echarts= echarts.init(document.querySelector('.zj'))
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['spark', 'hadoop', 'zookeeper', 'flume', 'hive', 'sqoop', 'flink']
},
series: [
{
name: 'spark',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: 'hadoop',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'zookeeper',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'flume',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: 'hive',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
zj_echarts.setOption(option)
</script>
</body>
</html>
