vue中使用echarts畫省份地圖
1.安裝echarts
npm install echarts --save
2.引入echarts
// 在main.js中引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
- 示例
<template>
<div class="maps-container">
<div id="main" style="width:100%; height:100%"></div>
</div>
</template>
<script>
import "echarts/map/js/province/yunnan.js";
import obj from "echarts/map/json/province/yunnan.json";
export default {
data() {
return {
listArr: [], //城市json
max: "", //最大value值
min: "" // 最小value值
};
},
created() {
this.getData();
},
mounted() {
this.DrawMap();
},
methods: {
getData() {
// 獲取城市名稱數(shù)據(jù)
console.log("取到的云南省的json數(shù)據(jù)", obj);
if (obj) {
let arr = obj.features;
// 循環(huán)取出 城市名稱和value值
for (var j = 0; j < arr.length; j++) {
this.max = arr[0].id;
this.min = arr[0].id;
if (arr[j].id > this.max) {
this.max = arr[j].id;
}
if (arr[j].id < this.min) {
this.min = arr[j].id;
}
this.listArr.push({
name: arr[j].properties.name,
value: arr[j].id
});
}
}
},
DrawMap() {
let _this = this;
let myChart8 = this.$echarts.init(document.getElementById("main"));
console.log(
"最大value值",
this.max,
"\n",
"最小value值",
this.min,
"\n",
"城市數(shù)據(jù)",
this.listArr
);
myChart8.setOption({
visualMap: {
min: _this.min,
max: _this.max,
show: false,
inRange: {
color: ["lightskyblue", "yellow", "orangered"]
}
},
series: [
{
type: "map",
map: "云南",
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } },
emphasis: {
areaColor: "#67C23A" //鼠標(biāo)進(jìn)入時(shí)的顏色
}
},
data: _this.listArr
}
]
});
}
}
};
</script>
<style scoped lang="scss">
.maps-container {
width: 100%;
height: 100%;
}
</style>
yunan.png
