关于前端:使用echarts画出行政图例子

应用 echart 画出广州行政图，成果如图：

步骤：

1：到阿里云或高德下载 geo 的 json 数据:http://datav.aliyun.com/portal/school/atlas/area_selector
2: 引入 json 数据
var guangzhou=require('../../assets/json/guangzhouArea.json');
3：画图并配置
<div id="guangzhouMap" style="width:calc(100%);height:719px;" ></div>
async initMap() {const dom = document.getElementById('guangzhouMap');
        const myChart = this.$echarts.init(dom);
        this.$echarts.registerMap('GZ', guangzhou);
        
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter:function(params){// console.log(params,'params');
                    var res = params.data[3]+'：'+params.data[2];
                    return res;
                }
            },
            // visualMap: {
            //     // show: false,
            //     min: 1,
            //     max: 1,
            //     inRange: {//         color: ['rgba(6, 43, 78, 0.9)']
            //     }
            // },
            geo: {
                map: 'GZ',
                roam: true,// 容许放大放大
                zoom:2,
                scaleLimit:{min:1},
                label: {normal: {// 地图显示文字款式 (xx 区)
                        show:true,
                        areaColor: '#ffefd5',
                        textStyle:{color:"rgb(0,255,255)"}
                    },
                    emphasis: {// 地图显示文字款式（鼠标通过时）show: true,
                        textStyle:{color:"#fff"}
                    }
                },
                itemStyle: {
                    normal: {// 地图省市每一个独自区域块的款式
                        show:true,
                        areaColor:'transparent',
                        borderColor: 'blue',// 边际线色彩
                    },
                    emphasis: {// 地图省市每一个独自区域块的款式（鼠标通过时）show:true,
                        areaColor: 'rgb(0,255,255,0.2)'
                    }
                },
                // 默认选中的区域
                regions:[{name:'番禺区',selected:true}
                ]
            },
            series: [
                {
                    type: 'scatter',// 水滴
                    name: '广州',
                    coordinateSystem: 'geo',
                    // color:"rgb(0,255,255)",// 水滴色彩
                    symbolSize:15,// 水滴大小
                    label:{
                        normal: {// 水滴文字款式
                            show:true,
                            offset:[10,-15],
                            formatter:function(params){// console.log(params,'paramssss');
                                return params.data[2];
                            }
                        },
                    },
                    data: this.convertData([{ name: '从化区',  value: 10},
                        {name: '花都区',  value: 20},
                        {name: '白云区',  value: 30},
                        {name: '增城区',  value: 40},
                        {name: '天河区',  value: 50},
                        {name: '黄埔区',  value: 60},
                        {name: '越秀区',  value: 70},
                        {name: '荔湾区',  value: 80},
                        {name: '海珠区',  value: 90},
                        {name: '番禺区', value: '里仁洞村'},
                        {name: '南沙区',  value: 36}
                    ])
                }
            ]
        })
        // myChart.dispatchAction({
        //     type: 'highlight',
        //     // 应用 dataIndex 来定位节点。//     dataIndex: 9
        // });
        myChart.on('click',(e)=>{console.log(e)
            this.goProject();})
    },
    convertData(data) {
        let geoCoordMap = {"番禺区":[113.380238,23.00326]
        };
        var res = [];
        for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {res.push(geoCoord.concat(data[i].value).concat(data[i].name));
            }
        }
        console.log(res);
        return res;
    },