vue+echarts中国地图数据可视化展示

1、效果展示

 

2、步骤：

2.1、在main.js文件中加入

//引入echarts

import * as echarts from "echarts";

Vue.prototype.$echarts = echarts;

2.2、然后创建一个新的文件 chinaMap.vue

<template>
    <!-- 注意，这里必须设置宽高，并且宽高不能都设置为100%，否则显示的是空白 -->
    <div id="china_map" style="width: 100%; height: 450px;"></div>
</template>;

<script>
    import * as echarts from "echarts";
    import china from "../../components/china.json";  //中国地图
    echarts.registerMap("china", china);
    export default {
        data() {
            return {
                MapDataList: [
                    {
                        name: "黑龙江",
                        value: 44,
                        perf: "1%",
                    },
                    {
                        name: "湖南",
                        value: 23,
                        perf: "70%",
                    },
                    {
                        name: "云南",
                        value: 68,
                        perf: "70%",
                    },
                    {
                        name: "安徽",
                        value: 66,
                        perf: "60%",
                    }
                ]
            };  
        },
        mounted() {
            this.setMapData();
            this.$nextTick(() => {
                // if (this.chinachart == null) {
                    this.setMapData();
                // }
            });
        },
        methods: {
            // 地图
            setMapData() {
                // 初始化echarts实例 #D8E9FD
                this.chinachart = echarts.init(document.getElementById("china_map"));
                // 进行相关配置
                this.chartOption = {
                    tooltip: { // 鼠标移到图里面的浮动提示框
                        // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
                        formatter(params, ticket, callback) {
                            // params.data 就是series配置项中的data数据遍历
                            let localValue, perf, downloadSpeep, usability, point;
                            if (params.data) {
                                localValue = params.data.value;
                                perf = params.data.perf;
                                downloadSpeep = params.data.downloadSpeep;
                                usability = params.data.usability;
                                point = params.data.point;
                            } else {// 为了防止没有定义数据的时候报错写的
                                localValue = 0;
                                perf = 0;
                            }
                            let htmlStr = `<div style='font-size:18px;'> ${params.name}</div>
                                <p style='text-align:left;margin-top:-4px;'>项目数量：${localValue}<br/>占比：${perf}<br/></p>`;
                            return htmlStr;
                        },
                        backgroundColor: "#ff7f50", //提示标签背景颜色
                        textStyle: { color: "#fff" }, //提示标签字体颜色
                        padding: [5, 10, 0, 10],  // 设置上下的内边距为 5,0，左右的内边距为 10
                    },
                    visualMap: {  
                        show: true,
                        bottom: 20,
                        left: 100,
                        // left: 50, top: '30%', right: 0, bottom: 0,  //定位的左上角以及右下角分别所对应的经纬度
                        text: ["200", "0"],
                        min: 0,
                        itemHeight: 200,  //图形的高度，即长条的高度。
                        color: [
                            '#ee6666',//红色
                            '#fc8452',//橙色
                            '#fac858',//黄色
                            '#9a60b4',//紫色
                            '#ea7ccc',//淡紫
                            '#3ba272',//绿色
                            '#91cc75',//浅绿
                            '#5470c6',//蓝色
                            '#73c0de',//淡蓝
                        ]
                    },    
                    geo: {  // 地理坐标系组件用于地图的绘制// geo配置详解： https://echarts.baidu.com/option.html#geo
                        map: "china", // 表示中国地图
                        // roam: true, // 是否开启鼠标缩放和平移漫游
                        zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
                        label: {
                            show: true
                        },
                        emphasis: {  // 地图区域的多边形 图形样式。
                            borderColor: "#ffffff",//未选中的状态
                            areaColor: "#D8E9FD", //背景颜色
                            label: {
                                show: true, //显示名称
                            },
                            itemStyle: {  //选中的状态// 高亮状态下的多边形和标签样式
                                shadowBlur: 20,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                                borderColor: "#fff",
                                areaColor: "#DA3A3A",
                            },
                        },
                    },
                    series: [
                        {
                            name: "地图", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
                            type: "map",
                            geoIndex: 0,
                            label: {
                                show: true,
                            },
                            // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
                            data: this.MapDataList,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示地图数据
                this.chinachart.setOption(this.chartOption);
            },
        }
    }
</script>

2.4、把data.json文件放到components目录下面

2.5、把map文件夹放到node_modules\echarts目录下面

3、文件链接：链接：https://pan.baidu.com/s/1p6HQepob0HMZKpyRaCdvbA?pwd=6666 
提取码：6666