echarts -- 中国地图

记录一下2020年2月10号在家办公的紧急需求，中国疫情地区数量分布图。

如下代码：

<div class="index-echarts-r">
    <img class="loading" src="image/loading.gif" alt="">
    <div class="padding-echarts-r">
        <div id="main-map"></div>
    </div>
 </div>
<script type="text/javascript" src="js/echarts.min.js"></script>

// 地图 数量地区分布接口
    $.ajax({
        url: url,
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        success: function (data) {
            if (data.status == 0) {
                var mapData = [];
                $.each(data.data.privinceInfo, function (i, p) {
                    mapData.push({name: p.privince, value: p.comfirData});
                })
                mapData.push({name: '南海诸岛', value: 0});
                // console.log(mapData);
                myChartMap = echarts.init(document.getElementById('main-map'));
                $.get('js/map.json', function (geoJson) {
                    echarts.registerMap('china', geoJson);  //和下面名字一致
                    var option1 = {
                        title: {
                            text: '',
                        },
                        tooltip: {
                            trigger: 'item',
                            position: function (point, params, dom, rect, size) {
                                //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
                                var x = point[0];//
                                var y = point[1];
                                var viewWidth = size.viewSize[0];
                                var viewHeight = size.viewSize[1];
                                var boxWidth = size.contentSize[0];
                                var boxHeight = size.contentSize[1];
                                var posX = 0;//x坐标位置
                                var posY = 0;//y坐标位置
                                if (x < boxWidth) {//左边放不开
                                    posX = 5;
                                } else {//左边放的下
                                    posX = x - boxWidth;
                                }
                                if (y < boxHeight) {//上边放不开
                                    posY = 5;
                                } else {//上边放得下
                                    posY = y - boxHeight;
                                }
                                return [posX, posY];
                            },
                            formatter: '地区：{b} <br/> 确诊：{c}'
                        },
                        visualMap: {
                            min: 0,
                            max: 10000,
                            left: '0',
                            bottom: '10',
                            splitNumber: 5,
                            itemWidth: 10,
                            itemHeight: 10,
                            color: ['#610105', '#8e0d08', '#d12d2e', '#fd796a', '#ffad81'],
                            pieces: [
                                {min: 10000},
                                {min: 1000, max: 10000},
                                {min: 100, max: 999},
                                {min: 10, max: 99},
                                {min: 1, max: 9},
                            ]
                            
                        },
                        series: [
                            {
                                name: '',
                                type: 'map',
                                mapType: 'china',
                                x:10,
                                y:10,
                                x2:10,
                                y2:0,
                                label: {
                                    normal: {
                                        show: true,
                                        textStyle:{
                                            fontSize: mapFontSize
                                        }

                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle:{
                                            fontSize:10
                                        }

                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        borderColor: '#bc987e',
                                        areaColor: '#c7fffd',
                                        borderWidth: 1,
                                    },//正常样式
                                    emphasis: {
                                        areaColor: '#c7fffd',
                                        borderWidth: 1,
                                        borderColor: '#bc987e',
                                    }//鼠标事件区块样式
                                },
                                data: mapData
                            }
                        ]
                    }
                    myChartMap.setOption(option1);
                    $(".loading").hide();
                })
            }
        }
    })