src\pages\chinaMap\index.vue
<template> <div class="mapBox"> <ChinaMap /> </div> </template> <script> import ChinaMap from "@/components/charts/chinaMap/chinaMap.vue"; export default { components: { ChinaMap, }, }; </script> <style scoped> .mapBox { background: #020933; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30px; box-sizing: border-boxs; } </style>
src\components\charts\chinaMap\chinaMap.vue
<template> <div style="height: 100%;width: 100%" ref="myChart"></div> </template> <script> import echarts from "echarts"; import "./chinaMapOutline.js"; import "./china.js"; export default { methods: { initEchartMap() { let myChart = echarts.init(this.$refs.myChart); let options = { series: [ // 中国地图-外轮廓 { type: "map", map: "chinaMapOutline", // 不响应鼠标交互 silent: true, //调整以下3个配置项与页面地图重合 aspectScale: 0.75, // 地图的长宽比 center: [104.2, 35.9], //设置可见中心坐标,以此坐标来放大和缩小 zoom: 1.13, //放大级别 itemStyle: { normal: { // 地图底色 areaColor: "#112B9B", // 高亮边缘+阴影样式 borderWidth: 3, borderColor: "#36E5FE", shadowBlur: 6, shadowColor: "#3484F5", shadowOffsetX: -3, shadowOffsetY: 4, }, }, }, // 中国地图 { type: "map", map: "china", zoom: 1.2, aspectScale: 0.75, label: { // 默认文本标签样式 normal: { color: "white", show: true, }, // 高亮文本标签样式 emphasis: { color: "yellow", fontSize: 22, fontWeight: "bold", }, }, itemStyle: { // 默认区域样式 normal: { // 区域背景透明 areaColor: "transparent", borderColor: "rgba(39,211,233, 1)", borderWidth: 1, }, // 高亮区域样式 emphasis: { // 高亮区域背景色 areaColor: "#01ADF2", }, }, }, ], }; myChart.setOption(options); // 添加窗口大小改变监听事件,当窗口大小改变时,图表会重新绘制,自适应窗口大小 window.addEventListener("resize", function() { myChart.resize(); }); }, }, mounted() { this.$nextTick(() => { this.initEchartMap(); }); }, }; </script>
下载chinaMapOutline.js和china.js
百度网盘下载链接:
https://pan.baidu.com/s/1K0wlmb3Yt223XAykMXpALA
提取码:w160
文件在项目中的地址(与chinaMap.vue同目录)
- src\components\charts\chinaMap\china.js
- src\components\charts\chinaMap\chinaMapOutline.js