经过旋转坐标处理的广东地图echarts 地图配置项内容和展示

通过数学公式对百度地图的geoJson数据进行以地图中心点坐标做旋转处理以适应项目展示的广东地图,其它省份也可以同样按这种思路进行处理

配置项如下
      var uploadedDataURL = "/asset/get/s/data-1576655009916-by_DuGU2.json";
myChart.showLoading();
var data = [];
$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('广东', geoJson);
    data = geoJson.features.map((item) => {
        return {
            value: (Math.random() * 1000).toFixed(2),
            name: item.properties.name
        }
    });
    myChart.hideLoading();
    option = {
        tooltip: {
            backgroundColor: 'rgba(0,0,0,0)',
            trigger: 'item',
        },
        legend: {
            show: false,
        },
        series: [{
            tooltip: {
                trigger: 'item',
                formatter: function(item) {
                    var tipHtml = '';
                    tipHtml = '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                        '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' + item.data.name + '</div>' +
                        '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                        '<span style="font-size:18px;font-weight:bold;">' + item.data.value + ' ' + '</span>' +
                        '</div>' + '</div>';
                    return tipHtml;
                }
            },
            name: '广东省数据',
            type: 'map',
            map: '广东', // 自定义扩展图表类型
            aspectScale: 1,
            zoom: 0.65, //缩放
            showLegendSymbol: false,
            label: {
                show: true,
                color: '#fff',
                fontSize: 10
            },
            itemStyle: {
                areaColor: '#0E95F1',
                borderColor: '#e9e9e9',
                borderWidth: 1,
                shadowColor: '#0E95F1',
                shadowBlur: 20,
            },
            emphasis: {
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 10
                },
                itemStyle: {
                    areaColor: '#FFD181',
                    borderColor: '#fff',
                    borderWidth: 1
                }
            },
            layoutCenter: ['50%', '50%'],
            layoutSize: '160%',
            markPoint: {
                symbol: 'none'
            },
            data: data,
        }],
    }
    myChart.setOption(option);
    showTips('广州市');
})
// 默认鼠标移出canvas后显示广州的tooltip信息
myChart.on("globalout", () => {
    setTimeout(() => {
        showTips('广州市')
    }, 5000)
})

function showTips(name) {
    data.forEach((item, i) => {
        if (item.name.includes(name)) {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: i
            });
            myChart.dispatchAction({
                type: 'mapSelect',
                seriesIndex: 0,
                dataIndex: i
            });
        }
    })
}
    
截图如下