vue 使用echarts地图实现全国地图
代码参考来自 <https://www.cnblogs.com/lude1994/p/12482355.html>
json数据自己收集保存，包含世界坐标、全国坐标及各省份内的坐标
附代码及json数据下载：https://download.csdn.net/download/loa_loa/19339991?spm=1001.2014.3001.5503
地图json数据：
http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json
1.安装echarts
npm install echarts --save
2.在main.js中引入
import echarts from 'echarts';
//引入遇到报错 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
//新版本需要使用该代码引入 ：const echarts = require('echarts');
import 'echarts/map/js/china.js'; //node_modules中 官方依赖已不提供map文件 需要自行导入其中
Vue.prototype.$echarts = echarts3.在页面中使用：
4.将函数写在methods中，然后再mounted中调用
js函数方法：
getmap() {
// 基于准备好的dom(myEchartPillar)，初始化echarts实例
let myChart = this.$echarts.init(this.$refs.map);
this.$echarts.registerMap('china',china);
var mapName = 'china'
var data = [
{
code: "10",
name: "其他",
value: 5
},
{
code: "11",
name: "北京市",
value: 26
},
{
code: "12",
name: "天津市",
value: 1
},
{
code: "13",
name: "河北省",
value: 3
},
{
code: "31",
name: "上海市",
value: 6
},
{
code: "32",
name: "江苏省",
value: 8
},
{
code: "33",
name: "浙江省",
value: 3
},
{
code: "34",
name: "安徽省",
value: 2
},
{
code: "35",
name: "福建省",
value: 1
},
{
code: "37",
name: "山东省",
value: 4
},
{
code: "41",
name: "河南省",
value: 3
},
{
code: "42",
name: "湖北省",
value: 3
},
{
code: "44",
name: "广东省",
value: 25
},
{
code: "61",
name: "陕西省",
value: 3
}
];
var geoCoordMap = {};
var toolTipData= [
{
code: "10",
name: "其他",
value: 5
},
{
code: "11",
name: "北京市",
value: 26
},
{
code: "12",
name: "天津市",
value: 1
},
{
code: "13",
name: "河北省",
value: 3
},
{
code: "31",
name: "上海市",
value: 6
},
{
code: "32",
name: "江苏省",
value: 8
},
{
code: "33",
name: "浙江省",
value: 3
},
{
code: "34",
name: "安徽省",
value: 2
},
{
code: "35",
name: "福建省",
value: 1
},
{
code: "37",
name: "山东省",
value: 4
},
{
code: "41",
name: "河南省",
value: 3
},
{
code: "42",
name: "湖北省",
value: 3
},
{
code: "44",
name: "广东省",
value: 25
},
{
code: "61",
name: "陕西省",
value: 3
}
];
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function(v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
var max = 480,
min = 9; // todo
var maxSize4Pin = 100,
minSize4Pin = 20;
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
//指定图表的配置项和数据，绘制图表
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: function(params) {
var toolTiphtml = ''
if (typeof(params.value)[2] == "undefined") {
for (let i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + '：'+toolTipData[i].value
}
}
console.log(toolTiphtml)
// console.log(convertData(data))
return toolTiphtml;
} else {
for (let i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + '：'+toolTipData[i].value
}
}
console.log(toolTiphtml)
// console.log(convertData(data))
return toolTiphtml;
}
}
},
// legend: {
// orient: 'vertical',
// y: 'bottom',
// x: 'right',
// data: ['credit_pm2.5'],
// textStyle: {
// color: '#fff'
// }
// },
visualMap: {
show: true,
min: 0,
max: 25,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#83c5ff', '#c6eb68'] // 蓝绿
}
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#f8f8f8',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a * min;
b = maxSize4Pin - a * max;
return a * val[2] + b;
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#9c0a16', //标志颜色
}
},
zlevel: 6,
data: convertData(data),
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
}
},
zlevel: 1
},
]
});
//解决自适应
setTimeout(function() {
window.addEventListener("resize", () => {
myChart.resize();
});
}, 500);
}调用：
this.getmap();
5.效果图
