1、图表容器

<div :style="{height: scrollerHeight,width: scrollerWeight}" ref="charts"></div>

2、引入echarts

import * as echarts from "echarts";
import shengfen from "@/assets/css/default/china.json";  //地图包

3、通过计算属性获取图表展示区域宽高，

computed: {
            scrollerHeight: function () {
                return (document.documentElement.clientHeight - 250) + 'px'; //自定义高度
            },
            scrollerWeight: function () {
                return (document.documentElement.clientWeight - 550) + 'px'; //自定义宽度
            }
        },
created() {
            this.$nextTick(() => {
                this.initCharts();
            })
          },

4、图表配置

methods: {
            initCharts() {
                const charts = echarts.init(this.$refs["charts"]);
                let airData  = [
                    { name: '北京', value: 1 },
                    { name: '天津', value: 2 },
                    { name: '河北', value: 5 },
                    { name: '山西', value: 7 },
                    { name: '内蒙古', value: 10 },
                    { name: '辽宁', value: 12 },
                    { name: '吉林', value: 15 },
                    { name: '黑龙江', value: 18 },
                    { name: '上海', value: 20 },
                    { name: '江苏', value: 22 },
                    { name: '浙江', value: 25 },
                    { name: '安徽', value: 30 },
                    { name: '福建', value: 34 },
                    { name: '江西', value: 96 },
                    { name: '山东', value: 92 },
                    { name: '河南', value: 13 },
                    { name: '湖北', value: 27 },
                    { name: '湖南', value: 17 },
                    { name: '广东', value: 38 },
                    { name: '广西', value: 59 },
                    { name: '海南', value: 54 },
                    { name: '重庆', value: 66 },
                    { name: '四川', value: 8 },
                    { name: '贵州', value: 1 },
                    { name: '云南', value: 25 },
                    { name: '西藏', value: 24 },
                    { name: '陕西', value: 25 },
                    { name: '甘肃', value: 19 },
                    { name: '青海', value: 17 },
                    { name: '宁夏', value: 52 },
                    { name: '新疆', value: 10 },
                    { name: '台湾', value: 8 },
                ]
                const option = {
                    // 背景颜色
                    backgroundColor: "#fff",
                    // 提示浮窗样式
                    tooltip: {
                        show: true,
                        trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                        axisPointer: {// 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        alwaysShowContent: false,
                        backgroundColor: "#fff",
                        borderColor: "rgba(0, 0, 0, 0.16);",
                        triggerOn: "mousemove",
                        enterable: true, //鼠标是否可进入提示框浮层中
                        textStyle: {
                            fontSize: "12",
                            overflow: "break",
                        },
                        formatter: function (params) {
                            let str = '';
                            str = `<div> ` + params.name + `:` + params.value + `</div>`                   
                            return str
                        },
                    },
                    visualMap: { //分段型视觉映射组件
                        show: true,
                        type: 'piecewise',
                        left: 50,
                        bottom: 50,
                        showLabel: true,
                        itemWidth: 10,
                        itemHeight: 10,
                        inverse: true,
                        // lt:小于; lte:小于等于; gt:大于; gte:大于等于;
                        pieces: [  
                            {
                                lt: 5,
                                label: "<5ms",
                                color: "#83CBAC"
                            },
                            {
                                gte: 5,
                                lte: 10,
                                label: "5-10ms",
                                color: "#55BB8A"
                            },
                            {
                                gt: 10,
                                lte: 15,
                                label: "10-15ms",
                                color: "#20A162"
                            },
                            {
                                gt: 15,
                                lte: 20,
                                label: "15-20ms",
                                color: "#9ABEFA"
                            },
                            {
                                gt: 20,
                                lte: 30,
                                label: '20-30ms',
                                color: "#78A9F9"
                            },
                            {
                                gt: 30,
                                label: '>30ms',
                                color: "#5693F7"
                            }
                        ]
                    },
                    // 地图配置
                    geo: {
                        map: "china",
                        aspectScale: 0.8, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
                        zoom: 1.6, //视觉比例大小,1.2即为原有大小的1.2倍
                        roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。
                        top: '25%',
                        label: {
                            // 通常状态下的样式
                            normal: {
                                show: true,
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                            // 鼠标放上去的样式
                            emphasis: {
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        // 地图区域的样式设置
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(0, 0, 0, 0.1)",
                                borderWidth: 1,
                            },
                            // 鼠标放上去高亮的样式
                            emphasis: {
                                // areaColor: "rgba(0, 0, 0, 0.1)",
                                borderWidth: 0,
                            },
                        },
                    },
                    series: [
                        {
                            selectedMode: false, //取消地图区域点击事件
                            geoIndex: 0,  //将数据和第0个geo配置关联在一起
                            type: 'map',
                            data: this.airData,
                        },
                    ],
                };
                // 地图注册，第一个参数的名字必须和option.geo.map一致
                echarts.registerMap("china", shengfen )
                charts.setOption(option);
                charts.on("mouseover", function () { //取消鼠标移入地图区域高亮
                    charts.dispatchAction({
                        type: 'legendUnSelect'
                    });
                });
            },
        }

5、效果图