【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”
@小q蹲街 你好,想跟你请教个问题:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<style>
.button{
float:left;
width:50px;
height:20px;
color:#CC3333;
border:2px solid #CC3333;
background-color:#3399CC;
line-heigh:20px;
text-align:center;
font-size:20px;
}
.button:hover{
float:left;
width:50px;
height:20px;
color:#3399CC;
border:2px solid #3399CC;
background-color:#CC3333;
line-height:20px;
text-align:center;
font-size:10px;
}
.chart{
margin:0 auto;
}
#but{
width:10px;
margin:0 auto;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<div>
<div class="chart" id="container" style="width:500px;height:300px"></div>
<input type="button" id="tobig" value="放大">
</div>
<div class="chart" id="newdiv" style="width:1500px;height:600px;z-index:10; position:absolute";background:#ccc ></div>
<script type="text/javascript">
require.config({
paths : {
echarts : './js' // 将./js 这个路径用echarts代替
}
});
require(
[
'echarts',
'echarts/chart/bar', //相当于路径 ./js/chart/bar
'echarts/chart/line'
],
//开始创建Echarts图表方法
function(ec) {
//基于准备好的dom,初始化echart图表
var dom = document.getElementById("container");
var myChart = ec.init(dom);
var option = {
tooltip : { //鼠标悬浮框
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend : { //图例
data : [],
itemGap :5, //各个item之间的间隔
itemWidth:10, //图例图形宽度
itemHeight:5 //图例图形宽度
},
toolbox : {
show : true, //显示策略
feature : {
dataZoom:{
show:true,
title:{
dataZoom:'区域缩放',
dataZoomReset:'区域缩放后退'
}
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar']
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true, //是否启用拖拽重计算特性,默认关闭
grid : { ////直角坐标系内绘图网格
y : 70,
y2 : 30,
x2 : 20
},
xAxis : [
{
type:'',
data:[]
}
],
yAxis : [ {
type : 'value'
} ],
series: []
};
$(function(){
$.ajax({
type:'post',
url:'<%=path%>/testAction.action',
dataType:'json',
async:false,
success:function(result){
if(result){
//将从后台接收的json字符串转换成json对象
var jsonobj = eval(result);
//给图标标题赋值
option.legend.data = jsonobj[0].legend;
//读取横坐标值
option.xAxis[0].data = jsonobj[0].axis.data;
option.xAxis[0].type = jsonobj[0].axis.type;
var series_arr = jsonobj[0].seriesList;
//驱动图表生成的数据内容,数组中每一项代表一个系列的特殊选项及数据
for(var i = 0; i < series_arr.length; i++) {
option.series[i] = jsonobj[0].seriesList[i];
}
//过渡控制,隐藏loading(读取中)
myChart.hideLoading();
// 为echarts对象加载数据
myChart.setOption(option);
//ec.init(document.getElementById("container")).clear();//清楚画布的内容
}
}
});
});
});
</script>
<script type="text/javascript">
var anniu=document.getElementById("tobig");
anniu.onclick=function(){
require.config({
paths : {
echarts : './js' // 将./js 这个路径用echarts代替
}
});
require(
[
'echarts',
'echarts/chart/bar', //相当于路径 ./js/chart/bar
'echarts/chart/line'
],
//开始创建Echarts图表方法
function(ec1) {
//基于准备好的dom,初始化echart图表
var dom1 = document.getElementById("newdiv");
var myChart1 = ec1.init(dom1);
var option1 = {
ooltip : { //鼠标悬浮框
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend : { //图例
data : [],
itemGap :5, //各个item之间的间隔
itemWidth:10, //图例图形宽度
itemHeight:5 //图例图形宽度
},
toolbox : {
show : true, //显示策略
feature : {
dataZoom:{
show:true,
title:{
dataZoom:'区域缩放',
dataZoomReset:'区域缩放后退'
}
},
/* mark : { //辅助线开关
show : true
}, */
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar']
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true, //是否启用拖拽重计算特性,默认关闭
grid : { ////直角坐标系内绘图网格
y : 70,
y2 : 30,
x2 : 20
},
xAxis : [
{
type:'',
data:[]
}
],
yAxis : [ {
type : 'value'
} ],
series: []
};
$(function(){
$.ajax({
type:'post',
url:'<%=path%>/testAction.action',
dataType:'json',
async:false,
success:function(result){
alert("into new function ec3");
if(result){
//将从后台接收的json字符串转换成json对象
var jsonobj = eval(result);
//给图标标题赋值
option.legend.data = jsonobj[0].legend;
//读取横坐标值
option.xAxis[0].data = jsonobj[0].axis.data;
option.xAxis[0].type = jsonobj[0].axis.type;
var series_arr = jsonobj[0].seriesList;
//驱动图表生成的数据内容,数组中每一项代表一个系列的特殊选项及数据
for(var i = 0; i < series_arr.length; i++) {
option.series[i] = jsonobj[0].seriesList[i];
}
//过渡控制,隐藏loading(读取中)
myChart.hideLoading();
// 为echarts对象加载数据
myChart.setOption(option1);
}
}
});
});
});
}
</script>
</body>
</html>
不懂asp页面,你把div 的 z-index 属性调的高一点就会有最上层的弹出层效果了