echarts - 地图Map
安装echarts
npm install echarts
下载china.js
链接: https://pan.baidu.com/s/1DAmhOEQxZTHzVHPZc7aBsw 提取码: bin8
地图使用
引用 echarts 和china.js,并配置地图数据 (一定要设置宽高)
<template>
<div>
<div id="main" ref="map"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import china from "../../common/china.js";
export default{
data(){
return{
dataList: [
{name: "南海诸岛"},
{ename: "beijing", name: "北京"},
{ename: "tianjin", name: "天津"},
{ename: "shanghai", name: "上海"},
{ename: "chongqing", name: "重庆"},
{ename: "hebei", name: "河北"},
{ename: "henan", name: "河南"},
{ename: "yunnan", name: "云南"},
{ename: "liaoning", name: "辽宁"},
{ename: "heilongjiang", name: "黑龙江"},
{ename: "hunan", name: "湖南"},
{ename: "anhui", name: "安徽"},
{ename: "shandong", name: "山东"},
{ename: "xinjiang", name: "新疆"},
{ename: "jiangsu", name: "江苏"},
{ename: "zhejiang", name: "浙江"},
{ename: "jiangxi", name: "江西"},
{ename: "hubei", name: "湖北"},
{ename: "guangxi", name: "广西"},
{ename: "gansu", name: "甘肃"},
{ename: "shanxi", name: "山西"},
{ename: "neimenggu", name: "内蒙古"},
{ename: "shanxi1", name: "陕西"},
{ename: "jilin", name: "吉林"},
{ename: "fujian", name: "福建"},
{ename: "guizhou", name: "贵州"},
{ename: "guangdong", name: "广东"},
{ename: "qinghai", name: "青海"},
{ename: "xizang", name: "西藏"},
{ename: "sichuan", name: "四川"},
{ename: "ningxia", name: "宁夏"},
{ename: "hainan", name: "海南"},
{name: "台湾"},
{ename: "xianggang", name: "香港"},
{ename: "aomen", name: "澳门"},
],
}
}
}
</script>
<style scoped>
#main {
width: 1200px;
height: 800px;
margin: auto;
}
</style>
设置地图数据
initEchart(){
let dataList = this.dataList;
// 设置显示数据(使用随机数制造的假数据)
for (let i = 0; i < dataList.length; i++) {
dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
}
// 初始化图例
let myChart = echarts.init(document.getElementById("main"));
let option = {
tooltip: {
//数据格式化
formatter: function (params, callback) {
return (
params.seriesName + "<br />" + params.name + ":" + params.value
);
},
},
visualMap: {
min: 0,
max: 1000,
left: "left",
top: "bottom",
text: ["高", "低"], //取值范围的文字
inRange: {
color: ["#e0ffff", "blue"], //取值范围的颜色
},
show: true, //图注
},
geo: {
map: "china", //引入地图数据
roam: true, //不开启缩放和平移
zoom: 1, //视角缩放比例
label: {
normal: {
show: true,
fontSize: "10",
color: "rgba(0,0,0,0.7)",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: { //高亮的显示设置
areaColor: "skyblue", //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
series: [
{
name: "省份",
type: "map",
geoIndex: 0,
data: this.dataList,
},
],
};
myChart.setOption(option);// 添加配置到echarts
}
如上地图已经可以正常显示