Echarts5 地图导入和使用

[madfour]

官网API地址

因为 v5 移除了内置的 geoJSON （原先在 echarts/map 文件夹下）, 所以，想要实现有关地图的图表开发，就需要自己去寻找合适的数据，然后通过 registerMap 接口注册到 ECharts 中。

推荐此链接可以国内的各省市区的json数据

geoJSON示例:

import * as echarts from "echarts";
// 导入 geoJSON 文件，并注册到Echarts中
import geoJSON from "@/utils/cn.json";
echarts.registerMap("china", geoJSON);

// mounted
 let option = {
   backgroundColor: "transparent", // 地图背景
   title: {
	 text: "地图China",
	 left: "center",
	 textStyle: {
	   color: "#409Eff"
	 },
	 top: "3%"
   },
   geo: {
	 // 地图设置
	 map: "china", // 导入地图数据
	 show: true,
	 center: [105, 35], // 地图视角中心
	 zoom: 1.3, // 当前视角的缩放比例
	 roam: true, // 允许缩放
	 aspectScale: 0.8, // 地图长宽比
	 label: {
	   emphasis: {
		 show: true,
		 color:'#333333'
	   },
	   normal: {
		 show: false,
		 color:'#333333'
	   }
	 },
	 itemStyle: {
	   // normal: {
	   //   color: "rgba(46, 63, 81, 1)", //地图背景色
	   //   borderColor: "#516a89", //省市边界线00fcff 516a89
	   //   borderWidth: 1
	   // },
	   emphasis: {
		 color: "rgba(35, 41, 58, 0.3)" //悬浮背景
	   }
	 }
   },
   series: [
	 // {}
   ]
 };
// data中定义 mapChart = null
this.mapChart = echarts.init(this.$refs.mapChart); // 初始化
this.mapChart.setOption(option);

也可以下载就版本的china.js文件：下载地址(v4)

(v4)里面的china.js所看到代码乱码现象，实际是对坐标进行了压缩，减少了地图文件的体积，是不影响使用

js示例:

import * as echarts from "echarts";
import "../../utils/map/js/china"

// 其它代码 同上