vue echarts geo3D 实现3D中国地图显示 鼠标悬浮信息 定时切换省效果
文章目录1. 实现效果2. echarts-gl1. 实现效果2. echarts-gl
·
1. 实现效果
2. 安装 echarts-gl
cnpm i --save echarts-gl //建议安装^4.8.0版本
cnpm i --save echarts //建议安装^1.1.1版本, 有的版本node_moudels里面没有地图的json文件
2. main.js 引入 echarts-gl
// 添加 echarts 图表
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
import echartsGL from 'echarts-gl' // 引入echarts
Vue.prototype.$echartsGL = echartsGL // 引入组件（将echarts注册为全局）
3. vue 完整代码
<template>
<div class="content">
<h1>echarts 中国-3D 地图</h1>
<div ref="myEchart" id="personnel"></div>
</div>
</template>
<script>
import "echarts-gl"; //3D地图插件
// 引入地图的json文件
require("../../../node_modules/echarts/map/js/china.js");
let areaData = [
{ name: "黑龙江", value: [127.9688, 45.368] },
{ name: "内蒙古", value: [110.3467, 41.4899] },
{ name: "吉林", value: [125.8154, 44.2584] },
{ name: "北京", value: [116.4551, 40.2539] },
{ name: "辽宁", value: [123.1238, 42.1216] },
{ name: "河北", value: [114.4995, 38.1006] },
{ name: "天津", value: [117.4219, 39.4189] },
{ name: "山西", value: [112.3352, 37.9413] },
{ name: "陕西", value: [109.1162, 34.2004] },
{ name: "甘肃", value: [103.5901, 36.3043] },
{ name: "宁夏", value: [106.3586, 38.1775] },
{ name: "青海", value: [101.4038, 36.8207] },
{ name: "新疆", value: [87.9236, 43.5883] },
{ name: "西藏", value: [91.11, 29.97] },
{ name: "四川", value: [103.9526, 30.7617] },
{ name: "重庆", value: [108.384366, 30.439702] },
{ name: "山东", value: [117.1582, 36.8701] },
{ name: "河南", value: [113.4668, 34.6234] },
{ name: "江苏", value: [118.8062, 31.9208] },
{ name: "安徽", value: [117.29, 32.0581] },
{ name: "湖北", value: [114.3896, 30.6628] },
{ name: "浙江", value: [119.5313, 29.8773] },
{ name: "福建", value: [119.4543, 25.9222] },
{ name: "江西", value: [116.0046, 28.6633] },
{ name: "湖南", value: [113.0823, 28.2568] },
{ name: "贵州", value: [106.6992, 26.7682] },
{ name: "云南", value: [102.9199, 25.4663] },
{ name: "广东", value: [113.12244, 23.009505] },
{ name: "广西", value: [108.479, 23.1152] },
{ name: "海南", value: [110.3893, 19.8516] },
{ name: "上海", value: [121.4648, 31.2891] },
{ name: "台湾", value: [121.520076, 25.030724] },
];
export default {
data() {
return {
count: 0,
myChart: null,
name: "",
option: {
geo3D: {
data: areaData,
roam: true,
map: "china",
itemStyle: {
color: "#2d58bd", //地图块颜色
borderWidth: 1, //分界线wdith
borderColor: "#fff", //分界线颜色
backgroundColor: "transparent",
},
label: {
show: false, //默认是否显示名称
},
zlevel: 7,
emphasis: {
//当鼠标放上去的状态
label: {
show: true,
},
itemStyle: {
color: "#000",
},
},
tooltip: "axis", //提示框设置
formatter: (param) => {
console.log(param);
},
emphasis: {
//当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: "#000",
fontSize: 11,
},
},
itemStyle: {
color: "#d1801e", //地图高亮颜色
},
},
regions: [
{
name: "山东",
itemStyle: {
color: "#f8b440",
opacity: 1,
},
label: {
show: true,
},
},
], //默认高亮区域
},
series: [
{
type: "map3D",
map: "china",
selectedMode: "single", //地图高亮单选
label: {
textStyle: {
borderWidth: 0, //标签上边框宽度
fontSize: 14, //字体大小
},
formatter: "{b}",
},
zlevel: 6,
},
{
name: "青岛市点坐标显示",
type: "scatter3D",
coordinateSystem: "geo3D",
symbol: "circle",
color: "#fff",
symbolSize: 10,
label: {
show: false, //是否显示点上面的标签，默认false
textStyle: {
borderWidth: 0, //标签上边框宽度
borderColor: "white", //边框颜色
fontSize: 14, //字体大小
},
formatter: "{b}",
},
zlevel: 7,
emphasis: {
//当鼠标放上去 地区区域是否显示名称
label: {
show: false,
},
itemStyle: {
color: "#000",
},
},
data: areaData,
},
],
tooltip: {
trigger: "item",
backgroundColor: "transparent",
borderWidth: 0,
padding: 0,
margin: 0,
axisPointer: {
type: "cross",
},
extraCssText: "box-shadow: 0 0 10px transparent", // 额外附加到浮层的 css 样式
formatter: (param) => {
var data = `
<div class="layer-bg">
<div class="content-box" style="background:'#00133d'">
<div class="content" v-if="name">
<p class="name">${param.name}</p>
<div class="item">
<span>总面积</span>
<span class="count">20</span>
<span class="ratio"></span>
</div>
<div class="item">
<span>人口总数（男）</span>
<span class="count">51000000</span>
<span class="ratio">51%</span
>
</div>
<div class="item">
<span>人口总数（女）</span>
<span class="count">49000000</span>
<span class="ratio">49%</span
>
</div>
</div>
</div>
</div>
`;
return data;
},
},
},
};
},
methods: {
/**
* 加载3D地图
*/
getMap3d() {
this.myChart = this.$echarts.init(this.$refs.myEchart);
this.myChart.setOption(this.option);
//地图定时切换
setInterval(() => {
this.option.geo3D.regions[0].name =
this.option.geo3D.data[this.count].name;
this.myChart.setOption(this.option);
this.count++;
if (this.count === this.option.geo3D.data.length) {
this.count = 0;
}
}, 2000);
},
},
mounted() {
this.$nextTick(() => {
this.getMap3d();
});
},
};
</script>
<style lang='scss' scoped>
.content {
position: relative;
h1 {
position: absolute;
top: 0.14rem;
left: 50%;
transform: translateX(-50%);
height: 0.22rem;
font-size: 0.22rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #061d49;
margin: 0;
}
#personnel {
width: calc(100vw - 210px);
height: calc(100vh - 50px);
}
/deep/ .layer-bg {
flex: 1;
width: 2.49rem;
height: 1.45rem;
background: url("../../assets/img/弹框@2x.png");
background-size: 2.49rem 1.45rem;
background-repeat: no-repeat repeat;
position: relative;
.content-box {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
background: transparent;
.content {
width: 100%;
height: 100%;
position: relative;
text-align: center;
color: #fff;
.name {
margin: 0.28rem 0 0rem 0;
color: #26d1d6;
font-size: 0.1rem;
}
.item {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 0.12rem;
padding: 0rem 0.3rem 0.02rem 0.25rem;
text-align: left;
color: #26d1d6;
span {
display: inline-block;
&:first-child {
width: 2rem;
}
&.count {
display: block;
width: 1rem;
text-align: right;
}
&.ratio {
display: block;
width: 1.5rem;
text-align: right;
}
}
}
}
}
}
}
</style>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献58条内容
所有评论(0)