echarts中国地图

echarts展示中国地图  （散点+地理坐标系）

<script type="text/javascript" src="${ctx!}/assets/js/echarts/echarts.min.js"></script>

<script type="text/javascript" src="${ctx!}/assets/js/echarts/china.js"></script>

<script>

var dom = document.getElementById("map");

var myChart = echarts.init(dom);
var app = {};

option = null;

option = {
title:{
text:"标题",
x:'center',
textStyle: {
            color: '#242424'
        }
},
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name +"台";
        }
    },
    roamController: {//控制地图的上下左右放大缩小 图上没有显示
            show: false,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
    geo: {
        map: 'china',
        roam: false,
        //显示省份名称
        label: {    
        normal: {
                show: false
            },
            emphasis: {
                show: false
                
            }
        }, 
        itemStyle: {
            normal: { // 普通状态下的样式
                areaColor: '#40668c',
                borderColor: '#111'
            },
            emphasis: { // 高亮状态下的样式
                areaColor: '#40668c',
                borderColor: '#111'
            }
        }
    },
    series: [
        {
            name: '',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: res,
            symbolSize: function(val){
            return 10+Number(val[2]);
            },
            itemStyle: {
                normal: {
            //圆点颜色
                    color: '#FFFF00'
                }
            }
        }
    ]

};

//echarts于百度地图结合  还需要导入百度地图的script

option1 = {
    tooltip : {
        trigger: 'item',
        formatter: function (params) {
            return params.name +"台";
        }
    },
    bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true,
        mapStyle: {
        styleJson: [{
                'featureType': 'water',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }, {
                'featureType': 'land',
                'elementType': 'all',
                'stylers': {
                    'color': '#f3f3f3'
                }
            }, {
                'featureType': 'railway',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'highway',
                'elementType': 'all',
                'stylers': {
                    'color': '#fdfdfd'
                }
            }, {
                'featureType': 'highway',
                'elementType': 'labels',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#fefefe'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#fefefe'
                }
            }, {
                'featureType': 'poi',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'green',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'subway',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'manmade',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }, {
                'featureType': 'local',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'labels',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'boundary',
                'elementType': 'all',
                'stylers': {
                    'color': '#fefefe'
                }
            }, {
                'featureType': 'building',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }, {
                'featureType': 'label',
                'elementType': 'labels.text.fill',
                'stylers': {
                    'color': '#999999'
                }
            }]
        }
    },
    series : [
        {
            name: '',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: res,
            symbolSize: function (val) {
            return 10+Number(val[2]);
            },
            label: {
                normal: {
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        }
        
    ]

};;

//series.data格式为{name:  name, value :{[经度， 维度，值 ]}

 if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

</script>

china.js下载:https://download.csdn.net/download/branguzi/10447555