<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>
</head>
<body>
<noscript>
<strong>We‘re sorry but <%= htmlWebpackPlugin.options.title %> doesn‘t work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<v-charts :options="options"></v-charts>
</template>
<script>
import ‘echarts/extension/bmap/bmap‘;
const testPoint = [{
name:‘澳门‘,
value:[121.15,31.89,80]
},{
name:‘南京‘,
value:[118.78,32.04,100]
},{
name:‘北京‘,
value:[116.404269,39.913385,200]
},{
name:‘上海‘,
value:[121.475941,31.222836,195]
}]
export default {
data(){
return {
options:{
}
}
},
mounted(){
this.options = {
title:{
text:‘外卖销售数据大盘‘,
subtext: ‘销售趋势统计‘,
sublink:‘https://www.baidu.com‘,
left:‘center‘
},
bmap: {
key: ‘G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb‘,
center: [104.114129, 37.550339],
zoom: 5,
roam: true, // 不允许缩放
// mapStyle: {}
},
tooltip:{},
series:[{
name:‘销售额‘,
type:‘scatter‘,
coordinateSystem:‘bmap‘,
data: testPoint,
encode:{
value:2
},
// 设置圆点颜色
itemStyle:{
color:‘#5082ff‘
},
// 设置点的大小
symbolSize: function(val){
return val[2]/10;
},
// 设置显示 字体
label:{
show: false, // 设置隐藏
position:‘right‘,
formatter: function(v){
return `${v.data.name} - ${v.data.value[2]}`
}
},
// 鼠标经过 文字显示
emphasis:{
label:{
show: true
}
}
}]
}
}
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100% !important;
height: 600px !important;
}
</style>
