vue2使用echarts地图

目录

创建步骤：

1、在页面导入echarts

2、引入下载好的json文件

地图下载链接

全部代码

效果图

---

创建步骤：

1、在页面导入echarts

import * as echarts from 'echarts';

2、引入下载好的json文件

const chinaJson = require("./chinaChange.json")

地图下载链接

中国地图及各省的json    链接: https://pan.baidu.com/s/1nTip56J1jtAqRyPaaplO4Q?pwd=knju 提取码: knju 

全部代码

<template>
    <div class="">
        <div id="map" :style="{ height: '521px', width: '100%' }" ref="myEchart"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    const chinaJson = require("./chinaChange.json")
    export default {
        name: 'map',
        data(){
            return{
                // 各省的人口数据
                mapData: [
                    { name: "河北", value: 10000 },
                    { name: "山西", value: 200 },
                    { name: "辽宁", value: 4000 },
                    { name: "吉林", value: 5000 },
                    { name: "黑龙江", value: 6000 },
                    { name: "江苏", value: 2000 },
                    { name: "浙江", value: 800 },
                    { name: "安徽", value: 2000 },
                    { name: "福建", value: 4600 },
                    { name: "江西", value: 3200 },
                    { name: "山东", value: 200 },
                    { name: "河南", value: 200 },
                    { name: "湖北", value: 2060 },
                    { name: "湖南", value: 3000 },
                    { name: "广东", value: 2900 },
                    { name: "海南", value: 2000 },
                    { name: "四川", value: 2120 },
                    { name: "贵州", value: 20 },
                    { name: "云南", value: 2000 },
                    { name: "陕西", value: 2890 },
                    { name: "甘肃", value: 2740 },
                    { name: "青海", value: 2660 },
                    { name: "台湾", value: 2440 },
                    { name: "内蒙古", value: 2350 },
                    { name: "广西", value: 2700 },
                    { name: "西藏", value: 2000 },
                    { name: "宁夏", value: 2000 },
                    { name: "新疆", value: 2000 },
                    { name: "北京", value: 2000 },
                    { name: "天津", value: 2000 },
                    { name: "上海", value: 2000 },
                    { name: "重庆", value: 2000 },
                    { name: "香港", value: 2000 },
                    { name: "澳门", value: 2000 },
                    { name: "南海诸岛", value: 800 },
                ]
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            init(data) {
                let myChart = echarts.init(document.getElementById('map'));
                echarts.registerMap('china', chinaJson);
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter:  function(params) {
                            if(!params.value){
                                return '该地区暂无访问量';
                            }
                            return params.seriesName+'<br />'+params.name+'：'+params.value+'次'
                        },
                        confine: true
                    },
                    visualMap: {
                        min: 0,
                        max: 10000,
                        // text: ['高', '低'],
                        realtime: false,
                        calculable: false,
                        itemWidth:16,
                        itemHeight: 79,
                        left: 0,
                        top: 40,
                        inverse: true,
                        orient:"horizontal",
                        inRange: {
                            color: ['#E6F0FF', '#0955CE'],
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'map',
                            // zoom: 1.4,
                            label: {
                                normal: {
                                    show: false,
                                },
                            },
                            mapType: 'china', // 自定义扩展图表类型
                            itemStyle: {
                                // normal: {label: {show: true}},
                                emphasis: {label: {show: true}},
                                normal:{
                                    label: {
                                        show: false,
                                        textStyle: {
                                            color: '#444'
                                        }
                                    },
                                }
                            },
                            data: this.mapData,
                        }
                    ]
                };

                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

        }
    }
</script>

效果图