学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留言💕~~,谢谢大家⭐️⭐️⭐️~
文章首发于https://juejin.cn/post/7089974569561227271需求:中国切图按照分类展示不同散点图标以及信息
效果图如下:
为了大家能更清楚的看到具体效果,做了一个动图展示
我这里采用的是echars地图实现,技术栈是vue
准备工作
需要引用几个文件echars.js、china.js
<!-- echarts -->
<script type="text/javascript" src="../../static/modify_echarts-4.7.0/echarts.js"></script>
<!-- 中国地图 -->
<script src="../../static/modify_echarts-4.7.0/china.js"></script>
HTML部分
创建一个容器,放置中国地图
<!-- 地图 -->
<div class="top_2">
<div class="chinaMap" ref="chinaMap"></div>
</div>
data数据部分
data: function () {
return {
chinaMap: "",//中国地图
chinaoption: {},
}
},
mounted: function () {
setTimeout(() => {
this.$nextTick(function () {
this.chinaConfigure();
});
}, 0)
},
中国地图配置部分
// 中国地图配置代码
chinaConfigure(mapdata) {
this.chinaMap = echarts.init(document.querySelector('.chinaMap'));
//设置初始地图
var mapname = this.chinaMap;
//data 中的symbol是对应展示的散点图片
var data = [
{
_id: "吉林", value: 45, NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon3.png',
},
{
_id: "长春", value: 45, NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon2.png',
},
{
_id: "西藏", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon1.png',
},
{
_id: "沈阳", value: 45, NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon6.png',
},
{
_id: "大连", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon4.png',
},
{
_id: "烟台", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon5.png',
},
{
_id: "青岛", value: 45, NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon6.png',
},
{
_id: "威海", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon1.png',
},
{
_id: "盐城", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon1.png',
},
{
_id: "昆明", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon4.png',
},
{
_id: "山东", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon4.png',
},
{
_id: "肇庆", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon6.png',
},
{
_id: "嘉兴", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon2.png',
},
{
_id: "茂名", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon1.png',
},
{
_id: "苏州", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon5.png',
},
{
_id: "石嘴山", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon3.png',
},
{
_id: "吴江", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon2.png',
},
{
_id: "临汾", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon1.png',
},
{
_id: "胶州", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon1.png',
},
{
_id: "银川", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon2.png',
},
{
_id: "张家港", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon2.png',
},
{
_id: "三门峡", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon5.png',
},
{
_id: "锦州", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon4.png',
},
{
_id: "柳州", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon3.png',
},
{
_id: "三亚", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon2.png',
},
{
_id: "自贡", value: 45,NDTZJH: 188, GSZE: "3,330,156", count: "9,01,302",
symbol: 'image://../images/icon1.png',
},
];
window.onresize = this.chinaMap.resize //实现地图自适应
// 所有城市的数据
var geoCoordMap2 = {
'台湾': [122, 23],
'黑龙江': [126.661669, 45.742347],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京': [116.4551, 40.2539],
"辽宁": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陕西": [109.1162, 34.2004],
"甘肃": [103.5901, 36.3043],
"宁夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [88.388277, 31.56375],
"四川": [103.9526, 30.7617],
"重庆": [108.384366, 30.439702],
"山东": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江苏": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
"福建": [119.4543, 25.9222],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
"广西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.4648, 31.2891],
"海门": [121.15, 31.89],
"鄂尔多斯": [109.781327, 39.608266],
"招远": [120.38, 37.35],
"舟山": [122.207216, 29.985295],
"齐齐哈尔": [123.97, 47.33],
"盐城": [120.13, 33.38],
"赤峰": [118.87, 42.28],
"青岛": [120.33, 36.07],
"乳山": [121.52, 36.89],
"金昌": [102.188043, 38.520089],
"泉州": [118.58, 24.93],
"莱西": [120.53, 36.86],
"日照": [119.46, 35.42],
"胶南": [119.97, 35.88],
"南通": [121.05, 32.08],
"拉萨": [91.11, 29.97],
"云浮": [112.02, 22.93],
"梅州": [116.1, 24.55],
"文登": [122.05, 37.2],
"上海": [121.48, 31.22],
"攀枝花": [101.718637, 26.582347],
"威海": [122.1, 37.5],
"承德": [117.93, 40.97],
"厦门": [118.1, 24.46],
"汕尾": [115.375279, 22.786211],
"潮州": [116.63, 23.68],
"丹东": [124.37, 40.13],
"太仓": [121.1, 31.45],
"曲靖": [103.79, 25.51],
"烟台": [121.39, 37.52],
"福州": [119.3, 26.08],
"瓦房店": [121.979603, 39.627114],
"即墨": [120.45, 36.38],
"抚顺": [123.97, 41.97],
"玉溪": [102.52, 24.35],
"张家口": [114.87, 40.82],
"阳泉": [113.57, 37.85],
"莱州": [119.942327, 37.177017],
"湖州": [120.1, 30.86],
"汕头": [116.69, 23.39],
"昆山": [120.95, 31.39],
"宁波": [121.56, 29.86],
"湛江": [110.359377, 21.270708],
"揭阳": [116.35, 23.55],
"荣成": [122.41, 37.16],
"连云港": [119.16, 34.59],
"葫芦岛": [120.836932, 40.711052],
"常熟": [120.74, 31.64],
"东莞": [113.75, 23.04],
"河源": [114.68, 23.73],
"淮安": [119.15, 33.5],
"泰州": [119.9, 32.49],
"南宁": [108.33, 22.84],
"营口": [122.18, 40.65],
"惠州": [114.4, 23.09],
"江阴": [120.26, 31.91],
"蓬莱": [120.75, 37.8],
"韶关": [113.62, 24.84],
"嘉峪关": [98.289152, 39.77313],
"广州": [113.23, 23.16],
"延安": [109.47, 36.6],
"太原": [112.53, 37.87],
"清远": [113.01, 23.7],
"中山": [113.38, 22.52],
"昆明": [102.73, 25.04],
"寿光": [118.73, 36.86],
"盘锦": [122.070714, 41.119997],
"长治": [113.08, 36.18],
"深圳": [114.07, 22.62],
"珠海": [113.52, 22.3],
"宿迁": [118.3, 33.96],
"咸阳": [108.72, 34.36],
"铜川": [109.11, 35.09],
"平度": [119.97, 36.77],
"佛山": [113.11, 23.05],
"海口": [110.35, 20.02],
"江门": [113.06, 22.61],
"章丘": [117.53, 36.72],
"肇庆": [112.44, 23.05],
"大连": [121.62, 38.92],
"临汾": [111.5, 36.08],
"吴江": [120.63, 31.16],
"石嘴山": [106.39, 39.04],
"沈阳": [123.38, 41.8],
"苏州": [120.62, 31.32],
"茂名": [110.88, 21.68],
"嘉兴": [120.76, 30.77],
"长春": [125.35, 43.88],
"胶州": [120.03336, 36.264622],
"银川": [106.27, 38.47],
"张家港": [120.555821, 31.875428],
"三门峡": [111.19, 34.76],
"锦州": [121.15, 41.13],
"南昌": [115.89, 28.68],
"柳州": [109.4, 24.33],
"三亚": [109.511909, 18.252847],
"自贡": [104.778442, 29.33903],
"吉林": [126.57, 43.87],
"阳江": [111.95, 21.85],
"泸州": [105.39, 28.91],
"西宁": [101.74, 36.56],
"宜宾": [104.56, 29.77],
"呼和浩特": [111.65, 40.82],
"成都": [104.06, 30.67],
"大同": [113.3, 40.12],
"镇江": [119.44, 32.2],
"桂林": [110.28, 25.29],
"张家界": [110.479191, 29.117096],
"宜兴": [119.82, 31.36],
"北海": [109.12, 21.49],
"西安": [108.95, 34.27],
"金坛": [119.56, 31.74],
"东营": [118.49, 37.46],
"牡丹江": [129.58, 44.6],
"遵义": [106.9, 27.7],
"绍兴": [120.58, 30.01],
"扬州": [119.42, 32.39],
"常州": [119.95, 31.79],
"潍坊": [119.1, 36.62],
"重庆": [106.54, 29.59],
"台州": [121.420757, 28.656386],
"南京": [118.78, 32.04],
"滨州": [118.03, 37.36],
"贵阳": [106.71, 26.57],
"无锡": [120.29, 31.59],
"本溪": [123.73, 41.3],
"克拉玛依": [84.77, 45.59],
"渭南": [109.5, 34.52],
"马鞍山": [118.48, 31.56],
"宝鸡": [107.15, 34.38],
"焦作": [113.21, 35.24],
"句容": [119.16, 31.95],
"北京": [116.46, 39.92],
"徐州": [117.2, 34.26],
"衡水": [115.72, 37.72],
"包头": [110, 40.58],
"绵阳": [104.73, 31.48],
"乌鲁木齐": [87.68, 43.77],
"枣庄": [117.57, 34.86],
"杭州": [120.19, 30.26],
"淄博": [118.05, 36.78],
"鞍山": [122.85, 41.12],
"溧阳": [119.48, 31.43],
"库尔勒": [86.06, 41.68],
"安阳": [114.35, 36.1],
"开封": [114.35, 34.79],
"济南": [117, 36.65],
"德阳": [104.37, 31.13],
"温州": [120.65, 28.01],
"九江": [115.97, 29.71],
"邯郸": [114.47, 36.6],
"临安": [119.72, 30.23],
"兰州": [103.73, 36.03],
"沧州": [116.83, 38.33],
"临沂": [118.35, 35.05],
"南充": [106.110698, 30.837793],
"天津": [117.2, 39.13],
"富阳": [119.95, 30.07],
"泰安": [117.13, 36.18],
"诸暨": [120.23, 29.71],
"郑州": [113.65, 34.76],
"哈尔滨": [126.63, 45.75],
"聊城": [115.97, 36.45],
"芜湖": [118.38, 31.33],
"唐山": [118.02, 39.63],
"平顶山": [113.29, 33.75],
"邢台": [114.48, 37.05],
"德州": [116.29, 37.45],
"济宁": [116.59, 35.38],
"荆州": [112.239741, 30.335165],
"宜昌": [111.3, 30.7],
"义乌": [120.06, 29.32],
"丽水": [119.92, 28.45],
"洛阳": [112.44, 34.7],
"秦皇岛": [119.57, 39.95],
"株洲": [113.16, 27.83],
"石家庄": [114.48, 38.03],
"莱芜": [117.67, 36.19],
"常德": [111.69, 29.05],
"保定": [115.48, 38.85],
"湘潭": [112.91, 27.87],
"金华": [119.64, 29.12],
"岳阳": [113.09, 29.37],
"长沙": [113, 28.21],
"衢州": [118.88, 28.97],
"廊坊": [116.7, 39.53],
"菏泽": [115.480656, 35.23375],
"合肥": [117.27, 31.86],
"武汉": [114.31, 30.52],
"大庆": [125.03, 46.58]
};
//给每个地区赋值
var convertData2 = function (data) {
//定义一个数组
var res = [];
//循环遍历每个区域值
for (var i = 0; i < data.length; i++) {
//获取坐标
var geoCoord = geoCoordMap2[data[i]._id];
//判断是否有坐标
if (geoCoord) {
//往数组里设置值
res.push({
name: data[i]._id,
value: geoCoord.concat(i + 1),
NDTZJH: data[i].NDTZJH,//年度投资计划
GSZE: data[i].GSZE,//概算总额
count: data[i].count,//项目数量
symbol:data[i].symbol,
});
}
}
return res;
};
this.chinaoption = {
color: ['', '#fc5353', '#f4fc6c', '#e68b55', '#9a68ff', '#ff60c5'],/*地图上面的五大项颜色*/
backgroundColor: 'transparent',
geo: {
type: 'map',
map: 'china',
roam: false,
zoom: 1.2,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: '#fff'
}
},
emphasis: { // 对应的鼠标悬浮效果
show: true,
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
areaColor: "rgba(2,68,158, .5)",//地图颜色rgba(11, 50, 119, .5)
borderWidth: 1,//设置外层边框
borderColor: "rgba(65,154,225, 1)",//地图外边框颜色rgba(43, 196, 243, 1)
label: {
show: true,//是否显示标签
textStyle: {
color: "rgba(255,255,255,.5)"//地图文字的颜色
}
}
},
emphasis: {
areaColor: '#01215c',
}
},
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图南海诸岛
normal: {
// opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
],
},
tooltip: {
trigger: 'item',
show: true,
backgroundColor: "transparent",
formatter: function (params) {
if (params.data) {
var htmlStr = '';
htmlStr += '<div class="bgboder">';
htmlStr += '<div id="city">' + params.name + '</div><div id="trans">年度投资计划:' + params.data.NDTZJH + '<span>万元</span>' + '</div><div id="trans">概算总额:' + params.data.GSZE + '<span>万元</span>' + '</div><div id="trans">项目数量:' + params.data.count + '<span>万元</span>' + '</div>';
htmlStr += '</div>';
return htmlStr;
} else {
}
},
textStyle: {
width: 300,
height: 300,
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: convertData2(data),
symbolSize: 0,
},
{
name: '地图数据',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData2(data),
symbolSize: 25,
// symbol:'image://' + fengdianiconBlue,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {//控制散点的样式
normal: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'red'
}, {
offset: 0.8,
color: 'red'
}, {
offset: 1,
color: 'red'
}],
global: true // 缺省为 false
},
}
},
},
]
}
this.chinaMap.setOption(this.chinaoption);
window.onresize = () => {
this.chinaMap.resize()
}
window.addEventListener('resize', () => {
this.chinaMap.resize()
})
},
注:geoCoordMap2是需要所有城市的数据,我这里的数据不是很全,大家可以找到合适的数据替换一下就可以,或者从后台提供数据进行获取,大家有什么更好的建议和方法也欢迎提出来😊。
最后感谢大家阅读,如果喜欢可以点赞或留言💕~~,谢谢大家⭐️⭐️⭐️~