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

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

步骤：

1：到阿里云或高德下载geo的json数据:http://datav.aliyun.com/portal/school/atlas/area_selector2:引入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;    },