vue3+echarts绘制中国地图在省份上标记数值，实现点击高亮效果
用于记录项目中插件的使用方法！
echarts我用的是@4.9.0版本
npm i echarts@4.9.0
地图数据我用的是echarts库自带的数据
import 'echarts/map/js/china.js';
实现数字显示在区域上方
series: [
{
type: "scatter",
coordinateSystem: "geo",
data: [
{
name: "北京",
value: [
116.405285,
39.904985
],
num: 123
}
],
// 可以添加更多标记点
label: {
normal: {
show: true,
formatter: (params) => {
return params.data.num;
},
textStyle: {
color: "#3096ff",
fontSize: 12,
backgroundColor: "#fff",
shadowColor: "#999",
shadowBlur: 8,
shadowOffsetY: 5,
},
borderRadius: 24,
padding: 4,
width: 16,
lineHeight: 16,
align: "center",
},
},
itemStyle: {
normal: {
color: "#F62157", // 标记点颜色
},
},
},
],
实现点击高亮
map.off('click'); //这里解决多次触发点击事件
map.on('click', async (params) => {
console.log(params)
if (params.seriesType != "map") return;
if (selectedArea.value) {
map.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: selectedArea.value
});
}
map.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
selectedArea.value = params.dataIndex;
console.log(params)
})
实现点击出现弹窗
tooltip: {
// 鼠标是否可以进入悬浮框
enterable: false,
// 触发方式 mousemove, click, none, mousemove|click
triggerOn: 'click',
// item 图形触发， axis 坐标轴触发， none 不触发
trigger: 'item',
// 背景色
backgroundColor: 'rgba(255,255,255,0.5)',
textStyle: {
color: "#000"
},
confine: false,
transitionDuration: .2,
padding: 10,
formatter: function (params) {
return '<div class="chartLabel">' +
'<div class=title>' + params.name + '</div>' +
'</div>'
}
},
全部代码
<template>
<div>
<div ref="china_map" style="height: 450px;width: 100%"></div>
</div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, toRefs, onMounted } from "vue"
import 'echarts/map/js/china.js'; // 核心文件
// 省份数据
const china_map = ref();
const isChina = ref(true); // 默认显示中国地图
const emit = defineEmits(['showChange']);
const selectedArea = ref();
// 中国地图点击省份 显示当前省份的详细的地区。
const chinaMapHidden = (map) => {
map.off('click'); //这里解决多次触发点击事件
map.on('click', async (params) => {
console.log(params)
if (params.seriesType != "map") return;
if (selectedArea.value) {
map.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: selectedArea.value
});
}
map.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
selectedArea.value = params.dataIndex;
console.log(params)
})
}
// 渲染地图
const chinaMaprsult = (name = null) => {
let chinaMap = echarts.init(china_map?.value)
const options = {
title: {
text: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
// 鼠标是否可以进入悬浮框
enterable: false,
// 触发方式 mousemove, click, none, mousemove|click
triggerOn: 'click',
// item 图形触发， axis 坐标轴触发， none 不触发
trigger: 'item',
// 背景色
backgroundColor: 'rgba(255,255,255,0.5)',
textStyle: {
color: "#000"
},
confine: false,
transitionDuration: .2,
padding: 10,
formatter: function (params) {
return '<div class="chartLabel">' +
'<div class=title>' + params.name + '</div>' +
'</div>'
}
},
geo: {
map: name ? name : "china", // 核心
zoom: 1.2,
// roam: 'scale', //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
label: { // 页面初始化加载的文字
normal: {
show: true,
textStyle: {
color: "#ccc", // 页面初始化的地图文字颜色
fontSize: 10 // // 页面初始化的地图文字大小
},
},
},
itemStyle: { //设置样式
normal: {
areaColor: 'rgba(48, 82, 153, 0.5)', // 区域的颜色
borderColor: '#59e2f9' //边框颜色
},
emphasis: {
areaColor: 'rgb(44, 165, 198, 0.9)' // 鼠标悬浮区域颜色
}
},
emphasis: {
label: {
color: '#fff' // 鼠标悬浮文字颜色
}
},
},
series: [
{
type: "scatter",
coordinateSystem: "geo",
data: [
{
name: "北京",
value: [
116.405285,
39.904985
],
num: 123
}
],
// 可以添加更多标记点
label: {
normal: {
show: true,
formatter: (params) => {
return params.data.num;
},
textStyle: {
color: "#3096ff",
fontSize: 12,
backgroundColor: "#fff",
shadowColor: "#999",
shadowBlur: 8,
shadowOffsetY: 5,
},
borderRadius: 24,
padding: 4,
width: 16,
lineHeight: 16,
align: "center",
},
},
itemStyle: {
normal: {
color: "#F62157", // 标记点颜色
},
},
},
],
}
chinaMap.setOption(options)
chinaMapHidden(chinaMap)
}
onMounted(() => {
chinaMaprsult('china');
})
</script>
<style scoped></style>
更多推荐
33
0- 0
已为社区贡献1条内容
所有评论(0)