目录
一、Echarts官方地图资源二、实现三、重要更新四、结尾五、参考ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。
来自:ECharts 地图数据在线生成工具 http://ecomfe.github.io/echarts-map-tool/#
一、Echarts官方地图资源
Echarts官方文档已经暂停了地图数据的下载,但是百度Echarts给我们留了下载的官方接口:/examples/vendors/echarts/map/
JSON格式
/examples/vendors/echarts/map/json/
JS格式
/examples/vendors/echarts/map/js/
二、实现
下载china.js文件/examples/vendors/echarts/map/js/china.js
放到对应的文件(我放在了utils里)上代码
<template><div class="managingPatientSize"><el-row><el-col :span="6">1</el-col><el-col :span="12"><div id="china-map"></div></el-col><el-col :span="6">1</el-col></el-row></div></template><script>import "../utils/china.js";// 引入 ECharts 主模块var echarts = require("echarts/lib/echarts");// 引入柱状图require("echarts/lib/chart/bar");require("echarts/lib/chart/line");// 引入提示框和标题组件require("echarts/lib/component/tooltip");require("echarts/lib/component/title");require("echarts/lib/chart/pie");require("echarts/lib/component/markLine");require("echarts/lib/component/geo");require("echarts/lib/chart/scatter");require("echarts/lib/chart/map");export default {data() {return {};},mounted() {this.drawCharts();},methods: {drawCharts() {// 基于准备好的dom,初始化echarts实例var chinaMap = echarts.init(document.getElementById("china-map"));window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resizechinaMap.setOption({// 进行相关配置tooltip: {}, // 鼠标移到图里面的浮动提示框dataRange: {show: false,min: 0,max: 1000,text: ["High", "Low"],realtime: true,calculable: true,color: ["orangered", "#FF9B52", "#FFD068"],},geo: {// 这个是重点配置区map: "china", // 表示中国地图roam: true,label: {normal: {show: true, // 是否显示对应地名textStyle: {color: "#fff",},},},itemStyle: {normal: {borderColor: "#293171",borderWidth: "2",areaColor: "#0A0F33",},emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},series: [{type: "scatter",coordinateSystem: "geo", // 对应上方配置},{name: "启动次数", // 浮动框的标题type: "map",geoIndex: 0,data: [{name: "北京",value: 599,},{name: "上海",value: 142,},{name: "黑龙江",value: 44,},{name: "深圳",value: 92,},{name: "湖北",value: 810,},{name: "四川",value: 453,},],},],});},},};</script><style lang="scss" scoped>.managingPatientSize {height: 100%;color: #fff;.el-row {height: 100%;.el-col {height: 100%;position: relative;#china-map {height: 100%;}}}}</style>
效果图
三、重要更新
11月25日 update
经测试上述官方下载地址确实是整个服务站点都没了。
很多同学讲到急用却找不到资源,这里统一回复一下,帮大家找了 China.js 的文件
我放在 GitHub 里了,地址:资源系列之 Echarts 中国地图官方 china.js 文件
四、结尾
我是圆圆,如果我的文章对你的学习成长有所帮助,欢迎 点 赞 👍 支持,您的 点 赞 👍 支持是我进行创作和分享的动力!
如果有问题可以留言评论或者私信我,我都会一一解答~笔芯🤞