?<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>
?
界面显示效果图：
?
?
?