基础知识储备-页面-echarts地图绘制

<script src="/static/js/china.js"></script>

function initChina(params){
            var ajaxResult;
            $.ajax({
                url: '/zhwxstatis/overview2019/getAreaData',
                dataType: 'json',
                type: 'POST',
                cache: false,
                async: false,
                data: params,
                success: function (data) {
                    if (data) {
                        ajaxResult = data.result;
                    }
                }
            });

            var indicatorId = $('#indicator').val();
            var indicatorName = $('#indicator option:selected').text();
            var mydata=[];
            var tempdata=[0];
            if (ajaxResult!== null && ajaxResult.areaList !== null && ajaxResult.areaList !== undefined) {
                ajaxResult.areaList.forEach(function (item) {
                    var mapObj={};
                    mapObj.name=item.provinceName;
                    mapObj.value=item[indicatorId];
                    mydata.push(mapObj);
                    tempdata.push(item[indicatorId]);
                });
            }

            var percent='条';
            if (indicatorId == 'callerOrderCountRate' || indicatorId == 'effectCalledCountSumRate') {
                percent='%';
            }
            if ( indicatorId == 'callerCountSumAvg') {
                percent='次';
            }
            if ( indicatorId == 'waitFirstCallMinutesSumAvg' || indicatorId == 'dialConnectTimeSumAvg') {
                percent='分';
            }
            var optionMap = {
                backgroundColor: '#FFFFFF',
                tooltip : {
                    trigger: 'item',
                    formatter: function (params) {
                        var cityName = $('#AreaCity option:selected').text();
                        var provinceName = $('#AreaProvince option:selected').text();
                        if (cityName == '全部城市' || cityName == '选择城市'){
                            cityName = params.name;
                        } else if (provinceName.substr(2,provinceName.length) == params.name) {
                            cityName = cityName.substr(2,cityName.length);
                        } else {
                            cityName = params.name;
                        }

                        if (params.value) {
                            return params.seriesName + '<br/>' + cityName + ' : ' + params.value+percent;
                        } else {
                            return params.seriesName + '<br/>' + cityName + ' : ' + '0'+percent;
                        }
                    }
                },
                dataRange: {
                    x: 'left',
                    y: 'center',
                    splitList: [
                        {start: ajaxResult.mapDataRange[0], end: ajaxResult.mapDataRange[1], label: ajaxResult.mapDataRange[0] + percent, color: '#c42d2d'},
                        {start: ajaxResult.mapDataRange[1], end: ajaxResult.mapDataRange[2], label: ' ', color: '#d44027'},
                        {start: ajaxResult.mapDataRange[2], end: ajaxResult.mapDataRange[3], label: ' ', color: '#dc5741'},
                        {start: ajaxResult.mapDataRange[3], end: ajaxResult.mapDataRange[4], label: ' ', color: '#eb7a67'},
                        {start: ajaxResult.mapDataRange[4], end: ajaxResult.mapDataRange[5], label: ' ', color: '#ffa293'},
                        {start: ajaxResult.mapDataRange[5], end: ajaxResult.mapDataRange[6], label: ' ', color: '#67ffd6'},
                        {start: ajaxResult.mapDataRange[6], end: ajaxResult.mapDataRange[7], label: ' ', color: '#45eabd'},
                        {start: ajaxResult.mapDataRange[7], end: ajaxResult.mapDataRange[8], label: ' ', color: '#27d6a2'},
                        {start: ajaxResult.mapDataRange[8], end: ajaxResult.mapDataRange[9], label: ' ', color: '#11bd8a'},
                        {start: ajaxResult.mapDataRange[9], end: ajaxResult.mapDataRange[10], label: ajaxResult.mapDataRange[10] + percent, color: '#00a971'}
                    ],
                    textStyle: {
                        color: '#3899FF' // 值域文字颜色
                    },
                    selectedMode: false,
                    color: ['#E0022B', '#E09107', '#A3E00B']
                },
                //左侧小导航图标
                visualMap: {
                    formatter: function (val) {
                        return val + percent;
                    },
                    left: 'left',
                    top: 'top',
                    max: Math.max(...tempdata),
                    min: Math.min(...tempdata)==Math.max(...tempdata)?0:Math.min(...tempdata),
                    color:  ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"],
                    show:true
                },
                //配置属性
                series: [{
                    name: indicatorName,
                    type: 'map',
                    mapType: 'china', // 地图类型，支持world，china及全国34个省市自治区
                    roam: false,  // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
                    label: {
                        normal: {
                            show: false  //省份名称
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data:mydata  //数据
                }]
            };

            //初始化echarts实例
            var myChart = echarts.init(document.getElementById('china_div'));
//         //使用制定的配置项和数据显示图表
            myChart.setOption(optionMap);

            myChart.off('click');
            myChart.on('click', function (mapParams) {
                if ($('#channel').val() !=='0'){
                    $("#AreaProvince option").each(function(){
                        if($(this).text().indexOf(mapParams.name) != -1){
                            $("#AreaProvince").val($(this).val());
                            $("#AreaProvince").trigger("change");
                            return false;
                        }
                    });
                    // goProvince(myChart,params,splitList,mydata1,optionMap);
                }
            });

        }

 

//渲染城市地图
function goProvince(myChart,params,splitList,mydata1,optionMap){
    $.getJSON('js/Province/' + (params.name) + '.js', function (geoJson) {
        myChart.hideLoading();
        echarts.registerMap((params.name), geoJson);
        var option = {
            backgroundColor: '#FFFFFF',
            tooltip : {
                trigger: 'item'
            },
            //左侧小导航图标
            visualMap: {
                left: 'left',
                top: 'top',
                splitList:splitList,
                color: ['red', '#9feaa5', '#85daef','#74e2ca', '#e6ac53'],
                show:true
            },
            //配置属性
            series: [{
                name: '量级',
                type: 'map',
                mapType: (params.name), // 地图类型，支持world，china及全国34个省市自治区，例如：河北、北京
                roam: false,  // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
                label: {
                    normal: {
                        show: true  //省份名称
                    },
                    emphasis: {
                        show: false
                    }
                },
                data:mydata1  //数据
            }]
        };
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
        //点击城市返回全国地图
        myChart.on('click', function (params) {
            myChart.setOption(optionMap);
        });
    });
}