vue引入中国地图，echarts引入china报错

 

 

完整代码

<template>
    <div class="animated fadeIn" style="background-color: white">
        <Row>
            <div ref="chinaMap" id="chinaMap"></div>
        </Row>
    </div>
</template>
<script>
    // import echarts from 'echarts'
    import * as echarts from 'echarts';
    import 'echarts/map/js/china.js';

    export default {
        name: "ChinaMap",
        data () {
            return {
                dataList:[
                    {name: '南海诸岛', value: 0},
                    {name: '北京', value: 2170.7},
                    {name: '天津', value: 1559.6},
                    {name: '上海', value: 2423.78},
                    {name: '重庆', value: 3048.43},
                    {name: '河北', value: 7556.3},
                    {name: '河南', value: 9605},
                    {name: '云南', value: 4800.5},
                    {name: '辽宁', value: 4359.3},
                    {name: '黑龙江', value: 3788.7},
                    {name: '湖南', value: 6860.2},
                    {name: '安徽', value: 6323.6},
                    {name: '山东', value: 10047.2},
                    {name: '新疆', value: 2444.67},
                    {name: '江苏', value: 8029.3},
                    {name: '浙江', value: 5737},
                    {name: '江西', value: 4622.1},
                    {name: '湖北', value: 5917},
                    {name: '广西', value: 4885},
                    {name: '甘肃', value: 2625.71},
                    {name: '山西', value: 3702.35},
                    {name: '内蒙古', value: 2534},
                    {name: '陕西', value: 3835.44},
                    {name: '吉林', value: 2717.43},
                    {name: '福建', value: 3941},
                    {name: '贵州', value: 3580},
                    {name: '广东', value: 11346},
                    {name: '青海', value: 3983.8},
                    {name: '西藏', value: 3371.5},
                    {name: '四川', value: 8341},
                    {name: '宁夏', value: 681.79},
                    {name: '海南', value: 925.76},
                    {name: '台湾', value: 2369},
                    {name: '香港', value: 748.25},
                    {name: '澳门', value: 63.2}
                ]
            }
        },
        methods: {
            buildMap(){
                let myChart = echarts.init(this.$refs.chinaMap);
                let option = {
                    tooltip: {
                        formatter:function(params){
                            return params.seriesName+'<br />'+params.name+'：'+params.value
                        }//数据格式化
                    },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高','低'],//取值范围的文字
                        inRange: {
                            color: ['#fff4e6', '#dd2002']//取值范围的颜色
                        },
                        show:true//图注
                    },
                    geo: {
                        map: 'china',
                        roam: false,//不开启缩放和平移
                        zoom:1.23,//视角缩放比例
                        label: {
                            normal: {
                                show: true,
                                fontSize:'10',//注意：地图省份名字字体如果过大会导致字体重叠
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal:{
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis:{
                                areaColor: '#F3B329',//鼠标选择区域颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series : [
                        {
                            name: '信息量',
                            type: 'map',
                            geoIndex: 0,
                            data:this.dataList
                        }
                    ]
                };
                myChart.setOption(option);
            }
        },
        mounted() {
            this.buildMap()
        }
    }
</script>

<style scoped>
    *{margin:0;padding:0}
    html,body{
        width:100%;
        height:100%;
    }
    #chinaMap{
        width:600px;
        height:450px;
        margin: 150px auto;
        border:none;
    }
</style>

echarts引入china报错（The GeoJSON of the map must be provided）

 echarts/map/js/china.js in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./nod e_modules/vue-loader/lib??vue-loader-options!./src/components/ChinaMap.vue?vue&type

原因： echarts版本过高，ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。

解决办法：下载低版本的echarts@4.1

npm ls echarts  // 查看自己的echarts版本
npm install echarts@4.1.0 --save  //下载低版本echats包含china.js

 直接降低版本可能会影响其他图标，可以同时引入多个echarts版本

vue引入多个echarts版本 - 从入门到如土 - 博客园 (cnblogs.com)