echarts 画中国地图

数据可视化平台，中国各省数据和坐标

阿里云可视化

效果

使用echart画中国地图，步骤如下

1.安装依赖

npm i echarts@4

2. 创建一个js文件
   当你可以访问https请求的时候则使用，如下代码

import axios from "axios";
export default axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json")复制

如果无法请求https接口，则直接导入

3。配置option配置项并初始化元素

<template>
  <div class="echarts_map">
    <div style="width:100%;height:1000px" ref="chartsDOM"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
import list from "@/api/index";
export default {
    data() {
        return {
            data: [
                { name: '北京市', value: 88 },
                { name: '天津市', value: 88 },
                { name: '上海市', value: 66 },
                { name: '重庆市', value: 42 },
                { name: '河北省', value: 99 },
                { name: '河南省', value: 52 },
                { name: '云南省', value: 33 },
                { name: '辽宁省', value: 22 },
                { name: '黑龙江省', value: 22 },
                { name: '湖南省', value: 22 },
                { name: '安徽省', value: 22 },
                { name: '山东省', value: 22 },
                { name: '新疆维吾尔自治区', value: 22 },
                { name: '江苏省', value: 22 },
                { name: '浙江省', value: 22 },
                { name: '江西省', value: 15 },
                { name: '湖北省', value: 33 },
                { name: '广西壮族自治区', value: 22 },
                { name: '甘肃省', value: 88 },
                { name: '山西省', value: 16 },
                { name: '内蒙古', value: 56 },
                { name: '陕西省', value: 33 },
                { name: '吉林省', value: 99 },
                { name: '福建省', value: 28 },
                { name: '贵州省', value: 25 },
                { name: '广东省', value: 33 },
                { name: '青海省', value: 88 },
                { name: '西藏自治区', value: 25 },
                { name: '内蒙古自治区', value: 1 },
                { name: '四川省', value: 45 },
                { name: '宁夏回族自治区', value: 36 },
                { name: '海南省', value: 22 },
                { name: '台湾省', value: 22 },
                { name: '香港特别行政区', value: 22 },
                { name: '澳门特别行政区', value: 22 }
            ]
        }
    },
    mounted() {
        // 初始化统计图对象
        var myChart = echarts.init(this.$refs["chartsDOM"]);
        // 显示 loading 动画
        myChart.showLoading();
        // 再得到数据的基础上，进行地图绘制
 
        // 得到结果后，关闭动画
        myChart.hideLoading();
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap('China', list[0]);
        var option = {
            title: {
                show: true,
                text: '港澳通行证 1000人',
                bottom: '10px',
                left: '10%',
                textStyle: {
                    color: '#1D2129',
                    fontSize: '14px'
                }
            },
            tooltip: {
				trigger: 'item',
				formatter: '{b}<br/>{c} 人'
			},visualMap: {
				min: 0,
				max: 100,
				// text: ['100', '0'],
				realtime: false,
				calculable: true,
				inRange: {
					color: ['#A4C8FF', '#71A9FF']
				}
			},
			geo: {
				map: 'china',
				roam: false,
				label: {
					emphasis: {
						show: true
					}
				},
				// 当前视角的缩放比例/中心  用于隐藏底部的南沙群岛地区 
				center: [105, 30],
				zoom: 1.2,
				aspectScale: 1
			},
            series: [
                {
                    name: '中国地图',
                    type: 'map',
                    map: 'China',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
                    label: {
                        show: true,
                        normal: {
                            show: true, //显示省份标签
                            textStyle: {
                                color: "blue"
                            } //省份标签字体颜色
                        },
                        emphasis: { //对应的鼠标悬浮效果
                            show: false,
                            textStyle: {
                                color: "#800080"
                            }
                        }
                    },
                    aspectScale: 0.75,
                    zoom: 1.2,
                    itemStyle: {
                        normal: {
                            borderWidth: .5, //区域边框宽度
                            borderColor: '#009fe8', //区域边框颜色
                            areaColor: "#ffefd5", //区域颜色
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor: "#ffdead",
                        }
                    },
                    data: this.data
                },
            ],
            
        };
        myChart.setOption(option);
    },
    methods: {
        init() {
 
        }
    }
}
</script>
 
<style lang="less" scoped>
@import url(./index.less);
</style>复制