解决echarts5中国地图只显示南海问题，及china.js china.json下载

2024-07-15 05:21| 来源: 网络整理| 查看: 265

问题：

echarts5中国地图，只显示南海

在这里插入图片描述

说明：

echarts3版本后，因为版权问题，echarts不再内置中国地图，也没有中国地图数据，网上找的又很多有问题，或者语焉不详。。。 1：需要手动引入china.json文件，在public文件下，不能放src那。: 2：很多开源项目或者老项目用的jQuery的$.getJSON，vue就不要引入这玩意了，用axios的axios.get(uploadedDataURL).then((geoJson: any) => {})就行了。 3：echarts.registerMap("china", res.data)引入中国地图数据，切记看清楚要不要加.data，我因为没看清数据，活生生在这卡了几个小时 4：echarts的china.js或者china.json,下载地址如下：https://github.com/471314748/xiaotexiao，在下面一点点哦(很多人说我这个地址的文件加密了，那我把高德地图的那个地址放这里吧，进去=>2.选择需要的数据格式=>JSON API=>复制粘贴就行了，范围选择器地址：http://datav.aliyun.com/portal/school/atlas/area_selector) 5：直接的文件，另存为就行了。china.json链接：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json，直接下载（过期用上面的）

示例：

地图组件全部代码： import { ref, Ref, onMounted } from "vue" import * as echarts from 'echarts' import axios from 'axios' const echartsRef: Ref = ref(null) let myChart: any = null // var uploadedDataURL = "./data-1528971808162-BkOXf61WX.json"; var uploadedDataURL = "./china.json"; var points = [ { value: [118.8062, 31.9208], itemStyle: { color: "#4ab2e5" } }, { value: [127.9688, 45.368], itemStyle: { color: "#4fb6d2" } }, { value: [110.3467, 41.4899], itemStyle: { color: "#52b9c7" } }, { value: [125.8154, 44.2584], itemStyle: { color: "#5abead" } }, { value: [116.4551, 40.2539], itemStyle: { color: "#f34e2b" } }, { value: [123.1238, 42.1216], itemStyle: { color: "#f56321" } }, { value: [114.4995, 38.1006], itemStyle: { color: "#f56f1c" } }, { value: [117.4219, 39.4189], itemStyle: { color: "#f58414" } }, { value: [112.3352, 37.9413], itemStyle: { color: "#f58f0e" } }, { value: [109.1162, 34.2004], itemStyle: { color: "#f5a305" } }, { value: [103.5901, 36.3043], itemStyle: { color: "#e7ab0b" } }, { value: [106.3586, 38.1775], itemStyle: { color: "#dfae10" } }, { value: [101.4038, 36.8207], itemStyle: { color: "#d5b314" } }, { value: [103.9526, 30.7617], itemStyle: { color: "#c1bb1f" } }, { value: [108.384366, 30.439702], itemStyle: { color: "#b9be23" } }, { value: [113.0823, 28.2568], itemStyle: { color: "#a6c62c" } }, { value: [102.9199, 25.46639], itemStyle: { color: "#96cc34" } }, { value: [119.4543, 25.9222] }, ]; onMounted(() => { initChart() }) let initChart = () => { if (!myChart) { myChart = echarts.init(echartsRef.value); } // myChart.showLoading(); axios.get(uploadedDataURL).then((geoJson: any) => { echarts.registerMap("china", geoJson.data) myChart.hideLoading(); let option = { backgroundColor: "#013954", geo: { map: "china", aspectScale: 0.75, //长宽比 zoom: 1.1, roam: false, itemStyle: { normal: { areaColor: { type: "radial", x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: "#09132c", // 0% 处的颜色 }, { offset: 1, color: "#274d68", // 100% 处的颜色 }, ], globalCoord: true, // 缺省为 false }, shadowColor: "rgb(58,115,192)", shadowOffsetX: 10, shadowOffsetY: 11, }, emphasis: { areaColor: "#2AB8FF", borderWidth: 0, color: "green", label: { show: false, }, }, }, regions: [ { name: "南海诸岛", itemStyle: { areaColor: "rgba(0, 10, 52, 1)", borderColor: "rgba(0, 10, 52, 1)", normal: { opacity: 0, label: { show: false, color: "#009cc9", }, }, }, }, ], }, series: [ { type: "map", roam: false, mapType: 'china', label: { normal: { show: true, textStyle: { color: "#1DE9B6", }, }, emphasis: { textStyle: { color: "rgb(183,185,14)", }, }, }, itemStyle: { normal: { borderColor: "rgb(147, 235, 248)", borderWidth: 1, areaColor: { type: "radial", x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: "#09132c", // 0% 处的颜色 }, { offset: 1, color: "#274d68", // 100% 处的颜色 }, ], globalCoord: true, // 缺省为 false }, }, emphasis: { areaColor: "rgb(46,229,206)", // shadowColor: 'rgb(12,25,50)', borderWidth: 0.1, }, }, zoom: 1.1, // roam: false, map: "china", //使用 // data: this.difficultData //热力图数据不同区域不同的底色 }, { type: "effectScatter", coordinateSystem: "geo", showEffectOn: "render", zlevel: 1, rippleEffect: { period: 15, scale: 4, brushType: "fill", }, hoverAnimation: true, label: { normal: { formatter: "{b}", position: "right", offset: [15, 0], color: "#1DE9B6", show: true, }, }, itemStyle: { normal: { color: "#1DE9B6" /* function (value){ //随机颜色 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); }*/, shadowBlur: 10, shadowColor: "#333", }, }, symbolSize: 12, data: points, }, //地图线的动画效果 { type: "lines", zlevel: 2, effect: { show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: "arrow", //箭头图标 symbolSize: 7, //图标大小 }, lineStyle: { normal: { color: "#1DE9B6", width: 1, //线条宽度 opacity: 0.1, //尾迹线条透明度 curveness: 0.3, //尾迹线条曲直度 }, }, data: [ { coords: [ [118.8062, 31.9208], [119.4543, 25.9222], ], lineStyle: { color: "#4ab2e5" }, }, { coords: [ [127.9688, 45.368], [119.4543, 25.9222], ], lineStyle: { color: "#4fb6d2" }, }, { coords: [ [110.3467, 41.4899], [119.4543, 25.9222], ], lineStyle: { color: "#52b9c7" }, }, { coords: [ [125.8154, 44.2584], [119.4543, 25.9222], ], lineStyle: { color: "#5abead" }, }, { coords: [ [116.4551, 40.2539], [119.4543, 25.9222], ], lineStyle: { color: "#f34e2b" }, }, { coords: [ [123.1238, 42.1216], [119.4543, 25.9222], ], lineStyle: { color: "#f56321" }, }, { coords: [ [114.4995, 38.1006], [119.4543, 25.9222], ], lineStyle: { color: "#f56f1c" }, }, { coords: [ [117.4219, 39.4189], [119.4543, 25.9222], ], lineStyle: { color: "#f58414" }, }, { coords: [ [112.3352, 37.9413], [119.4543, 25.9222], ], lineStyle: { color: "#f58f0e" }, }, { coords: [ [109.1162, 34.2004], [119.4543, 25.9222], ], lineStyle: { color: "#f5a305" }, }, { coords: [ [103.5901, 36.3043], [119.4543, 25.9222], ], lineStyle: { color: "#e7ab0b" }, }, { coords: [ [106.3586, 38.1775], [119.4543, 25.9222], ], lineStyle: { color: "#dfae10" }, }, { coords: [ [101.4038, 36.8207], [119.4543, 25.9222], ], lineStyle: { color: "#d5b314" }, }, { coords: [ [103.9526, 30.7617], [119.4543, 25.9222], ], lineStyle: { color: "#c1bb1f" }, }, { coords: [ [108.384366, 30.439702], [119.4543, 25.9222], ], lineStyle: { color: "#b9be23" }, }, { coords: [ [113.0823, 28.2568], [119.4543, 25.9222], ], lineStyle: { color: "#a6c62c" }, }, { coords: [ [102.9199, 25.46639], [119.4543, 25.9222], ], lineStyle: { color: "#96cc34" }, }, ], }, ], }; myChart.setOption(option, true); myChart.resize(); }); } .transportMonitoringMap { width: 100%; height: 100%; // width: 855px; // height: 746px; } 更新(和上面的vue3版本的没关系)：

