效果图:
地图是2d的,加了阴影有种3d地图的感觉。代码如下:
全部代码
<template>
<div class="content">
<div ref="charts" style="width: 100%; height: 80vh"></div>
</div>
</template>
<script>
function test(num){
let count = 0;
if( !num ){
return 1
}else{
while(num != 0) {
count++; //统计位数;
num = parseInt(num/10); //赋值给 num 以备下次循环使用;
}
return count
}
}
var points = [
{name:'丽水市南明湖',value:[119.923691,28.434421,120],itemStyle:{color:'rgb(239,221,49)'}},
{name:'丽水市高铁站',value:[119.953388,28.441793,1200],itemStyle:{color:'rgb(226,148,66)'}},
{name:'丽水市白云国家森林公园',value:[119.917785,28.497991,160],itemStyle:{color:'rgb(239,221,49)'}},
{name:'处州府城',value:[119.91875,28.437695,120],itemStyle:{color:'rgb(239,221,49)'}},
{name:'九龙国家湿地公园',value:[119.819104,28.367558,120],itemStyle:{color:'rgb(239,221,49)'}},
{name:'箬寮原始林景区',value:[119.29192,28.297614,120],itemStyle:{color:'rgb(239,221,49)'}},
{name:'双童山景区',value:[119.487821,28.410143,120],itemStyle:{color:'rgb(239,221,49)'}},
{name:'大木山茶园景区',value:[119.377139,28.5254,120],itemStyle:{color:'rgb(239,221,49)'}},
{name:'松阴溪景区',value:[119.47587,28.440384,120],itemStyle:{color:'rgb(239,221,49)'}},
{name:'宝溪',value:[118.77541,28.032403,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'住龙',value:[118.90023,28.17522,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'青瓷小镇',value:[118.848847,27.931823,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'百山祖国家公园·龙泉山景区',value:[119.093471,27.994061,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'遂昌金矿国家矿山公园',value:[119.428491,28.619012,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'遂昌南尖岩景区',value:[119.083804,28.339892,1200],itemStyle:{color:'rgb(226,148,66)'}},
{name:'遂昌神龙谷景区',value:[119.140524,28.34905,1200],itemStyle:{color:'rgb(226,148,66)'}},
{name:'遂昌千佛山景区',value:[119.023469,28.456701,1200],itemStyle:{color:'rgb(226,148,66)'}},
{name:'仙都景区',value:[120.132571,28.691502,1200],itemStyle:{color:'rgb(226,148,66)'}},
{name:'黄龙山景区',value:[120.068089,28.707576,1200],itemStyle:{color:'rgb(226,148,66)'}},
{name:'河阳古民居景区',value:[120.007947,28.724553,1200],itemStyle:{color:'rgb(226,148,66)'}},
{name:'中国石雕文化旅游区',value:[120.325222,28.065488,1200],itemStyle:{color:'rgb(226,148,66)'}},
{name:'石门洞4A级景区',value:[120.111999,28.276767,12000],itemStyle:{color:'rgb(213,62,82)'}},
{name:'百山祖4A级景区',value:[119.20169,27.74802,12000],itemStyle:{color:'rgb(213,62,82)'}},
{name:'巾子峰4A级景区',value:[118.997971,27.656742,12000],itemStyle:{color:'rgb(213,62,82)'}},
{name:'中国畲乡之窗4A景区',value:[119.570456,27.939503,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'云中大漈4A级景区',value:[119.617272,27.800866,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'东西岩景区',value:[119.717997,28.523882,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'古堰画乡景区',value:[119.739248,28.298502,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'云和梯田景区',value:[119.476577,28.044554,12],itemStyle:{color:'rgb(73,213,194)'}},
{name:'云和湖仙宫景区',value:[119.521689,28.208425,12],itemStyle:{color:'rgb(73,213,194)'}},
]
import lishui from "@/assets/geo/lishui.json"
export default {
data() {
return {
points,
name:'',
test
}
},
created () {
this.$nextTick(() => {
this.initCharts();
})
},
methods: {
initCharts() {
const myChart = this.$echarts.init(this.$refs["charts"]);
// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画,在数据加载完成后调用 hideLoading 隐藏加载动画。
// 图表配置项
var option = {
visualMap: {
min: 0,
max: 10000,
left: 10,
bottom: 15,
showLabel: !0,
padding:8,
// text: ["高", "低"],
pieces: [
{
gte: 0,
lte: 50,
label: "舒适",
color: "#1DE9B6",
},
{
gte: 50,
lte: 100,
label: "适中",
color: "#ebde41",
},
{
gte: 100,
lte: 200,
label: "拥挤",
color: "#db9649",
},
{
gte: 200,
lte: 300,
label: "预警",
color: "#cd4554",
},
],
show: !0,
textStyle: {
color: "#ffffff",
},
backgroundColor:'#172b63'
},
tooltip : {
trigger: 'item'
},
geo: {
map: 'lishui',
aspectScale: 1.1, //长宽比
zoom: 1.1,
roam: false,
itemStyle: {
normal: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#09132c' // 0% 处的颜色
}, {
offset: 1,
color: '#274d68' // 100% 处的颜色
}],
globalCoord: true // 缺省为 false
},
shadowColor:'rgb(58,115,192)',
shadowOffsetX: 5,
shadowOffsetY: 5,
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'green',
label: {
show: false
}
}
},
},
series: [
{
type: "map",
aspectScale: 1.1, //长宽比
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
tooltip : {
show:false,
trigger: 'item'
},
itemStyle: {
normal: {
borderColor: 'rgb(147, 235, 248)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#09132c' // 0% 处的颜色
}, {
offset: 1,
color: '#274d68' // 100% 处的颜色
}],
globalCoord: true // 缺省为 false
},
},
emphasis: {
areaColor: '#6c9ebf',
borderWidth: 0.1
}
},
zoom: 1.1,
map: 'lishui' //使用
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel:1,
rippleEffect: {
period: 15,
scale: 3,
brushType: 'fill'
},
hoverAnimation: true,
label: {
normal: {
show:false,
formatter: '{b}',
position: 'right',
offset: [15, 0],
color: '#1DE9B6',
textStyle: {
color: "#fff",
},
},
},
selectedMode: false,
tooltip: {
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: "#000",
decoration: "none",
},
formatter: function (params) {
console.log(params);
var tipHtml = "";
tipHtml =`
<div style="background-color:rgba(0,0,0,.5);padding:1vh 1vw;">
<div style="display: flex;align-items:center;justify-content:space-between">
<span id="town" style="color: #fff; font-size: 1vw;">${params.name}</span>
</div>
<ul style="display: flex;flex-direction: column;margin-top: 1vh;font-size: 0.7vw;color:#fff">
<li>
客流量:<span style="color:#8eefff">100</span>
</li>
<li style="display:flex">
饱和度:<div>
<span style="display: inline-block;background-color: rgb(73,213,194);width: 1vh;height: 1vh;border-radius: 50%;"></span>
<span style="color:#8eefff">舒适</span>
</div>
</li>
<li>
实时监控
</li>
</ul>
</div>`
return tipHtml;
},
},
itemStyle: {
normal: {
color: "#1DE9B6",
shadowBlur: 10,
shadowColor: "#333",
},
},
symbolSize:function (val) {
if(test(val[2])<=2){
return 10
}else if(test(val[2])<=3){
return 12
}else if(test(val[2])<=4){
return 14
}else{
return 16
}
},
data: points,
zoom: 1.22,
map: "lishui", //使用
},
],
};
this.$echarts.registerMap("lishui", lishui);
// 隐藏动画加载效果。
// myChart.hideLoading();
// 设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption完成,ECharts 会合并新的参数和数据,然后刷新图表。
myChart.setOption(option);
},
},
};
</script>
<style>
</style>```