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、效果图