构建可视化大屏：
构建布局：通过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 tooltiptype: '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>
