First ECharts Map（苏州）

🏷️ ECharts

主要参考了 ECharts Gallery 示例 及 ECharts 配置项手册。

页面地址

First ECharts Map（苏州）

点击查看页面代码

<script src="/dist/libs/echarts/4.3.0/echarts.min.js"></script><style>
    .echart {
        max-width: 750px;
        height: 900px;
        padding: 10px 0;
    }
    @media (max-width: 750px) {
        .echart {
            width: 100%;
            height: 600px;
        }
    }
</style>
<div id="ncov-suzhou-area" class="echart"></div>
<script>
$(function() {
    var suzhou = '/dist/libs/geo/suzhou.geo.json';
    var mapName = 'suzhou';
    $.get(suzhou, function(szJson) {
        echarts.registerMap(mapName, szJson);
        var geoCoordMap = {};
        var sz_data = [
            {name: '', value: 10},
            {name: '吴中区', value: 9},
            {name: '相城区', value: 8},
            {name: '姑苏区', value: 7},
            {name: '工业园区', value: 6},
            {name: '高新区', value: 5},
            {name: '吴江区', value: 4},
            {name: '常熟市', value: 3},
            {name: '张家港市', value: 2},
            {name: '昆山市', value: 1},
            {name: '太仓市', value: 1}
        ];
        var goTotal=0;//计算总人数
        sz_data.forEach(function(item,i){
            goTotal+=item.value;
        })
        window.echart_area = echarts.init(document.getElementById('ncov-suzhou-area'));
        window.echart_area.showLoading();
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        window.echart_area.hideLoading();
        mapFeatures.forEach(function(v) {
            // 地区名称
            var name = v.properties.name;
            // 地区经纬度
            geoCoordMap[name] = v.properties.centroid;
        });
        var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                    });
                }
            }
            return res;
        };
        option = {
            visualMap: {
                show: true,
                min: 0,
                max: 10,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                seriesIndex: [1],
                inRange: {
                    color: ['#fff', '#ff6384'],
                }
            },
            //地图相关设置
            geo: {
                map: mapName,
                zoom: 1.2,
                roam: false,
                normal: {
                    label: {
                        color: '#F62157',
                        show: false
                    },
                    itemStyle: {
                        color: '#F62157',
                        areaColor: '#fff',
                        borderColor: '#e64c6c',
                    }
                },
                emphasis: {
                    label: {
                        color: '#fff',
                        show: false
                    },
                    itemStyle: {
                        color: '#fff',
                        areaColor: '#fb4f73',
                        borderColor: '#fff',
                    }
                },
            },
            series: [
            {
                name: '散点',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(sz_data),
                symbolSize: 1,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true,
                        fontSize: 12
                    },
                    emphasis: {
                        show: true,
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#000'
                    }
                }
            },
            {
                type: 'map',
                map: mapName,
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在 legend 时显示
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#037be3',
                        borderColor: '#0089ff',
                    },
                    emphasis: {
                        areaColor: '#037be3'
                    }
                },
                animation: false,
                data: sz_data
            },
            {
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin', //气泡
                symbolSize: 50,
                label: {
                    normal: {
                        show: true,
                        formatter: '{@[2]}',
                        textStyle: {
                            color: '#fff',
                            fontSize: 9,
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#F62157', //标志颜色
                    }
                },
                zlevel: 6,
                data: convertData(sz_data),
            }]
        };
        window.echart_area.setOption(option);
    });
});
</script>