Vue中显示echarts北京公交路线
一、实际展示二、准备工作（1）在项目中用vue创建一个用来显示线路的页面// 必须设置id,此id是用来加载echarts的，id的名字随便起<template><div id="mains" style="width:60%;height:300px;"></div></template>（2）安装echarts，并引入在显示页面// 安装echa
·
一、实际展示
二、准备工作
（1）在项目中用vue创建一个用来显示线路的页面
// 必须设置id,此id是用来加载echarts的，id的名字随便起
<template>
<div id="mains" style="width:60%;height:300px;"></div>
</template>
（2）安装echarts，并引入在显示页面
// 安装echarts
npm install echarts --save
// 显示页面引入echarts
import * as echarts from 'echarts'
（3）申请百度地图的ak
由于需要引用echarts中北京公交线路图，而echarts地图是百度地图的api,所以就需要获取百度地图api,就必须注册成为开发者，获取ak,主要步骤如下：
官网：http://lbsyun.baidu.com/
注册百度账号-登录
申请成为百度开发者
获取密钥：应用名称（任意取），应用类型：浏览器端，白名单：*，提交即可
复制AK
（4）在main.js中引入
// 引入ak
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '1HHc25235dvsL1GgVqHqaQuZT3ksaaadas', //这个地方是官方提供的ak密钥,需要自己在上一步中获取
})
（5）在显示页面注册获取map
// 获取map
require('echarts/extension/bmap/bmap')
import { loadBMap } from './getBmap' //这个是获取map的方法，在下面
// 获取map方法
export function loadBMap() {
return new Promise(function(resolve, reject) {
if (typeof BMap !== 'undefined') {
resolve(BMap)
return true
}
window.onBMapCallback = function() {
resolve(BMap)
}
let script = document.createElement('script')
script.type = 'text/javascript'
script.src =
'http://api.map.baidu.com/api?v=2.0&ak=' +
'**这个里面就是你在main.js中的ak,复制过来就行了**' +
'&__ec_v__=20190126&callback=onBMapCallback'
script.onerror = reject
document.head.appendChild(script)
})
}
（6）获取json 数据
// 获取json 数据
loadEcharts() {
this.$http({
path:
'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/lines-bus.json', //这个是获取json数据的地址，其实里面就是一些点坐标和颜色值
method: 'get',
}).then((data) => {
console.log(data)
let hStep = 300 / (data.length - 1)
this.busLines = [].concat.apply(
[],
data.map(function(busLine, idx) {
let prevPt = []
let points = []
for (let i = 0; i < busLine.length; i += 2) {
let pt = [busLine[i], busLine[i + 1]]
if (i > 0) {
pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
}
prevPt = pt
points.push([pt[0] / 1e4, pt[1] / 1e4])
}
return {
coords: points,
itemStyle: {
lineStyle: {
color: echarts.color.modifyHSL(
'#5A94DF',
Math.round(hStep * idx)
),
},
},
}
})
)
this.option.series.forEach((item) => {
item.data = this.busLines
})
})
},
（7）在生命周期mounted中渲染地图
// 渲染
mounted() {
this.loadEcharts()
loadBMap().then(() => {
this.myChart = echarts.init(document.getElementById('mains'))
this.myChart.setOption(this.option)
})
},
三、完整代码
// 完整代码
<template>
<div id="mains" style="width:60%;height:300px;"></div>
</template>
<script>
import * as echarts from 'echarts'
require('echarts/extension/bmap/bmap')
import { loadBMap } from './getBmap'
export default {
data() {
return {
busLines: [],
option: {
bmap: {
center: [116.46, 39.92],
zoom: 10,
roam: true,
mapStyle: {
styleJson: [
{
featureType: 'water',
elementType: 'all',
stylers: {
color: '#031628',
},
},
{
featureType: 'land',
elementType: 'geometry',
stylers: {
color: '#000102',
},
},
{
featureType: 'highway',
elementType: 'all',
stylers: {
visibility: 'off',
},
},
{
featureType: 'arterial',
elementType: 'geometry.fill',
stylers: {
color: '#000000',
},
},
{
featureType: 'arterial',
elementType: 'geometry.stroke',
stylers: {
color: '#0b3d51',
},
},
{
featureType: 'local',
elementType: 'geometry',
stylers: {
color: '#000000',
},
},
{
featureType: 'railway',
elementType: 'geometry.fill',
stylers: {
color: '#000000',
},
},
{
featureType: 'railway',
elementType: 'geometry.stroke',
stylers: {
color: '#08304b',
},
},
{
featureType: 'subway',
elementType: 'geometry',
stylers: {
lightness: -70,
},
},
{
featureType: 'building',
elementType: 'geometry.fill',
stylers: {
color: '#000000',
},
},
{
featureType: 'all',
elementType: 'labels.text.fill',
stylers: {
color: '#857f7f',
},
},
{
featureType: 'all',
elementType: 'labels.text.stroke',
stylers: {
color: '#000000',
},
},
{
featureType: 'building',
elementType: 'geometry',
stylers: {
color: '#022338',
},
},
{
featureType: 'green',
elementType: 'geometry',
stylers: {
color: '#062032',
},
},
{
featureType: 'boundary',
elementType: 'all',
stylers: {
color: '#465b6c',
},
},
{
featureType: 'manmade',
elementType: 'all',
stylers: {
color: '#022338',
},
},
{
featureType: 'label',
elementType: 'all',
stylers: {
visibility: 'off',
},
},
],
},
},
series: [
{
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: this.busLines,
silent: true,
lineStyle: {
// color: '#c23531',
// color: 'rgb(200, 35, 45)',
opacity: 0.2,
width: 1,
},
progressiveThreshold: 500,
progressive: 200,
},
{
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: this.busLines,
lineStyle: {
width: 0,
},
effect: {
constantSpeed: 20,
show: true,
trailLength: 0.1,
symbolSize: 1.5,
},
zlevel: 1,
},
],
},
}
},
mounted() {
this.loadEcharts()
loadBMap().then(() => {
this.myChart = echarts.init(document.getElementById('mains'))
this.myChart.setOption(this.option)
})
},
created() {
// this.loadEcharts()
},
methods: {
loadEcharts() {
this.$http({
path:
'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/lines-bus.json',
method: 'get',
}).then((data) => {
console.log(data)
let hStep = 300 / (data.length - 1)
this.busLines = [].concat.apply(
[],
data.map(function(busLine, idx) {
let prevPt = []
let points = []
for (let i = 0; i < busLine.length; i += 2) {
let pt = [busLine[i], busLine[i + 1]]
if (i > 0) {
pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
}
prevPt = pt
points.push([pt[0] / 1e4, pt[1] / 1e4])
}
return {
coords: points,
itemStyle: {
lineStyle: {
color: echarts.color.modifyHSL(
'#5A94DF',
Math.round(hStep * idx)
),
},
},
}
})
)
this.option.series.forEach((item) => {
item.data = this.busLines
})
})
},
},
}
</script>
<style></style>
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献5条内容
所有评论(0)