<script type="text/javascript">
var chart,dmdateZZ,jjsw,zgsw,dmLineName,jjMax,zgMax,stnm;
dmLineName = '#{heDaoBean.lineDmZZ}';//时间
dmdateZZ = #{heDaoBean.dmZZ};//断面图数据
jjsw = #{heDaoBean.wrz};//警戒水位线Y值
jjMax= #{heDaoBean.lenghtXZZ};//警戒水位线x值
zgsw = #{heDaoBean.obhtzMax};//最高水位线y值
zgMax= #{heDaoBean.lenghtXZZ};//最高水位线x值
stnm = '#{heDaoBean.stnm}';//河道水位站站名
$j(function($) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'duanmian'//此处与下面的div的id值对应
},
colors: [
'#333333',
'#FF6633',
'#FF0000'
],
title: {
text: '河流横断面验测成果'
},
xAxis: {
reversed : false,
labels: {
formatter: function() {
return this.value +'m';
},
style: {
color: '#89A54E'
}
},
title: {
text: '起点距'
}
},
yAxis: {
labels: {
formatter: function() {
return this.value +'m';
},
style: {
color: '#89A54E'
}
},
title: {
text: '河底高程'
}
},
plotOptions: {
line: {
lineWidth: 6,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: true,
states: {
hover: {
enabled: false,
radius: 5,
lineWidth: 1
}
}
}
},
areaspline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: false,
radius: 5,
lineWidth: 1
}
}
}
}
},
series: [{
type: 'areaspline',//断面图 标识
name: '断面图',
data: dmdateZZ //dmdateZZ的数据格式：[[0.0,500.0],[1.0,490.0],[4.0,400.0]]
}, {
type: 'line',//直线标识
name: '警戒水位',
data: [[0,jjsw],{
x:jjMax,
y: jjsw,
marker: {
enabled: true,
symbol: 'url(/static/common/images/icons/sum.gif)'
}
} ]
}, {
type: 'line',
name: '实测最高水位',
data: [[0,zgsw],{
x:zgMax,
y:zgsw,
marker: {
enabled: true,
symbol: 'url(/static/common/images/icons/sum.gif)'
}
} ]
},
{
name: dmLineName
},{
name: stnm
}]
});
});
</script>
<div align="center" id="duanmian" style="width: 100%; height: 320px; margin: 0 auto"></div>
界面显示效果图：
本文发布于:2024-02-04 09:47:24，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170704426854497.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
