
<div id="lnMap" class="ln_map"></div>
data() {
return {
initMapChart:''
}
},
methods: {
initSMap() {
let that = this;
let name = "bj";
let uploadedDataURL = require("../../assets/LiaoNing.json");
that.initMapChart = this.$echarts.init(document.getElementById("lnMap"));
that.$echarts.registerMap(name, uploadedDataURL);
let _data = [
{
name: "沈阳市",
value: 155,
id: 0,
selected: true
},
{
name: "大连市",
value: 107,
id: 1,
selected: false
},
{
name: "鞍山市",
id: 2,
value: 25,
selected: false
},
{
name: "抚顺市",
id: 3,
value: 3,
selected: false
},
{
name: "本溪市",
value: 24,
id: 4,
selected: false
},
{
name: "丹东市",
id: 5,
value: 30,
selected: false
},
{
name: "锦州市",
value: 36,
id: 6,
selected: false
},
{
name: "营口市",
value: 20,
id: 7,
selected: false
},
{
name: "阜新市",
value: 55,
id: 8,
selected: false
},
{
name: "辽阳市",
value: 48,
id: 9,
selected: false
},
{
name: "盘锦市",
value: 29,
id: 10,
selected: false
},
{
name: "铁岭市",
value: 28,
id: 11,
selected: false
},
{
name: "朝阳市",
value: 33,
id: 12,
selected: false
},
{
name: "葫芦岛市",
value: 30,
id: 13,
selected: false
}
];
const option = {
visualMap: {
show: false,
min: 0,
max: 50,
left: "left",
top: "bottom",
text: ["高", "低"], // 文本,默认为数值文本
calculable: true,
inRange: {
color: [
"rgba(9, 31, 226, 0.6)",
"rgba(9, 31, 226, 0.7)",
"rgba(9, 31, 226, 0.8)",
"rgba(9, 31, 226, 0.9)",
"rgba(9, 31, 226, 1)"
]
},
textStyle: {
color: "#333"
// fontSize:"17px"
}
},
geo: {
map: name,
zoom: 1.2,
layoutSize: "100%"
},
series: [
{
type: "map",
mapType: name,
showLegendSymbol: false,
label: {
normal: {
show: true,
color: "#fff" //地图上文字颜色
},
emphasis: {
textStyle: {
color: "#fff"
}
}
},
zoom: 1.2, //地图放大比列
itemStyle: {
normal: {
borderColor: "#bccdf5",
areaColor: "#fff"
},
emphasis: {
areaColor: "#ff7113",
borderWidth: 1
}
},
markPoint: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "blue" // 100% 处的颜色
}
],
global: false // 缺省为 false
},
symbolSize: 20, // 图片大小
label: {
position: "top",
color: "#fff"
},
data: []
},
data: _data
}
]
};
that.initMapChart.setOption(option);
that.initMapChart.on("click", function(params) {
_data.map(res => {
if (res.name == params.name) {
res.selected = true;
} else {
res.selected = false;
}
return res;
});
that.initMapChart.setOption(option);
});
window.addEventListener("resize", () => {
that.initMapChart.resize();
});
},
}
mounted() {
this.initSMap();
}