百度地图+timelineecharts lines配置项内容和展示
配置项如下
var data1 = ['223路', [{
coords: [
[
113.2995201108627,
23.221413140356834
],
[
113.29582971096352,
23.21505553285868
],
[
113.29438405283103,
23.20997739889275
],
[
113.29324179541487,
23.205024244001375
],
[
113.28962716330193,
23.19866661337607
],
[
113.28626819222168,
23.191223629851176
],
[
113.28461471125419,
23.186530124546717
],
[
113.28259664463053,
23.18132527284383
],
[
113.28322143960612,
23.172342859180212
],
[
113.2860965059622,
23.1687849736685
],
[
113.29645480613651,
23.160548792387395
],
[
113.30113158269069,
23.160351500410613
],
[
113.30538847710241,
23.16026765384739
],
[
113.30743674880668,
23.157155845747386
],
[
113.30760158313778,
23.15032120018528
],
[
113.3052073359683,
23.146642500089143
],
[
113.30420476584936,
23.138198230403027
],
[
113.30279333449712,
23.133737268241056
],
[
113.2994336471131,
23.130874803912967
],
[
113.29470940821163,
23.13221368587195
],
[
113.29188162454136,
23.126468302729474
],
[
113.28926619217448,
23.124974866468975
]
]
}]];
var data2 = ['775路', [{
coords: [
[113.36807158303164, 23.221034989530096],
[113.36797656685397, 23.21551065648359],
[113.36957000625262, 23.214120762006083],
[113.37230903252089, 23.207813712632646],
[113.37125066278625, 23.205086376319326],
[113.37177432916636, 23.200311506900775],
[113.37254799265192, 23.198805645695636],
[113.37156663695005, 23.195811060811412],
[113.36918531298123, 23.191947254931506],
[113.36643898785238, 23.18993633137924],
[113.3630109079541, 23.188703612145858],
[113.35573297358201, 23.184260292335352],
[113.35640977690343, 23.184227252232258],
[113.36556352476174, 23.18365200626791],
[113.36806680021736, 23.179673072175024],
[113.36561079841336, 23.17824673916869],
[113.36447402510039, 23.174832983938373],
[113.36787125108081, 23.173411236295014],
[113.3702070438406, 23.16087800702771],
[113.35951301325824, 23.158130346417483],
[113.35575223464622, 23.15626656788378],
[113.3503452277098, 23.146510946462307],
[113.3521420200354, 23.14620860944061],
[113.3545097439042, 23.15409347932672]
]
}]]
var datapoint1 = [{
"value": [
113.2995201108627,
23.221413140356834
],
"name": "白云花园总站"
},
{
"value": [
113.29582971096352,
23.21505553285868
],
"name": "陈田村站"
},
{
"value": [
113.29438405283103,
23.20997739889275
],
"name": "黄石东路口站1"
},
{
"value": [
113.29324179541487,
23.205024244001375
],
"name": "广外（白云山西门）站2"
},
{
"value": [
113.28962716330193,
23.19866661337607
],
"name": "白云大道（齐富路口）站"
},
{
"value": [
113.28626819222168,
23.191223629851176
],
"name": "白云国际会议中心站"
},
{
"value": [
113.28461471125419,
23.186530124546717
],
"name": "广州体育馆站"
},
{
"value": [
113.28259664463053,
23.18132527284383
],
"name": "白云大道南（金信路口）站"
},
{
"value": [
113.28322143960612,
23.172342859180212
],
"name": "柯子岭牌坊站2"
},
{
"value": [
113.2860965059622,
23.1687849736685
],
"name": "大金钟路站1"
},
{
"value": [
113.29645480613651,
23.160548792387395
],
"name": "白云山管理局站1"
},
{
"value": [
113.30113158269069,
23.160351500410613
],
"name": "白云索道站"
},
{
"value": [
113.30538847710241,
23.16026765384739
],
"name": "金贵村站2"
},
{
"value": [
113.30743674880668,
23.157155845747386
],
"name": "西坑站"
},
{
"value": [
113.30760158313778,
23.15032120018528
],
"name": "永福路站"
},
{
"value": [
113.3052073359683,
23.146642500089143
],
"name": "黄花岗站1"
},
{
"value": [
113.30420476584936,
23.138198230403027
],
"name": "犀牛路口站2"
},
{
"value": [
113.30279333449712,
23.133737268241056
],
"name": "农林下路（广药附属一院）站"
},
{
"value": [
113.2994336471131,
23.130874803912967
],
"name": "东山口站"
},
{
"value": [
113.29470940821163,
23.13221368587195
],
"name": "中山医站3"
},
{
"value": [
113.29188162454136,
23.126468302729474
],
"name": "白云路东站1"
},
{
"value": [
113.28926619217448,
23.124974866468975
],
"name": "白云路总站3"
}
]
var datapoint2 = [{
"value": [113.36807158303164, 23.221034989530096],
"name": "龙洞（龙逸山庄）总站"
},
{
"value": [113.36797656685397, 23.21551065648359],
"name": "兆联工业区站"
},
{
"value": [113.36957000625262, 23.214120762006083],
"name": "迎龙路北站"
},
{
"value": [113.37230903252089, 23.207813712632646],
"name": "龙眼洞森林公园站"
},
{
"value": [113.37125066278625, 23.205086376319326],
"name": "迎龙路（迎新路口）站"
},
{
"value": [113.37177432916636, 23.200311506900775],
"name": "迎龙路站2"
},
{
"value": [113.37254799265192, 23.198805645695636],
"name": "龙洞路口站"
},
{
"value": [113.37156663695005, 23.195811060811412],
"name": "地铁植物园（世纪绿洲）站"
},
{
"value": [113.36918531298123, 23.191947254931506],
"name": "植物园正门站"
},
{
"value": [113.36643898785238, 23.18993633137924],
"name": "三宝墟站"
},
{
"value": [113.3630109079541, 23.188703612145858],
"name": "科学院站"
},
{
"value": [113.35573297358201, 23.184260292335352],
"name": "地铁长湴站"
},
{
"value": [113.35640977690343, 23.184227252232258],
"name": "射击场站"
},
{
"value": [113.36556352476174, 23.18365200626791],
"name": "植物园西门站"
},
{
"value": [113.36806680021736, 23.179673072175024],
"name": "中科院化学所站"
},
{
"value": [113.36561079841336, 23.17824673916869],
"name": "华南植物园南门站"
},
{
"value": [113.36447402510039, 23.174832983938373],
"name": "乐意居站"
},
{
"value": [113.36787125108081, 23.173411236295014],
"name": "长兴路东站"
},
{
"value": [113.3702070438406, 23.16087800702771],
"name": "五山学生公寓站"
},
{
"value": [113.35951301325824, 23.158130346417483],
"name": "华农大正门站"
},
{
"value": [113.35575223464622, 23.15626656788378],
"name": "华工大站"
},
{
"value": [113.3503452277098, 23.146510946462307],
"name": "五山路口站2"
},
{
"value": [113.3521420200354, 23.14620860944061],
"name": "师大后门站1"
},
{
"value": [113.3545097439042, 23.15409347932672],
"name": "华工大总站"
}
]
myChart.setOption({
baseOption: {
animation: false,
bmap: {
center: [113.27751, 23.1213117],
zoom: 14,
roam: true,
mapStyle: {
styleJson: [{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 10,
"saturation": -100
}
}, {
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}]
}
},
tooltip: {},
timeline: {
axisType: 'category',
orient: 'vertical',
autoPlay: false,
inverse: true,
playInterval: 1000,
left: null,
right: 0,
top: 20,
bottom: 20,
width: 55,
height: null,
label: {
normal: {
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbol: 'none',
lineStyle: {
color: '#555'
},
data: ['7:00', '8:00']
},
series: []
},
options: [{
series: [{
type: 'lines',
coordinateSystem: 'bmap',
data: data1[1],
polyline: 'false',
name: data1[0],
lineStyle: {
normal: {
width: 6,
opacity: 1,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 3
},
emphasis: {
color: '#f6fd40'
}
}
}, {
type: 'scatter',
coordinateSystem: 'bmap',
symbolSize: [10, 5],
silent: true,
tooltip: {
show: true
},
label: {
normal: {
textStyle: {
fontWeight: 'bold',
color: 'red'
},
show: true,
position: 'right',
formatter: '{b}'
}
},
itemStyle: {
normal: {
color: 'black',
borderWidth: 1,
borderColor: '#fff'
}
},
data: datapoint1
}]
}, {
series: [{
type: 'lines',
coordinateSystem: 'bmap',
data: data2[1],
polyline: 'false',
name: data1[0],
lineStyle: {
normal: {
width: 6,
opacity: 1,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 3
},
emphasis: {
color: '#f6fd40'
}
}
}, {
type: 'scatter',
coordinateSystem: 'bmap',
symbolSize: [10, 5],
silent: true,
tooltip: {
show: true
},
label: {
normal: {
textStyle: {
fontWeight: 'bold',
color: 'red'
},
show: true,
position: 'right',
formatter: '{b}'
}
},
itemStyle: {
normal: {
color: 'black',
borderWidth: 1,
borderColor: '#fff'
}
},
data: datapoint2
}]
}]
});
截图如下
