vue项目echarts绘制地图,实现点击地图弹窗效果(内附各个省json文件)
业务需求:点击地图上的某个市,显示市区的对应的数据信息,运用Echart插件绑定事件。注意:环境配置,需要配置node环境,安装所所依赖的包,然后运行。1、全局引入Echart插件。
·
业务需求:点击地图上的某个市,显示市区的对应的数据信息,运用Echart插件绑定事件。
1、全局引入Echart插件
import Vue from 'vue'
import App from './App.vue'
Vue.prototype.$echarts = Echart;
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
2、创建vue文件
<template>
<div class="center-map">
<div class="center-bg">
<div id="map"></div>
</div>
</div>
</template>
<script>
//加载地图map.json文件
import zhejiangMap from './zhejiangMap.json';
let imgUrl = require('../../assets/img/people.png');
export default {
name: "center-box",
data() {
return {
//点击市区弹框所用数据,可以访问后台加载
list: [
{
name: "衢州市",
arr: [
{value: 114, name: '已处理'},
{value: 1133, name: '待处理'},
{value: 112, name: '警报数'},
]
},
{
name: "杭州市",
arr: [
{value: 13, name: '已处理'},
{value: 90, name: '待处理'},
{value: 40, name: '警报数'},
]
},
{
name: "绍兴市",
arr: [
{value: 113, name: '已处理'},
{value: 190, name: '待处理'},
{value: 410, name: '警报数'},
]
},
{
name: "金华市",
arr: [
{value: 1, name: '已处理'},
{value: 2, name: '待处理'},
{value: 3, name: '警报数'},
]
},
{
name: "丽水市",
arr: [
{value: 3, name: '已处理'},
{value: 4, name: '待处理'},
{value: 5, name: '警报数'},
]
},
{
name: "台州市",
arr: [
{value: 5, name: '已处理'},
{value: 6, name: '待处理'},
{value: 7, name: '警报数'},
]
},
{
name: "宁波市",
arr: [
{value: 6, name: '已处理'},
{value: 7, name: '待处理'},
{value: 8, name: '警报数'},
]
},
{
name: "舟山市",
arr: [
{value: 7, name: '已处理'},
{value: 8, name: '待处理'},
{value: 9, name: '警报数'},
]
},
{
name: "嘉兴市",
arr: [
{value: 88, name: '已处理'},
{value: 78, name: '待处理'},
{value: 8, name: '警报数'},
]
},
{
name: "湖州市",
arr: [
{value: 1, name: '已处理'},
{value: 23, name: '待处理'},
{value: 3, name: '警报数'},
]
},
],
box1Data: [
{value: 0, name: '已处理'},
{value: 0, name: '待处理'},
{value: 0, name: '警报数'},
]
}
},
methods: {
getMap() {
//注册map数据
this.$echarts.registerMap('MAP_DATA', zhejiangMap);
//初始化
const myChart = this.$echarts.init(document.getElementById('map'));
// 颜色或文字的配置
const that = this;
const option = {
geo: {
type: 'map',
aspectScale: 1, // 横向拉伸
// roam: 'scale', // 地图操作 开启缩放或者平移,可以设置成 'scale' 或者 'move'。
map: 'MAP_DATA',
label: {
show: true,
normal: {
show: true, // 默认地图文字字号和字体颜色
fontSize: 11,
color: '#323233',
},
emphasis: {
show: true,
fontSize: 13, // 选中地图文字字号和字体颜色
color: '#323233',
},
},
itemStyle: {
normal: {
areaColor: '#fcfcfc', // 地图本身的颜色
borderColor: '#999', // 省份边框颜色
borderWidth: 0.5, // 省份边框宽度
borderType: 'dashed', // 省份边框宽度
opacity: 1, // 图形透明度
},
emphasis: {
areaColor: '#3c72ff', // 高亮时候地图显示的颜色
borderWidth: 0, // 高亮时的边框宽度
},
},
textFixed: {
Alaska: [20, -20],
},
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
// symbol: 'circle', // 标记的图形
symbol: `image://${imgUrl}`, // 标记的图形
// symbolSize: 10,
// rippleEffect: {
// period: 3,
// scale: 5,
// brushType: 'fill'
// }, // 坐标点动画
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#3B63C5',
fontWeight: 'bold',
fontSize: 10,
},
},
data: [
{
helpName: "衢州市",
name: `12,1`, // 衢州
value: [118.55263, 28.701708],
data: 'Project_mq',
},
{
helpName: "杭州市",
name: `12,19`, // 杭州
value: [119.350, 29.666],
data: 'Project_mq',
},
{
helpName: "绍兴市",
name: `1130`, // 绍兴
value: [120.450, 29.600],
data: 'Project_mq',
},
{
helpName: "金华市",
name: `1140`, // 金华
value: [119.900, 28.930],
data: 'Project_mq',
},
{
helpName: "丽水市",
name: `1254`, // 丽水
value: [119.400, 27.999],
data: 'Project_mq',
},
{
helpName: "温州市",
name: `1325`, // 温州
value: [120.300, 27.666],
data: 'Project_mq',
},
{
helpName: "台州市",
name: `1264`, // 台州
value: [121.000, 28.555],
data: 'Project_mq',
},
{
helpName: "宁波市",
name: `878`, // 宁波
value: [121.400, 29.500],
data: 'Project_mq',
},
{
helpName: "舟山市",
name: `1298`, // 舟山
value: [122.106863, 30.000],
data: 'Project_mq',
},
{
helpName: "嘉兴市",
name: `1325`, // 嘉兴
value: [120.600, 30.450],
data: 'Project_mq',
},
{
helpName: "湖州市",
name: `1298`, // 湖州
value: [119.700, 30.600],
data: 'Project_mq',
},
],
// itemStyle: {
// normal: {
// show: true,
// color: '#fff',
// shadowBlur: 20,
// shadowColor: 'red'
// },
// emphasis: {
// areaColor: '#2b5dd4'
// }
// }, // 坐标点颜色
},
],
tooltip: {
padding: 3, // 提示框浮层内边距
backgroundColor: 'transparent', // 图例背景色
borderColor: 'transparent', // 图例的边框颜色
borderWidth: 1,
//回调方法,监视弹框
formatter() {
// var value = obj.value;
// //这两步就是获取 x 和y 坐标
// var yindex = obj.dataIndex;
// var xindex = obj.seriesIndex;
that.$nextTick(() => {
that.getBox1Data('box1');
});
// 重点是这一步,返回一个DIV模型
return '<div id="box1" style="width:380px; height:250px;border: transparent!important;" class=""></div>';
},
// triggerOn: 'click',
},
};
myChart.setOption(option);
//地图点击事件,根据点击的市区,helpName属性去list中获取对应的数据
myChart.on('mouseover', function (data) {
console.log(data);
// console.log(data)
let helpName = data.data?.helpName;
if (helpName) {
that.box1Data = that.list.find(item => item.name === helpName).arr
// console.log(that.box1Data, 123)
}
});
// 自适应窗口大小
window.addEventListener('resize', function () {
myChart.resize();
});
},
//弹窗方法
getBox1Data(id) {
const box1 = this.$echarts.init(document.getElementById(id));
const option = {
backgroundColor: '#fff',
color: ['rgba(91,143,249,0.85)', 'rgba(90,216,166,0.85)', 'rgba(93,112,146,0.85)'],
tooltip: {
trigger: 'item',
},
grid: {
// width: '10%',
},
legend: {
orient: 'vertical',
right: '20',
top: 'center',
textStyle: {
fontSize: 15, //字体大小
color: '#9c9c9c', //字体颜色
},
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 30, // 设置间距
icon: "circle",
},
series: [
{
name: 'Access From',
type: 'pie',
center: ['40%', '50%'], // 饼图的位置
radius: ['50%', '80%'],
avoidLabelOverlap: false,
// label: {
// show: false,
// position: 'center'
// },
label: {
position: 'inner',
formatter: '{c}'
// fontSize: 14
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.box1Data,
// itemStyle: {
// borderColor: '#fff',
// borderWidth: 10,
// },
},
],
};
box1.setOption(option);
// 自适应窗口大小
window.addEventListener('resize', function () {
box1.resize();
});
}
},
mounted() {
this.getMap();
}
}
</script>
<style scoped lang="scss">
.center-map {
width: 100%;
height: 100%;
.center-bg {
position: relative;
width: 100%;
height: 100%;
/*background: url("../../assets/img/map-boat.png") no-repeat 32px 10px;*/
/*background-size: 120% 130%;*/
}
}
#map {
width: 660px;
height: 660px;
position: absolute;
top: 0px;
left: 10px;
}
</style>
3、项目结构
显示效果:
点击后效果:
下载地址: https://url31.ctfile.com/f/40632231-727356921-e8b3db?
下载码:6798
注意:依赖包有点大,没上传。。,环境配置,需要配置node环境,然后安装所依赖的包,然后运行即可。
更多推荐
已为社区贡献6条内容
所有评论(0)