<template>
<div class="myChart" ref="mychart"></div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { ECharts } from "echarts";
import {ref, getCurrentInstance, ComponentInternalInstance, onMounted, watch} from "vue";
import axios from "axios";
import pinyin from 'js-pinyin'
import {useRoute, useRouter} from "vue-router";
const props = withDefaults(
defineProps<{
data: any;
}>(),
{}
);
const emit = defineEmits(["getBulletinBoard"]);
const {
appContext: {
config: {
globalProperties: {$echarts, $utils},
},
},
} = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const router = useRouter();
let currentIndex = ref(0)
let timer = ref()
const mychart = ref();
let echartInstance: ECharts;
let iconRQ = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNCRkRBMEJBQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNCRkRBMEJCQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0JGREEwQjhDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0JGREEwQjlDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mT42iAAABQ0lEQVR42mL8LabOQCQIBOL1xChkItJAkLp+IBajpqFWQCwPxJ7UNDQCSgdQy1BmIA6Bsl2AmJMahjoAsTiUzQPETtQwNAKN709IAwvUayZQ/hcg/o0k/x6Ig9D0+ABxKJT9HYh/oMm/BBm6GYitgTgfiBmJcLkkEK/CIXcGiGNB3v8JxIVQF31gIA/8AeIWaNK7gRymG4BYH4hPkGjgXSC2A+JaWNChR9QjqIJeIP5PhIGzgdgAiI8Tin2QbSVAvIOAgROBOA0auUQlKV4gtidgqBGp6RSUFrmIKA/ESDEUPcGfBOIUIH6Lln29iTVUCIjdkJJKExDbAPFcqJdPEMpd2AwF5TBWaFKxBeJ6qOHIqaMbmjrcsBUw2AwNh7rKAEeaBaWOMiD2BeJvQOxOyFBuaFJJwZZU0MBWaHCIo0sABBgAetA4Jx5t/ToAAAAASUVORK5CYII="
let domImg = document.createElement('img')
domImg.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURQgcajHk/SKeySrB5Bx/shNTk3XNSEwAAAAGdFJOU4yMjIyMjE9afYoAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAlSURBVAjXY2AAA0UhBgYWQUEHBiZBQQMQS4GBwVAYKMEaAFEAACK5Ac0MBL09AAAAAElFTkSuQmCC'
let data = [{
name: "阿根廷",
value: [-60.00, -36.30],
},
{
name: "深圳",
value: [114.271522, 22.753644]
},
{
name: "重庆",
value: [106.54, 29.59]
},
{
name: "南京",
value: [118.78, 32.04]
},
{
name: "西班牙巴塞罗纳",
value: [2.175129, 41.385064]
},
{
name: "美国洛杉矶",
value: [-118.24311, 34.052713]
},
]
// let mapData = [{
// name: "广东",
// selected: true
// },
// {
// name: "安徽",
// selected: true
// },
// {
// name: "北京",
// selected: true
// },
// {
// name: "重庆",
// selected: true
// },
// ]
const provinceMap = {
'上海': 'shanghai',
'河北': 'hebei',
'山西': 'shanxi',
'新疆':'xinjiang',
'内蒙古':'neimenggu',
'西藏':'xizang',
'青海':'qinghai',
'甘肃':'gansu',
'辽宁': 'liaoning',
'吉林': 'jilin',
'黑龙江': 'heilongjiang',
'江苏': 'jiangsu',
'浙江': 'zhejiang',
'安徽': 'anhui',
'福建': 'fujian',
'江西': 'jiangxi',
'山东': 'shandong',
'河南': 'henan',
'湖北': 'hubei',
'湖南': 'hunan',
'广东': 'guangdong',
'广西': 'guangxi',
'海南': 'hainan',
'四川': 'sichuan',
'贵州': 'guizhou',
'云南': 'yunnan',
'陕西': 'shanxi1',
'宁夏': 'ningxia',
'北京': 'beijing',
'天津': 'tianjin',
'重庆': 'chongqing',
'香港': 'xianggang',
'澳门': 'aomen'
};
const initChart = async () => {
if (!mychart.value) return;
await axios.get(`/world.json`).then(res => {
echarts.registerMap('world', res.data);
});
echartInstance = echarts.init(mychart.value);
echartInstance.clear(); //清除旧画布 重新渲染
echartInstance.off('click')
let option = {
// backgroundColor: '#01355e',
xAxis: [],
yAxis: [],
grid:[],
geo: {
map: 'world',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '165%',
itemStyle: {
normal: {
shadowColor: '#38adef',
shadowOffsetX: 0,
shadowOffsetY: 15,
opacity: 0,
},
emphasis: {
areaColor: '#38adef',
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)',
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
}
},
},
label: {
show: false,
color: '#FFFFFF',
fontSize: 12,
},
}],
},
series: [
// 常规地图
{
type: 'map', // 系列类型
name: 'map', // 系列名称
mapType: 'world',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '165%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
label: {
show: false,
color: '#fff',
fontSize: 12,
},
itemStyle: {
normal: {
areaColor: {
image: domImg,
repeat: 'repeat'
},
// borderColor: '#1cccff',
// borderWidth: 1.5,
opacity: 1,
},
emphasis: {
areaColor: '#c9ba19',
borderColor: '#1cccff',
borderWidth: 2,
opacity: 1,
label: {
show: false,
color: "#fff"
}
}
},
// data:mapData
},
//首都星图标
{
name: '首都',
type: 'scatter',
coordinateSystem: 'geo',
data: [{
name: '首都',
value: [116.24, 41.55, 100],
}, ],
symbol: iconRQ,
symbolSize: 20,
label: {
normal: {
show: false,
},
emphasis: {
show: false
}
},
},
// 区域散点图
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
symbolSize: 8,
rippleEffect: { //坐标点动画
period: 3,
scale: 5,
brushType: 'fill'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#f3f3f3',
fontSize: 12
}
},
data: data,
itemStyle: { //坐标点颜色
normal: {
show: true,
color: '#f5e33f',
shadowBlur: 20,
shadowColor: '#7e974a'
},
emphasis: {
areaColor: '#f00'
}
},
},
// 线 和 点
{
type: 'lines',
zlevel: 1, //设置这个才会有轨迹线的小尾巴
polyline: true,
effect: {
show: true,
period: 10,
trailLength: 0.7,
color: '#ffd800', //流动点颜色
symbol: 'arrow',
symbolSize: 6
},
lineStyle: {
normal: {
color: '#d4d36c', //线条颜色
width: 1.5,
curveness: 0.2,
shadowColor: '#d4d36c',
}
},
data: [{
fromName: "深圳",
toName: "美国洛杉矶",
coords: [
[114.271522, 22.753644],
[-118.24311, 34.052713],
]
},
{
fromName: "浙江",
toName: "西班牙巴塞罗纳",
coords: [
[118.78, 32.04],
[2.175129, 41.385064],
]
},
{
fromName: "重庆",
toName: "阿根廷",
coords: [
[106.54, 29.59],
[-60.00, -36.30]
]
}
],
},
]
};
// const tooltipShow = () => {
// timer.value && clearTimeout(timer.value)
// timer.value = window.setTimeout(() => {
// myChart.dispatchAction({//显示tooptip
// type: 'showTip',
// seriesIndex: 0,//索引值,可触发多个
// dataIndex: currentIndex.value,
// playState: true,
// })
// currentIndex.value++;
// if (currentIndex.value >= props.data.length) {
// currentIndex.value = 0
// }
// tooltipShow()
// }, 1000)
// }
// tooltipShow()
echartInstance.setOption(option);
echartInstance.on('click', (params) => {
console.log(params,'params',params.name,provinceMap[params.name])
// const mapCode = pinyin.getFullChars(params.name).toLowerCase()
const mapCode = provinceMap[params.name]; //地区的json数据
console.log('-------mapCode---', mapCode)
router.push({path:'/provincialSubPage', query: {
cityName: mapCode
}})
})
window.addEventListener("resize", () => {
echartInstance.resize();
});
// myChart.on('mouseover', () => {
// timer.value && clearTimeout(timer.value)
// })
// myChart.on('mouseout', (e) => {
// currentIndex.value = e.dataIndex;
// // tooltipShow()
// })
}
onMounted(() => {
initChart()
})
let maxData = ref(0);
watch(() => props.data,
() => {
//
// maxData.value = Math.max.apply(Math, props.data.map(item => item.value))
initChart()
}, {deep: true})
</script>
<style lang="scss" scoped>
.myChart {
width: 100%;
height: 100%;
}
</style>
世界地图echarts+vue3+ts
最新推荐文章于 2024-09-02 14:40:14 发布
本文介绍了如何在Vue应用中使用ECharts库创建动态地图,展示了如何根据数据更新地图上的点状图和线段,以及如何通过点击事件跳转到详细页面。
摘要由CSDN通过智能技术生成