echart地圖

1、先下載需要用到的地圖json文件，推薦下載網站https://datav.aliyun.com/portal/school/atlas/area_selector，如果需要自定義地圖的可以去http://geojson.io/自定義。官網也有dome可以參考https://www.makeapie.com/editor.html?c=xHyqn_rQ6g。

2、在項目引入echarts和地圖json文件

import * as echarts from 'echarts'
import china from '../assets/china.json'

3、向echarts導入地圖文件

//第一個參數是命名，用於設置option.series里面的map屬性

echarts.registerMap('china', china);

4、獲取並init虛擬dom，設置option數據，放入series里的data，然后setOption就行了

            let myChart = echarts.init(this.$refs.map);
            let option = {
                visualMap: {
                    show:false,
                    left: 'right',
                    min: 500000,
                    max: 38000000,
                    inRange: {
                        color: ['#E3F1FC','#B4E3FA','#62C5F6','#2998E8' ]
                    },
                    text: ['High', 'Low'],
                    calculable: true
                },
                series: [
                    {
                        name: 'china',
                        type: 'map',
                        roam: true,
                        map: 'china',//這里是你導入echarts的json文件
                        layoutCenter: ['50%', '70%'],
                        layoutSize: '100%',
                        label: {//地圖默認的文本屬性
                            show: false,
                            color: '#2998E8',
                        },
                        select: {//選中的區域文本屬性
                            label: {
                                color: "#2998E8"
                            },
                            itemStyle: {
                                color: "#3066ba"
                            }
                        },
                        emphasis: {//高亮的區域文本屬性
                            itemStyle: {
                                areaColor: '#3066ba',
                            },
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#2998E8'
                                }
                            }
                        },

                        zoom: 1.2,
                        textFixed: {
                            Alaska: [20, -20]
                        },
                        data: china.features.map(e => {
                            let num = Math.round(Math.random() * Math.random() * 100000000)
                            return { "name": e.properties.name, "value": num }
                        })
                    }
                ]
            }
            myChart.setOption(option);

 

5、效果圖