本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制三维折线图与之前绘制的二维路径图类似：
-
首先，需要将
series中的type设置为"lines3D"； -
其次就是要确保符合ECharts要求的数据形式，需要注意的是我们加载的三维地图数据来源为mapbox，其坐标系为WGS84，因此需要将原始公交线路数据的百度坐标转换为WGS84坐标。
代码如下所示：
$.getJSON('data_wgs84.json', function(data) {
// 设置图表的参数
var option = {
maptalks3D: {
center: [116.46, 39.92], // 地图中心点坐标
zoom: 10, // 缩放等级缩放等级
pitch: 50, // 视角俯视的倾斜角度。默认为0，也就是垂直于地图表面。最大的值是60
bearing: 30, // 地图的旋转角度
// 绑定URL模板
urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
altitudeScale: 1, // 海拔的缩放,默认为1
// 后处理特效的相关配置。
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果,可以让整个画面更富有质感。
postEffect: {
enable: true,
FXAA: {
enable: true
}
},
// 光照相关的设置
light: {
// 场景主光源的设置
main: {
intensity: 1, // 主光源的强度
shadow: true, // 主光源是否投射阴影。默认为关闭
shadowQuality: 'high' // 阴影的质量。可选'low', 'medium', 'high', 'ultra'
},
// 全局的环境光设置
ambient: {
intensity: 0.2 // 环境光的强度
},
}
},
title: {
text: "北京公交线路图",
left: "center",
textStyle: { color: "#fff", fontSize: 20 },
subtext: "数据来源：ECharts官方示例",
subtextStyle:{color:"#fff"},
left: "center"
},
// 图例
legend: {},
// 数据系列
series: [{
type: 'lines3D',
coordinateSystem: 'maptalks3D', // 该系列使用的坐标系
data: data,
polyline: true, // 是否是多段线
}],
};
// 使用指定的配置项和数据显示图表
myChart.setOption(option);
})
$.getJSON('data_wgs84.json', function(data) {
// 设置图表的参数
var option = {
maptalks3D: {
center: [116.46, 39.92], // 地图中心点坐标
zoom: 10, // 缩放等级缩放等级
pitch: 50, // 视角俯视的倾斜角度。默认为0，也就是垂直于地图表面。最大的值是60
bearing: 30, // 地图的旋转角度
// 绑定URL模板
urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
altitudeScale: 1, // 海拔的缩放,默认为1
// 后处理特效的相关配置。
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果,可以让整个画面更富有质感。
postEffect: {
enable: true,
FXAA: {
enable: true
}
},
// 光照相关的设置
light: {
// 场景主光源的设置
main: {
intensity: 1, // 主光源的强度
shadow: true, // 主光源是否投射阴影。默认为关闭
shadowQuality: 'high' // 阴影的质量。可选'low', 'medium', 'high', 'ultra'
},
// 全局的环境光设置
ambient: {
intensity: 0.2 // 环境光的强度
},
}
},
title: {
text: "北京公交线路图",
left: "center",
textStyle: { color: "#fff", fontSize: 20 },
subtext: "数据来源：ECharts官方示例",
subtextStyle:{color:"#fff"},
left: "center"
},
// 图例
legend: {},
// 数据系列
series: [{
type: 'lines3D',
coordinateSystem: 'maptalks3D', // 该系列使用的坐标系
data: data,
polyline: true, // 是否是多段线
// 混合模式，目前支持'source-over'，'lighter'，
// 默认使用的'source-over'是通过 alpha 混合，
// 而'lighter'是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。
blendMode: 'lighter',
// 飞线的尾迹特效
effect: {
show: true,
constantSpeed: 5, // 轨迹特效的移动动画是否是固定速度
trailWidth: 2, // 尾迹的宽度
trailLength: 0.8, // 尾迹的长度，范围从 0 到 1，为线条长度的百分比
trailOpacity: 1, // 尾迹的不透明度，默认跟线条不透明度相同
// spotIntensity: 10 // 光源强度
},
// 飞线的线条样式
lineStyle: {
width: 0.5, // 线条的宽度
color: 'rgb(200, 40, 0)', // 线条的颜色
opacity: 0. // 线条的不透明度
}
}],
};
// 使用指定的配置项和数据显示图表
myChart.setOption(option);
})
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
