html实现点击弹窗效果

躺平的乐子人

已于 2023-05-15 17:01:07 修改

阅读量2.1k

点赞数

分类专栏：前端 JavaScript 文章标签： echarts html javascript

于 2023-05-08 09:27:45 首次发布

本文链接：https://blog.csdn.net/weixin_73368873/article/details/130552186

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

目的

实现一个echarts图点击弹窗弹出的效果，实现点击后，新的弹窗的图表居于最前。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts.js"></script>
		<style>
			.chart-close-btn {
			  position: absolute;
			  top: 0;
			  right: 0;
			  width: 30px;
			  height: 30px;
			  background-image: url(close-icon.png); // 設置關閉圖標
			  background-repeat: no-repeat;
			  background-position: center;
			  cursor: pointer;
			}
			.close {
			  color: #aaa;
			  float: right;
			  font-size: 28px;
			  font-weight: bold;
			}
			.close {
			  color: #aaaaaa;
			  float: right;
			  font-size: 28px;
			  font-weight: bold;
			  top:-300px;
			  position: relative;
			  right:250px;
			}
			
			.close:hover,
			.close:focus {
			  color: #000000;
			  text-decoration: none;
			  cursor: pointer;
			}

	
			
		

		</style>
	
	</head>
	<body>
		<!-- 在这里放置一个 div 元素作为容器（必须指定宽度和高度） -->
		<div id="chart" style="width: 600px; height: 400px;"></div>
		
		 
			
			<div id="main">
				 <span class="close">&times;</span>
				 <div id="chart2" style="width: 800px; height: 400px;"></div>
			</div>
	
	
	
			
		
		<script>
			
			var option = {
				 backgroundColor: '#fff',// 將圖表背景色設置為不透明的白色
			    xAxis: {
			        type: 'category',
			        data: ['Apple', 'Banana', 'Orange', 'Grape', 'Kiwi', 'Apricot']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: [20, 50, 30, 80, 45, 70],
			        type: 'bar',
			        itemStyle: {
			            // 注意：沒有 hover 样式时保证 normal 样式存在，否则会出现 tooltip 显示不正常的问题
			            emphasis: {
			                barBorderWidth: 1,
			                shadowBlur: 10,
			                shadowOffsetX: 0,
			                shadowOffsetY: 0,
			                shadowColor: 'rgba(0,0,0,0.5)'
			            },
			            normal: {
			                color: function (params) {
			                    var colorList = [
			                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
			                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
			                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
			                    ];
			                    return colorList[params.dataIndex]
			                }
			            }
			        }
			    }],
			    tooltip: {
			        trigger: 'axis',  // 指定觸發類型，這裏指定為數軸類型
			        axisPointer: {    
			            type: 'shadow' // 顯示陰影線，表示數值區間對應柱子的數值范圍
			        }
			    }
			};
			// 使用 ECharts 绘制图表
			var chartDom = document.getElementById('chart');
			var chartDom2 = document.getElementById('chart2');
			// 設置絕對定位位置
			chartDom2.style.position = 'absolute';
			chartDom2.style.top = '100px';    // 距離頂部 100 像素
			chartDom2.style.left = '200px';   // 距離左側 200 像素
			
			var myChart = echarts.init(chartDom);
			myChart.setOption(option);
			var myChart2 = echarts.init(chartDom2);
			myChart2.setOption(option);
			var main = document.getElementById('main');
			main.style.display = "none";
			chartDom.addEventListener('click', function() {
                console.log('您單擊了 div 元素！');
               
			    //chartDom.style.display = "none";
				//chartDom2.style.display = "block";
				main.style.display = "block";
				
});
        
        var span = document.getElementsByClassName("close")[0];
		// 當用戶點擊關閉按鈕時，關閉彈窗
		span.onclick = function() {
		console.log("觸發關閉事件")
		 main.style.display = "none"
		}
            
		
		</script>
	</body>
</html>