echarts - 地图Map

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
}

如上地图已经可以正常显示