<template>
<div class="mapCont">
<div id="mapSelf"></div>
</div>
</template>
<script>
// import $echarts from "../../node_modules/echarts/dist/echarts";//main.js不全局引的话 ，这要单独引入
import mapData from "../assets/sichuan";//引入四川的json数据 下载地址http://datav.aliyun.com/tools/atlas/#&lat=37.82280243352756&lng=107.4462890625&zoom=4
export default {
name: "HelloWorld",
data() {
return {};
},
methods: {},
mounted() {
var geoCoordMap = {
//自定义城市坐标
"青岛": [120.33, 36.07],
"厦门": [118.1, 24.46],
"宁波": [121.56, 29.86],
"深圳": [114.07, 22.62],
"大连": [121.62, 38.92],
"成都": [102.62, 27.92],
"重庆": [104.62, 30.92],
"云南": [101.62, 28.92],
"上海": [106.62, 28.92],
'川西': [103.62, 28.92],
'新疆': [100.62, 27.92]
};
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
console.log(data)
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
jwd: geoCoord.concat(data[i].jwd)
});
}
}
return res;
};
//因为我在main.js全局引入了，所以用----------this.$echarts
//如果只在当前页面用，就用上面的import------- $echarts
this.$echarts.registerMap("sichuan", mapData); //mapData是定义的四川数据初始化
var chart = this.$echarts.init(document.getElementById("mapSelf"));
chart.setOption({
legend: {
orient: 'vertical',
x:'left',
data:['计划扣篮','计划红点']
},
tooltip: {
trigger: "item",
formatter: "{b}",
// formatter: function(params) {
// var res = params.name+'<br/>';
// var myseries = Option.series;
// if (convertData) {
// for (var i = 0; i < myseries.length-1; i++) {
// for(var j=0;j<myseries[i].data.length;j++) {
// if(myseries[i].data[j].name==params.name){
// res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
// }
// }
// }
// }
// else {
// for (var i = 0; i < myseries.length; i++) {
// for(var j=0;j<myseries[i].data.length;j++){
// if(myseries[i].data[j].name==params.name){
// res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
// }
// }
// }
// }
// return res;
// console.log(params)
// }
},
geo: {//必须要，标点就是根据这个
map: "sichuan",
},
series: [
{
type: "map",
map: "sichuan",
aspectScale: 0.75, //长宽比
selectedMode: "single", //表示选种模式是否为单选"mutiple"表多选
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true,
textStyle: {
color: "#999", //文字颜色
fontSize: 12
}
},
emphasis: {
show: true,
textStyle: {
color: "#fff", //鼠标hover文字颜色
fontSize: 12
}
}
},
itemStyle: {
normal: {
areaColor: "#323c48", //整个背景填充颜色
borderColor: "dodgerblue" //边界颜色
},
emphasis: {
areaColor: "darkorange" //鼠标hover颜色，区域选中颜色
}
},
data: [
{ name: "阿坝藏族羌族自治州", code: "434" },
{ name: "成都市", code: "1234", selected:true },
{ name: "雅安市", code: "234" },
{ name: "德阳市", code: "634" },
{ name: "资阳市", code: "934" },
{ name: "乐山市", code: "2234" }
]
}
,
{
name: "计划扣篮",
type: "effectScatter", //影响散点
coordinateSystem: "geo",
symbolSize: 12,
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
label: {
normal: {
color: "blue",
formatter: "{b}",
position: "right",
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: "blue",
shadowBlur: 10,
shadowColor: "blue" //闪烁圈的颜色
}
},
data: convertData([
{ name: "云南" ,jwd:[102.62, 27.92],value:"12"},
{ name: "成都",jwd: [101.62, 28.92],value:"22"},
])
},
{
name: "计划红点",
type: "effectScatter", //影响散点
coordinateSystem: "geo",
symbolSize: 12,
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
label: {
normal: {
color: "red",
formatter: "{b}",
position: "right",
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: "red",
shadowBlur: 10,
shadowColor: "red" //闪烁圈的颜色
}
},
data: convertData([
{ name: "重庆" ,jwd: [100.62, 27.92],value:"12"},
{ name: "川西",jwd: [104.62, 30.92],value:"22"},
])
}
]
});
// 点击每个市所获取到的值，这里可进行相关操作
chart.on("click", function(params) {
console.log(params);
});
window.addEventListener("resize", function() {
chart.resize();
});
}
};
</script>
<style scoped>
.mapCont {
1000px;
height: 800px;
}
#mapSelf {
100%;
height: 100%;
}
</style>