vue2版本的组件：

import * as echarts from "echarts"; require("echarts/theme/macarons"); // echarts theme // import resize from "./mixins/resize"; import axios from "axios"; import uploadedDataURL from "./china.json"; // let uploadedDataURL = require("/china.json") export default { // mixins: [resize], props: {}, data() { return { chart: null, timerChart: null, colors: [ "#4ab2e5", "#a6c62c", "#4fb6d2", "#5abead", "#f34e2b", "#f56321", "#f56f1c", "#f58414", "#f58f0e", "#f5a305", "#e7ab0b", "#dfae10", "#d5b314", "#c1bb1f", "#b9be23", "#a6c62c", "#96cc34", ], lines: [], myChart: null, uploadedDataURL: uploadedDataURL, points: [ { value: [118.8062, 31.9208], itemStyle: { color: "#4ab2e5" } }, { value: [127.9688, 45.368], itemStyle: { color: "#4fb6d2" } }, { value: [110.3467, 41.4899], itemStyle: { color: "#52b9c7" } }, { value: [125.8154, 44.2584], itemStyle: { color: "#5abead" } }, { value: [116.4551, 40.2539], itemStyle: { color: "#f34e2b" } }, { value: [123.1238, 42.1216], itemStyle: { color: "#f56321" } }, { value: [114.4995, 38.1006], itemStyle: { color: "#f56f1c" } }, { value: [117.4219, 39.4189], itemStyle: { color: "#f58414" } }, { value: [112.3352, 37.9413], itemStyle: { color: "#f58f0e" } }, { value: [109.1162, 34.2004], itemStyle: { color: "#f5a305" } }, { value: [103.5901, 36.3043], itemStyle: { color: "#e7ab0b" } }, { value: [106.3586, 38.1775], itemStyle: { color: "#dfae10" } }, { value: [101.4038, 36.8207], itemStyle: { color: "#d5b314" } }, { value: [103.9526, 30.7617], itemStyle: { color: "#c1bb1f" } }, { value: [108.384366, 30.439702], itemStyle: { color: "#b9be23" } }, { value: [113.0823, 28.2568], itemStyle: { color: "#a6c62c" } }, { value: [102.9199, 25.46639], itemStyle: { color: "#96cc34" } }, { value: [119.4543, 25.9222] }, ], }; }, watch: {}, mounted() { this.$nextTick(() => { this.initChart(); }); }, beforeDestroy() { if (!this.chart) { return; } // this.chart.dispose(); // this.chart = null; // clearTimeout(this.timerChart); }, methods: { initChart() { if (!this.myChart) { this.myChart = echarts.init(this.$refs.echartsRef); } // this.myChart.showLoading(); // console.log(this.uploadedDataURL); // axios.get(uploadedDataURL).then((geoJson) => { // console.log('geoJson', geoJson); // echarts.registerMap("china", geoJson.data); echarts.registerMap("china", uploadedDataURL); this.myChart.hideLoading(); let option = { backgroundColor: "#013954", geo: { map: "china", aspectScale: 0.75, //长宽比 zoom: 1.1, roam: false, itemStyle: { normal: { areaColor: { type: "radial", x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: "#09132c", // 0% 处的颜色 }, { offset: 1, color: "#274d68", // 100% 处的颜色 }, ], globalCoord: true, // 缺省为 false }, shadowColor: "rgb(58,115,192)", shadowOffsetX: 10, shadowOffsetY: 11, }, emphasis: { areaColor: "#2AB8FF", borderWidth: 0, color: "green", label: { show: false, }, }, }, regions: [ { name: "南海诸岛", itemStyle: { areaColor: "rgba(0, 10, 52, 1)", borderColor: "rgba(0, 10, 52, 1)", normal: { opacity: 0, label: { show: false, color: "#009cc9", }, }, }, }, ], }, series: [ { type: "map", roam: false, mapType: "china", label: { normal: { show: true, textStyle: { color: "#1DE9B6", }, }, emphasis: { textStyle: { color: "rgb(183,185,14)", }, }, }, itemStyle: { normal: { borderColor: "rgb(147, 235, 248)", borderWidth: 1, areaColor: { type: "radial", x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: "#09132c", // 0% 处的颜色 }, { offset: 1, color: "#274d68", // 100% 处的颜色 }, ], globalCoord: true, // 缺省为 false }, }, emphasis: { areaColor: "rgb(46,229,206)", // shadowColor: 'rgb(12,25,50)', borderWidth: 0.1, }, }, zoom: 1.1, // roam: false, map: "china", //使用 // data: this.difficultData //热力图数据不同区域不同的底色 }, { type: "effectScatter", coordinateSystem: "geo", showEffectOn: "render", zlevel: 1, rippleEffect: { period: 15, scale: 4, brushType: "fill", }, hoverAnimation: true, label: { normal: { formatter: "{b}", position: "right", offset: [15, 0], color: "#1DE9B6", show: true, }, }, itemStyle: { normal: { color: "#1DE9B6" /* function (value){ //随机颜色 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); }*/, shadowBlur: 10, shadowColor: "#333", }, }, symbolSize: 12, data: this.points, }, //地图线的动画效果 { type: "lines", zlevel: 2, effect: { show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: "arrow", //箭头图标 symbolSize: 7, //图标大小 }, lineStyle: { normal: { color: "#1DE9B6", width: 1, //线条宽度 opacity: 0.1, //尾迹线条透明度 curveness: 0.3, //尾迹线条曲直度 }, }, data: [ { coords: [ [118.8062, 31.9208], [100.4564, 38.931387], ], lineStyle: { color: "#4ab2e5" }, }, { coords: [ [127.9688, 45.368], [100.4564, 38.931387], ], lineStyle: { color: "#4fb6d2" }, }, { coords: [ [110.3467, 41.4899], [100.4564, 38.931387], ], lineStyle: { color: "#52b9c7" }, }, { coords: [ [125.8154, 44.2584], [100.4564, 38.931387], ], lineStyle: { color: "#5abead" }, }, { coords: [ [116.4551, 40.2539], [100.4564, 38.931387], ], lineStyle: { color: "#f34e2b" }, }, { coords: [ [123.1238, 42.1216], [100.4564, 38.931387], ], lineStyle: { color: "#f56321" }, }, { coords: [ [114.4995, 38.1006], [100.4564, 38.931387], ], lineStyle: { color: "#f56f1c" }, }, { coords: [ [117.4219, 39.4189], [100.4564, 38.931387], ], lineStyle: { color: "#f58414" }, }, { coords: [ [112.3352, 37.9413], [100.4564, 38.931387], ], lineStyle: { color: "#f58f0e" }, }, { coords: [ [109.1162, 34.2004], [100.4564, 38.931387], ], lineStyle: { color: "#f5a305" }, }, { coords: [ [103.5901, 36.3043], [100.4564, 38.931387], ], lineStyle: { color: "#e7ab0b" }, }, { coords: [ [106.3586, 38.1775], [100.4564, 38.931387], ], lineStyle: { color: "#dfae10" }, }, { coords: [ [101.4038, 36.8207], [100.4564, 38.931387], ], lineStyle: { color: "#d5b314" }, }, { coords: [ [103.9526, 30.7617], [100.4564, 38.931387], ], lineStyle: { color: "#c1bb1f" }, }, { coords: [ [108.384366, 30.439702], [100.4564, 38.931387], ], lineStyle: { color: "#b9be23" }, }, { coords: [ [113.0823, 28.2568], [100.4564, 38.931387], ], lineStyle: { color: "#a6c62c" }, }, { coords: [ [102.9199, 25.46639], [100.4564, 38.931387], ], lineStyle: { color: "#96cc34" }, }, ], }, ], }; this.myChart.setOption(option, true); this.myChart.resize(); // }); }, }, }; .chartsDom { width: 100%; height: 100%; > div { width: 100%; height: 100%; } }

使用方法：在这里插入图片描述

【本文地址】

公司简介

联系我们