目的
实现一个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">×</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>
