首先echarts4.90版本以上移除了中国地图依赖包有两种办法解决:
1.下载echarts4.90版本
npm install echarts@4.9.0
如果项目中已经安装了echarts的最新版本,又不方便卸载
可以将打开下载了4.90版本的vue项目中的node_modules找到里面的map包,移动到echarts最新版本的同样位置目录下
2.再vue项目的main.js中做如下配置
import * as echarts from 'echarts'
import china from 'echarts/map/json/china.json' //导入china包
echarts.registerMap('china', china)
Vue.prototype.$echarts = echarts
3.使用
<template>
<div class="map" ref="map"></div>
</template>
<style lang="less" scoped>
.map{
width: calc(100% - 40px);
height: 600px;
}
</style>
在 mounted()里面调用此方法,用ecahrts的map实现
data() {
return {
ecMap: null,
};
},
mounted() {
this.$nextTick(() => {
this.map();
});
},
methods:{
map() {
const that = this;
let ec = this.$echarts.init(this.$refs.map);
let option = {
tooltip: {
trigger: "item",
},
series: [
{
type: "map",
map: "china",
// 悬浮地图 改变区域字体颜色
label: {
show: true,
color: "#fff",
emphasis: {
color: "#fff", // 设置悬浮时的字体颜色
fontSize: that.transformFontSize(17),
},
fontSize: that.transformFontSize(14),
},
aspectScale: 0.75,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "100%",
roam: false, //关闭缩放
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 0.6)",
borderWidth: 0.8,
areaColor: {
type: "linear-gradient",
x: 0,
y: 1200,
x2: 1000,
y2: 0,
colorStops: [
{
offset: 0,
color: "#111", // 0% 处的颜色
},
{
offset: 1,
color: "#000", // 50% 处的颜色
},
],
global: true, // 缺省为 false
},
},
emphasis: {
areaColor: " rgba(147, 235, 248, 0)",
},
},
// 点击地图 改变区域字体颜色
select: {
itemStyle: {
areaColor: {
type: "linear-gradient",
x: 0,
y: 1200,
x2: 1000,
y2: 0,
colorStops: [
{
offset: 0,
color: "#111", // 0% 处的颜色
},
{
offset: 1,
color: "#d13535", // 50% 处的颜色
},
],
},
},
label: {
show: true,
color: "#fff",
fontSize: that.transformFontSize(22),
},
},
zlevel: 1,
// data: data,
},
],
geo: {
map: "china",
roam: false,
zoom: 1,
aspectScale: 0.75,
layoutCenter: ["50%", "51.5%"], //地图位置
layoutSize: "100%",
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 0.5,
color: {
type: "linear-gradient",
x: 0,
y: 1500,
x2: 2500,
y2: 0,
colorStops: [
{
offset: 0,
color: "#009DA1", // 0% 处的颜色
},
{
offset: 1,
color: "#005B9E", // 50% 处的颜色
},
],
global: true, // 缺省为 false
},
opacity: 0.5,
},
emphasis: {
areaColor: "#2a333d",
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
areaColor: "rgba(0, 10, 52, 1)",
borderColor: "rgba(0, 10, 52, 1)",
},
emphasis: {
areaColor: "rgba(0, 10, 52, 1)",
borderColor: "rgba(0, 10, 52, 1)",
},
},
],
silent: true,
},
};
ec.on("click", (params) => {
console.log(params);
});
ec.setOption(option);
this.ecMap = ec;
},
},