Echarts 加载省地图json

我想要的效果:

              

解决步骤:

1.安装引入

npm install echarts

　　

import Echarts from 'echarts'
// 全局注册Echarts
Vue.prototype.$Echarts = Echarts

2.引入china.js(我是直接引入安装包里面的文件包,你也可以自行下载到自己的本地目录)

import './../../../node_modules/echarts/map/js/china.js'

3.使用

加载全国地图

loadMap (data, max) {
            let mychart = this.$eCharts.init(document.getElementById('stats-map'))
            mychart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    min: 0,
                    max: max,
                    range: [0, max],
                    show: false,
                    inRange: {
                        color: ['#ccdaff', '#5485FE']
                    }
                },
                series: [
                    {
                        name: '产品分布',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                        },
                        data: data,
                        itemStyle: {
                            normal: {
                                borderColor: '#ffffff',
                                areaColor: '#ccdaff'
                            },
                            emphasis: {
                                areaColor: '#ffffff',
                                color: '#000',
                                borderWidth: 0,
                                show: false,
                            }
                        }
                    }
                ]
            })
            mychart.on('click', (prams) => {
                // provincePy是为了获得省份的全拼(贵州=>guizhou)
                let shengpy = provincePy(prams.name)
                if (shengpy) {
                    this.loadProvinceMap(shengpy, max, data)
                    mychart.clear()
                }
            })
            setTimeout(function (){
                window.onresize = function () {
                    mychart.resize()
                }
            }, 200)
        }

　加载某一个省地图

loadProvinceMap (name, max, data) {
           // 加载我下载到本地的全国省区的json文件
           Axios.get(`/static/map/province/${name}.json`)
                .then(res => {
                    let childChart = this.$eCharts.init(document.getElementById('stats-map'));
                    this.$eCharts.registerMap(name, res.data);
                    childChart.setOption({
                        visualMap: {
                            min: 0,
                            max: max,
                            show: false,
                            realtime: false,
                            calculable: true,
                            inRange: {
                                color: ['#ccdaff', '#5485FE']
                            }
                        },
                        tooltip: {
                            formatter: function (params) {
                                const value = isNaN(params.value) ? 0 : params.value
                                return params.name + ": " + value
                            }
                        },
                        series: [{
                            type: 'map',
                            mapType: name,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: data,
                            itemStyle: {
                                normal: {
                                    borderColor: '#ffffff',
                                    areaColor: '#ccdaff'
                                },
                                emphasis: {
                                    areaColor: '#ffffff',
                                    color: '#000',
                                    borderWidth: 0,
                                    show: false,
                                }
                            },
                            animation: false
                        }]
                    })
                    setTimeout(function (){
                        window.onresize = function () {
                            childChart.resize()
                        }
                    }, 200)
                })
                .catch(() => {
                    this.$message.warning('该地区地图数据不存在!')
                }) 
        }