简介
为了更好的理解Echarts
,把配置项看完是有必要的。但是看完了也不一定记得住,比如说我。一天看一些,当看完后觉得Echarts
好强大。然后除了觉得Echarts
强大外,其他的基本忘了。所以动手写一些DEMO
也是很有必要的。下面来了解一下如何在地图上使用Echarts
绘制飞线图。
引入 Api
<!-- 百度 -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=?"></script>
<!-- echarts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- 扩展地图插件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
开始使用
- 初始化 echarts。
var myChart = echarts.init(document.getElementById('bmap'))
// 飞机图形
var planePath =
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
- 创建配置项。
- 通过扩展插件加载百度地图,设置
coordinateSystem: 'bmap'
修改绘制时使用笛卡尔坐标,在地图上绘制图形。使用lines
绘制地图上的飞线,使用effectScatter
绘制城市点。
var option = {
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
if (params.seriesType == 'effectScatter') {
return '线路:' + params.data.name + '' + params.data.value[2]
} else if (params.seriesType == 'lines') {
return params.data.fromName + ' -> ' + params.data.toName + '<br />' + params.data.value
} else {
return params.name
}
}
},
bmap: {
center: [106.549238, 29.57553],
zoom: 6,
roam: true
},
series: [
{
name: '重庆' + ' Top3',
type: 'lines',
coordinateSystem: 'bmap',
zlevel: 2,
// symbol: ['none', 'arrow'],
effect: {
show: true,
period: 6,
trailLength: 0.1,
color: 'red', // arrow箭头的颜色
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 1,
curveness: 0.2
}
},
data: [
{
fromName: '重庆',
toName: '上海',
coords: [
[106.549238, 29.57553],
[121.480509, 31.23592]
],
value: 100
},
{
fromName: '上海',
toName: '北京',
coords: [
[121.480509, 31.23592],
[116.403039, 39.914023]
],
value: 100
}
]
},
{
name: '重庆' + ' Top3',
type: 'effectScatter',
coordinateSystem: 'bmap',
zlevel: 1,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8
},
itemStyle: {
normal: {
color: '#a6c84c'
},
emphasis: {
areaColor: '#2B91B7'
}
},
data: [
{ name: '重庆', value: [106.549238, 29.57553, 100] },
{ name: '上海', value: [121.480509, 31.23592, 100] },
{ name: '北京', value: [116.403039, 39.914023, 100] }
]
}
]
}
- 配置都是 echarts 中的。为了方便大家理解,下面详细讲讲使用到的配置。
tooltip
提示框组件。就是当鼠标移入绘制的图形上时展示的提示框。trigger
触发类型,根据类型判断在那个图形上触发事件。formatter
自定义提示框内容。bmap
百度地图扩展插件配置。center
地图中心点。zoom
地图层级。roam
是否开启拖拽缩放。series
图形数据。通过series
设置不同的类型,来绘制不同的统计图形。series``type='lines'
绘制路径图。通过起点和终点坐标绘制一条线。name
系列名称,用于tooltip
的显示。coordinateSystem
修改坐标类型为百度地图类型。zlevel
图层等级,值越大层级越高。effect
线特效的配置。series.show
是否显示特效。series.period
特效动画的时间,单位为 s。series.trailLength
特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。series.color
特效标记的颜色。series.symbol
标记样式,可以通过 ‘path://’ 将图标设置为任意的矢量路径。series.symbolSize
标记的大小。lineStyle
线样式设置。lineStyle.color
线颜色。lineStyle.width
线宽度。lineStyle.curveness
设置线为曲线,支持从 0 到 1 的数字,为 0 时不绘制该图形。data
数据集合。data.fromName
、data.toName
、data.value
自定义文本,在tooltip
中使用。data.coords
包含两个到多个二维坐标的数组。在polyline
设置为true
时支持多于两个的坐标,绘制多条线。series``type='effectScatter'
带有涟漪特效动画的散点(气泡)图。rippleEffect
涟漪特效配置,rippleEffect.brushType
波纹的绘制方式。label
图形边的文本配置,label.show
是否展示,label.position
标签的位置,label.formatter
自定义文本信息。symbolSize
标记的大小。itemStyle
图形样式。data
数据内容数组,dtat.name
自定义文本,dtat.value
表示具体的数值,这里使用的是百度扩展插件数据类型。
- 加载配置
myChart.setOption(option)