<template>
<div class="mapCont">
<div id="mapSelf"></div>
</div>
</template>
<script>
// import $ echarts from "../../node_modules/echarts/dist/echarts";//main.js not global lead, then, to introduce it alone
import mapData from "../assets/sichuan";// incorporated json data Sichuan
export default {
name: "mapComponent",
data() {
return {};
},
methods: {},
mounted() {
// Because I introduced main.js global, so use ---------- this. $ Echarts
// if only used in the current page, use the above import ------- $ echarts
this $ echarts.registerMap ( "sichaun", mapData);. // mapData initialization data is defined Sichuan
var chart = this.$echarts.init(document.getElementById("mapSelf"));
chart.setOption({
tooltip: {
trigger: "item",
formatter: "{b}"
},
series: [
{
type: "map",
map: "sichaun",
aspectScale: 0.75, // aspect ratio
data: [// This is the data for each city
{Name: "Chengdu", code: "1234"},
{Name: "Ya City", code: "234",},
{Name: "Deyang", code: "634"},
{ name: "资阳市", code: "934" },
{Name: "Leshan City", code: "2234"}
],
label: {
normal: {
show: true,
textStyle: {
color: "# 999", // text color
fontSize: 12
}
},
emphasis: {
show: true,
textStyle: {
color: "#fff", // mouse hover text color
fontSize: 12
}
}
},
itemStyle: {
normal: {
areaColor: "# 323c48", // fill the entire background color
borderColor: "dodgerblue" // border color
},
emphasis: {
areaColor: "darkorange" // mouse hover color
}
}
}
]
});
// Click acquired value of each city, there may be related operations
chart.on("click", function(params) {
console.log(params);
});
window.addEventListener("resize", function() {
chart.resize();
});
}
};
</script>
<style scoped>
.mapCont {
width: 600px;
height: 600px;
}
#mapSelf {
width: 100%;
height: 100%;
}
</style>
// global introduction main.js
//import echarts from 'echarts'
//Vue.prototype.$echarts = echarts