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
文件在项目中的地址（与chinaMap.vue同目录）
- src\components\charts\chinaMap\china.js
- src\components\charts\chinaMap\chinaMapOutline.js
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218075.html原文链接：https://javaforall.net
