使用ECharts表达断面图

问题描述：

在海堤信息可视化系统建设过程中，需要展示某一里程桩号处，海堤和周边地貌（以及海平面）的海拔关系，此时就需要系统能够动态的生成一个横断面图来进行表达。

如果不需要十分复杂的表达样式，可以采用ECharts等图表可视化组件来实现

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

解决方法：

将横断面数据组织如下 

var data = [
　　[68.54,3.27,16,"堤下角"],
　　[73.38,5.58,17,"路边点"],
　　[75.00,5.59,18,"K30+944.91"],
　　[76.92,5.63,19,"涵闸下角"],
　　[77.09,6.51,20,"涵闸上角"],
　　[78.69,6.51,21,"涵闸上角"],
　　[78.69,2.20,22,"水涯线"]
];
///断面线节点按顺序存储，节点对象格式为[基点距,地面高程,点序号,点属性]

ECharts提供了丰富的定制功能

【鼠标提示】

tooltip: {
　　triggerOn: 'none',
　　formatter: function (params) {
　　　　return '基点距: ' + params.data[0].toFixed(2) + '米<br>地面高程: ' + params.data[1].toFixed(2) + '米<br>点属性: ' + params.data[3];
　　}
}

 【节点标注】

label: {
　　normal: {
　　　　show: true,
　　　　position: 'top',
　　　　formatter: function(params) {
　　　　　　return params.value[3];///标注对象数组中index为3的内容，即【点属性】
　　　　}
　　}
}

【辅助线】

markLine: {
　　itemStyle:{
　　　　normal:{
　　　　　　lineStyle:{type:'dashed', color:'#00f'},
　　　　　　label:{show:true, position:'top'}
　　　　}
　　},
　　large:true,
　　data: [[
　　　　{xAxis: [water_x], yAxis: [water_y]},{xAxis: [maxx], yAxis: [water_y]}///[water_x,water_y]即为辅助线起点，[maxx,water_y]为辅助线终点
　　]]
}    

配置后效果如下所示 ，结合后台数据动态生成以及html模板配置后，就能实现前端动态展示横断面图了。