echarts地圖簡介

 

一、geo文件下載

二、示例代碼

配置文件

option = {
    backgroundColor: 'transparent',
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name;
        }
    },
    series: [
        {
            type: 'map',
            symbolSize: 12,
            selectedMode:'single',
            label: {
                normal: {
                    show: true,
                    color:'white',
                    padding:20
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal:{
                    color:'#f00',
                    areaColor: '#92d14f',
                    borderColor: '#fff',
                    borderWidth:1
                },
                emphasis: {
                    // areaColor: '#92d14f',
                    borderColor: '#fff',
                    borderWidth: 1
                }
            },
            markPoint:{
                symbolSize:30,
                label:{
                    normal:{
                        show:true,
                        formatter:'{b}'
                    }
                },
                data:[
{
        name: '某個座標',
        id:'12',
                    coord:[117.3954038591, 31.7459353574]
    }
                ]
            }
        }
    ]
};

加載geo文件

$.get('china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    option.series[0].map = 'china';
    myChart.setOption(option);
});