echarts的使用之 pc端中国地图（添加多处标记点）

实现效果：

引入文件

<script src="js/jquery.min.js"></script>

<script src="js/echarts.min.js"></script>

<script src="plugins/echarts/china.js"></script>

配置参数
markPointData 为标记点的数据（经纬度必传）
geo 以及更多配置参数请点击(https://echarts.apache.org/zh/option.html#geo)

<script>
var main = echarts.init(document.getElementById('main'));
createChina();
//浏览器缩放，echarts图自适应
window.onresize = function(){    
    main.resize();
};
function createChina(){
    var markPointData = [{
            "name": "长沙",
            "coord": [112.59, 28.12],
            "all_val":5,
            "abnormal_val":1,
            "normal_val":4

        },
        {
            "name": "北京",
            "coord": [116.46, 39.92],
            "all_val":5,
            "abnormal_val":1,
            "normal_val":4
        },
        {
            "name": "合肥",
            "coord": [117.27, 31.86],
            "all_val":5,
            "abnormal_val":1,
            "normal_val":4
        }
    ];
    option = {
        tooltip : {  
            trigger: 'item',
            enterable: true, //鼠标是否可进入提示框
            transitionDuration: 1, //提示框移动动画过渡时间
            formatter: function(params) {
                var res = '<p style="text-align:center;color:#fff;">'+params.name+'</p>';
                var myseries = option.series;
                var data = myseries[0].markPoint.data;
                for (var i = 0; i < data.length; i++) {
                    if(data[i].name==params.name){
                        res+='设备总数：'+data[i].all_val+'</br>';
                        res+='异常数：'+' '+data[i].abnormal_val+'</br>';
                        res+='正常总数：'+data[i].normal_val+'</br>';
                    } 
                }
                return res;
            },
            backgroundColor:'rgba(57,57,87,0.9)',
            borderRadius: 2,
            textStyle:{
                // 颜色
                color: '#FFFFFF',
                align: 'left',
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal'    
            },
        },
        geo: {
            show: true,
            map: 'china',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: false,             
            itemStyle: {
                normal: {
                    borderColor: "#FFFFFF",//每个区域的边框色
                    borderWidth: 1.2,
                    areaColor:'#0E0D47',//区域背景色
                },
                emphasis: {
                    // borderWidth: 0.5,
                    // borderColor: '#FFFFFF', //鼠标悬停区域边框颜色
                    // areaColor:"#58CCDE",    //鼠标悬停区域颜色   
                    borderColor: "#FFFFFF",//每个区域的边框色
                    borderWidth: 1.2,
                    areaColor:'#0E0D47',//区域背景色        
                }                    
            },
        },
        series:[{
            name: '节点分布',
            type: 'map',
            geoIndex: 0,
            selectedMode: false,
            markPoint: { //图表标注。
                symbol: 'path://M510.77974326 962S192.08934248 555.19771133 192.08934248 380.69040078a318.69040078 318.69040078 0 0 1 637.38080156 0c0 174.50731055-318.69040078 581.30959922-318.69040078 581.30959922z m-3.43293047-715.19389717a134.45645273 134.45645273 0 1 0 135.60076231 133.88429795 135.02860752 135.02860752 0 0 0-135.60076231-133.88429795z',
                symbolSize: [10, 15], //图形大小
                label: {
                    normal: {
                        show: true,
                    },
                    emphasis: {
                        show: true,
                    }
                },
                itemStyle: {
                    normal: {
                        "color": '#ff0000'
                    }
                },
                data: markPointData
            }
        }]
    }
    main.setOption(option);
}
</script>