我安装的版本是echarts@4.9.0 内含中国、各省核心js和JSON文件 可直接引用，但没有各市区地图文件，若更新到echarts5以上各省市地图文件也不自带了，需到三方库中自行下载，连接如下：
js文件获取?https://github.com/echarts-maps
JSON文件获取?DataV.GeoAtlas地理小工具系列
?script标签中 echarts注册：
import echarts from 'echarts';
import 'echarts/map/js/china.js' // 核心文件
import './components/city/cityfiles/yancheng.js' // 核心文件
import './components/city/cityfiles/changzhou.js' // 核心文件
import './components/city/cityfiles/wuxi.js' // 核心文件
import yancheng from './components/city/cityfiles/yancheng.json' // 引入json文件
import changzhou from './components/city/cityfiles/changzhou.json' // 引入json文件
import wuxi from './components/city/cityfiles/wuxi.json' // 引入json文件
echarts.registerMap('yancheng', yancheng) // 在echarts中注册使用这个文件
echarts.registerMap('changzhou', changzhou) // 在echarts中注册使用这个文件
echarts.registerMap('wuxi', wuxi) // 在echarts中注册使用这个文件?给个宽高：
<div id="Charts" style="width:100%; height:100%;position: relative;">
绘制方法：
drawCharts () {
let myChart = echarts.init(document.getElementById('Charts'))
let seriesData = [];
let points1 = []
let points2 = []
console.log('-----this.regionData-----',this.regionData);
for (let item of this.regionData) {
if(this.citycode==320900){ //盐城
if(item.name=='亭湖区'){
points1 = [[120.213202,33.393723],[120.213202,33.393723]];
points2 = [[120.213202,33.393723],[122.016138,33.806525]];
}else if(item.name=='盐都区'){
points1 = [[119.938393,33.233457],[119.708427,33.268239]];
points2 = [[119.708427,33.268239],[119.354279,33.10774]];
}else if(item.name=='大丰区'){
points1 = [[120.513308,33.173522],[120.823763,33.304938]];
points2 = [[120.823763,33.304938],[121.318191,33.326177]];
}else if(item.name=='响水县'){
points1 = [[119.675198,34.195351],[119.52342,34.302298]];
points2 = [[119.52342,34.302298],[119.234309,34.29353]];
}else if(item.name=='滨海县'){
points1 = [[119.888563,34.028752],[120.153024,34.328834]];
points2 = [[120.153024,34.328834],[120.45658,34.351726]];
}else if(item.name=='阜宁县'){
points1 = [[119.766681,33.769859],[119.766681,33.769859]];
points2 = [[119.766681,33.769859],[118.747931,33.883103]];
}else if(item.name=='射阳县'){
points1 = [[120.24731,33.787144],[120.59226,33.994279]];
points2 = [[120.59226,33.994279],[121.010799,33.975121]];
}else if(item.name=='建湖县'){
points1 = [[119.791978,33.552548],[119.414833,33.552548]];
points2 = [[119.414833,33.552548],[118.747931,33.490908]];
}else if(item.name=='东台市'){
points1 = [[120.43972,32.849936],[120.954844,32.888752]];
points2 = [[120.954844,32.888752],[121.676938,32.811103]];
}else{
continue
}
}else if(this.citycode==320400){ //常州
if(item.name=='天宁区'){
points1 = [[120.022793,31.790442],[120.057692,31.838859]];
points2 = [[120.057692,31.838859],[120.234322,31.84612]];
}else if(item.name=='钟楼区'){
points1 = [[119.905534,31.806643],[120.06766,31.751636]];
points2 = [[120.06766,31.751636],[120.440205,31.664146]];
}else if(item.name=='戚墅堰区'){
continue
}else if(item.name=='新北区'){
points1 = [[119.935429,31.893015],[119.761312,31.888846]];
points2 = [[119.761312,31.888846],[119.511745,31.977227]];
}else if(item.name=='武进区'){
points1 = [[119.89806,31.641523],[120.226911,31.503204]];
points2 = [[120.226911,31.503204],[120.308549,31.429283]];
}else if(item.name=='溧阳市'){
points1 = [[119.469748,31.463294],[119.257029,31.415971]];
points2 = [[119.257029,31.415971],[118.984519,31.413999]];
}else if(item.name=='金坛市'){
points1 = [[119.600828,31.753601],[119.352465,31.731982]];
points2 = [[119.352465,31.731982],[119.140896,31.734931]];
}else if(item.name=='其它区'){
continue
}else{
continue
}
}else if(this.citycode==320200){ //无锡
if(item.name=='锡山区'){
points1 = [[120.424466,31.673273],[120.527951,31.717024]];
points2 = [[120.527951,31.717024],[120.800461,31.812074]];
}else if(item.name=='惠山区'){
points1 = [[120.212323,31.691957],[120.127235,31.746999]];
points2 = [[120.127235,31.746999],[119.936937,31.76493]];
}else if(item.name=='滨湖区'){
points1 = [[120.264639,31.455685],[120.307758,31.447306]];
points2 = [[120.307758,31.447306],[120.449762,31.267715]];
}else if(item.name=='梁溪区'){
points1 = [[120.276713,31.587678],[120.181493,31.592199]];
points2 = [[120.181493,31.592199],[119.490229,31.579311]];
}else if(item.name=='新吴区'){
points1 = [[120.433953,31.487715],[120.504954,31.44632]];
points2 = [[120.504954,31.44632],[120.692376,31.413289]];
}else if(item.name=='江阴市'){
points1 = [[120.278654,31.87143],[120.049334,31.936263]];
points2 = [[120.049334,31.936263],[119.885915,31.946865]];
}else if(item.name=='宜兴市'){
points1 = [[119.818505,31.282036],[119.429143,31.31243]];
points2 = [[119.429143,31.31243],[119.23748,31.375592]];
}else if(item.name=='经济开发区'){
continue
}else{
continue
}
}
seriesData.push(
{
type:'lines',
symbol:['image://http-----_point.png'], //起点终点样式
coordinateSystem :'geo', //坐标系类型 geo：地理坐标系
symbolSize:[15,15],
lineStyle:{
opacity:1,
color:'#00C705',
width:0.5
},
data:[{
coords:points1
},
]
},{
type:'lines',
coordinateSystem :'geo', //坐标系类型 geo：地理坐标系
label:{
show:true,
width:this.autowidth/16,
// padding:[30,20],
height:25,
color:'#ffffff',
backgroundColor: {
image: 'http://------/bg.png'
},
},
lineStyle:{
opacity:1,
width:0.5,
color:'#00C705',
},
data:[
{
name:item.name,
coords:points2,
label: {
lineHeight:17,
// padding:[25,20],
padding:[this.autowidth/112,this.autoheight/144],
formatter:[
'{all|已办证：}{one|'+item.papersNum + '\n}{all2|审批中：}{two|'+item.checkNum +'}'
].join('\n'),
rich:{
all:{
align:'left',
color: '#fff',
verticalAlign:'top',
fontSize:this.fontSize(0.13)
},
all2:{
align:'left',
color: '#fff',
verticalAlign:'top',
fontSize:this.fontSize(0.13)
},
one:{
color: '#00C705',
align:'left',
verticalAlign:'top',
fontSize:this.fontSize(0.13)
},
two:{
color: '#FFC233',
align:'left',
verticalAlign:'top',
fontSize:this.fontSize(0.13)
},
}
}
}]
},
);
}
if(this.citycode==320900){
//盐城
myChart.setOption({
tooltip: {
show:true,
// trigger: 'item',
// formatter: '{c}'
},
series:seriesData,
geo: {
map: 'yancheng',
roam: false, //不开启缩放和平移
zoom: 1, //视角缩放比例
label: {
show: true,
fontSize: '10',
color: '#EAEDFF',
emphasis: { //鼠标悬浮相关样式
show:false,
textStyle: {
color: '#F9F9F9'
}
}
},
itemStyle: {
normal:{
areaColor:'#031C6A',
borderColor:'#00FFFF',
borderWidth:0.4
},
emphasis: {
areaColor: '#5D78F2', //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
})
}else if(this.citycode==320400){
//常州
myChart.setOption({
tooltip: {
show:true,
// trigger: 'item',
// formatter: '{c}'
},
series:seriesData,
geo: {
map: 'changzhou',
roam: false, //不开启缩放和平移
zoom: 1.1, //视角缩放比例
label: {
show: true,
fontSize: '10',
color: '#EAEDFF',
emphasis: { //鼠标悬浮相关样式
show:false,
textStyle: {
color: '#F9F9F9'
}
}
},
itemStyle: {
normal:{
areaColor:'#031C6A',
borderColor:'#00FFFF',
borderWidth:0.4
},
emphasis: {
areaColor: '#5D78F2', //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
})
}else if(this.citycode==320200){
//无锡
myChart.setOption({
tooltip: {
show:true,
// trigger: 'item',
// formatter: '{c}'
},
series:seriesData,
geo: {
map: 'wuxi',
roam: false, //不开启缩放和平移
zoom: 1.1, //视角缩放比例
label: {
show: true,
fontSize: '10',
color: '#EAEDFF',
emphasis: { //鼠标悬浮相关样式
show:false,
textStyle: {
color: '#F9F9F9'
}
}
},
itemStyle: {
normal:{
areaColor:'#031C6A',
borderColor:'#00FFFF',
borderWidth:0.4
},
emphasis: {
areaColor: '#5D78F2', //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
})
}
window.addEventListener('resize', function() {
myChart.resize();
});
},?给每个区域添加提示框中间的连接线的的时候，是push了两个对象，直接数组生成折线的方法对本项目不适用；另外需要注意的一点是整个echarts图表中文字的自适应，我在项目中自定义的fontsize方法在需要自适应的地方使用：
fontSize(res) { // 如在1920屏宽下字体设置为12px,就可以传入0.12给fontSize fontSize(0.12)
let docEl = document.documentElement,
clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
},监听窗口变化：
window.addEventListener('resize', function() {
_this.autoWidth();
_this.autoHeight()
});
//解决window.resize 不生效的问题?效果如下：
?先这样吧