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('該地區地圖數據不存在!')
                }) 
        }