ECharts之中国地图

1、main.js

let echarts = require('./assets/js/echarts.min.js');
let china = require('./assets/js/json/china.json');
echarts.echarts.registerMap('china', china);
Vue.prototype.$echarts = echarts.echarts;

2、组件实现

<template>
    <div class="zEcharts">
        <div class="map-container" id="myEcharts" ref="myEchart" style="height:100%;width:100%"></div>
    </div>
</template>
<script>
export default {
    name: 'zEcharts',
    data() {
        return {
            myEchart: '',
            optionChinaMap: {},//地图数据,等待接口数据
        }
    },
    props: {
        typeFlag: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        this.$nextTick(()=> {
            this.initEcharts();
        })
    },
    methods: {
        /**
         * 地图数据
        */
        randomData: function() {
            return Math.round(Math.random() * 1000);
        },
        /**
         * echarts实例话
        */
        initEcharts: function() {
            // echarts画图实例
            let chinaMapChart = null;
            // 画图区域
            chinaMapChart = this.$echarts.init(
                document.getElementById("myEcharts"),
                "macarons"
            );
            this.optionChinaMap = {
                tooltip: {
                trigger: "item"
                },
                legend: {
                    orient: "horizontal", //图例的排列方向
                    textStyle: { color: "#ccc" },
                    x: "left", //图例的位置
                    y: "-20000000000000",

                    // data: ["全国数据"]
                },

                visualMap: {
                    //颜色的设置  dataRange
                    textStyle: { color: "#ccc" },
                    x: "left",
                    y: "bottom",
                    splitList: [
                        // { start: 1500 },
                        // { start: 900, end: 1500 },
                        // { start: 310, end: 1000 },
                        // { start: 200, end: 300 },
                        // { start: 50, end: 200 },
                        { start: 0, end: 150000 }
                    ],
                    show: false,
                    // text:['高','低'],// 文本，默认为数值文本
                    color: ['rgb(50,88,124)']
                    // color: [
                    //     "#5475f5",
                    //     "#9feaa5",
                    //     "#3FA7FF",
                    //     "#66E0E3",
                    //     "#FFDC5E",
                    //     "#9fb5ea"
                    // ]
                },
                roamController: {//控制地图的上下左右放大缩小
                    show: true,
                    x: 'right',
                    mapTypeControl: {
                        'china': true
                    }
                },
                series: [
                {
                    name: "全国数据",
                    type: "map",
                    mapType: "china",
                    zoom: 1.1,//地图大小
                    roam: false, //是否开启鼠标缩放和平移漫游
                    itemStyle: {
                        //地图区域的多边形 图形样式
                        normal: {
                            //是图形在默认状态下的样式
                            label: {
                            show: true,
                            textStyle: { color: "rgb(249, 249, 249)" }//地图text样式
                            }
                        },
                        emphasis: {
                            //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                            label: { show: true }
                        }
                    },
                    top: "100", //组件距离容器的距离
                    data: [
                        { name: "上海", value: this.randomData() },
                        { name: "北京", value: "100" },
                        { name: "天津", value: this.randomData() },
                        { name: "重庆", value: this.randomData() },
                        { name: "河北", value: this.randomData() },
                        { name: "河南", value: this.randomData() },
                        { name: "云南", value: this.randomData() },
                        { name: "辽宁", value: this.randomData() },
                        { name: "黑龙江", value: this.randomData() },
                        { name: "湖南", value: this.randomData() },
                        { name: "安徽", value: this.randomData() },
                        { name: "山东", value: this.randomData() },
                        { name: "新疆", value: this.randomData() },
                        { name: "江苏", value: this.randomData() },
                        { name: "浙江", value: this.randomData() },
                        { name: "江西", value: this.randomData() },
                        { name: "湖北", value: this.randomData() },
                        { name: "广西", value: this.randomData() },
                        { name: "甘肃", value: this.randomData() },
                        { name: "山西", value: this.randomData() },
                        { name: "内蒙古", value: this.randomData() },
                        { name: "陕西", value: this.randomData() },
                        { name: "吉林", value: this.randomData() },
                        { name: "福建", value: this.randomData() },
                        { name: "贵州", value: this.randomData() },
                        { name: "广东", value: this.randomData() },
                        { name: "青海", value: this.randomData() },
                        { name: "西藏", value: this.randomData() },
                        { name: "四川", value: this.randomData() },
                        { name: "宁夏", value: this.randomData() },
                        { name: "海南", value: this.randomData() },
                        { name: "台湾", value: this.randomData() },
                        { name: "香港", value: this.randomData() },
                        { name: "澳门", value: this.randomData() }
                    ]
                }
                ]
            };
            chinaMapChart.setOption(this.optionChinaMap, true);
        },
        
    }
}
</script>
<style lang="stylus" scoped>
.zEcharts
    width 100%
    height 100%
</style>

3、实现效果