使用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"  ></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;
    },

Tags 标签

扩展阅读

加个好友，技术交流