tmasjc · May 8, 2025 11:10
diff --git a/china_cities.html b/china_cities.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8" />
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
        }
        .map-container {
            width: 100%;
            height: 650px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
        }
        .title {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 24px;
        }
    </style>
 </head>

 <body>
    <div id="china-map" class="map-container"></div>

    <!-- Load ECharts from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>

    <script>
        // Wait for the DOM to be fully loaded
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize the echarts instance
            var chart = echarts.init(document.getElementById('china-map'));

            // Show loading state
            chart.showLoading();

            // Fetch China map JSON
            fetch('https://cdn.jsdelivr.net/npm/[email protected]/map/json/china.json')
                .then(response => response.json())
                .then(chinaJson => {
                    // Register the map data
                    echarts.registerMap('china', chinaJson);

                    // Hide loading state
                    chart.hideLoading();

                    // City coordinates [longitude, latitude]
                    const cities = [
                        { name: '天津', value: [117.2, 39.13], symbolSize: 14 },
                        { name: '青岛', value: [120.38, 36.07], symbolSize: 14 },
                        { name: '佛山', value: [113.12, 23.02], symbolSize: 14 },
                        { name: '西安', value: [108.95, 34.27], symbolSize: 14 },
                        { name: '重庆', value: [106.55, 29.57], symbolSize: 14 },
                        { name: '无锡', value: [120.3, 31.57], symbolSize: 14 },
                        { name: '苏州', value: [120.62, 31.32], symbolSize: 14 }
                    ];

                    // Set chart options
                    var option = {
                        backgroundColor: '#fff',
                        title: {
                            text: '成都分流对标城市',
                            left: 'center',
                            top: '20px',
                            textStyle: {
                                fontSize: 22,
                                fontWeight: 'bold',
                                color: '#333'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            backgroundColor: 'rgba(0,0,0,0.75)',
                            borderWidth: 0,
                            textStyle: {
                                color: '#fff'
                            },
                            formatter: function (params) {
                                return `<strong>${params.name}</strong>`;
                            }
                        },
                        geo: {
                            map: 'china',
                            roam: true, // Enable zoom and pan
                            center: [104, 36], // Center the map on China
                            zoom: 1.2, // Initial zoom level
                            label: {
                                show: false
                            },
                            itemStyle: {
                                areaColor: '#e0f2fe', // Light blue for land
                                borderColor: '#94a3b8',
                                borderWidth: 0.5
                            },
                            emphasis: {
                                itemStyle: {
                                    areaColor: '#bae6fd' // Slightly darker blue on hover
                                },
                                label: {
                                    show: false
                                }
                            }
                        },
                        series: [
                            {
                                name: 'Cities',
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                data: cities,
                                symbolSize: function(val, params) {
                                    return params.data.symbolSize;
                                },
                                showEffectOn: 'render',
                                rippleEffect: {
                                    brushType: 'stroke',
                                    period: 4,
                                    scale: 3
                                },
                                hoverAnimation: true,
                                label: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{b}',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    color: '#333',
                                    textBorderColor: '#fff',
                                    textBorderWidth: 2
                                },
                                itemStyle: {
                                    color: '#f97316', // Orange color for points
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                                },
                                zlevel: 1
                            }
                        ]
                    };

                    // Set the options and render the chart
                    chart.setOption(option);

                    // Handle window resize
                    window.addEventListener('resize', function () {
                        chart.resize();
                    });
                })
                .catch(error => {
                    console.error('Error loading China map data:', error);
                    chart.hideLoading();
                    document.getElementById('china-map').innerHTML = 'Failed to load map data. Please check console for details.';
                });
        });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<style>
	body {
	margin: 0;
	padding: 20px;
	font-family: Arial, sans-serif;
	background-color: #f9f9f9;
	}
	.map-container {
	width: 100%;
	height: 650px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
	}
	.title {
	text-align: center;
	color: #333;
	margin-bottom: 20px;
	font-size: 24px;
	}
	</style>
	</head>

	<body>
	<div id="china-map" class="map-container"></div>

	<!-- Load ECharts from CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>

	<script>
	// Wait for the DOM to be fully loaded
	document.addEventListener('DOMContentLoaded', function () {
	// Initialize the echarts instance
	var chart = echarts.init(document.getElementById('china-map'));

	// Show loading state
	chart.showLoading();

	// Fetch China map JSON
	fetch('https://cdn.jsdelivr.net/npm/[email protected]/map/json/china.json')
	.then(response => response.json())
	.then(chinaJson => {
	// Register the map data
	echarts.registerMap('china', chinaJson);

	// Hide loading state
	chart.hideLoading();

	// City coordinates [longitude, latitude]
	const cities = [
	{ name: '天津', value: [117.2, 39.13], symbolSize: 14 },
	{ name: '青岛', value: [120.38, 36.07], symbolSize: 14 },
	{ name: '佛山', value: [113.12, 23.02], symbolSize: 14 },
	{ name: '西安', value: [108.95, 34.27], symbolSize: 14 },
	{ name: '重庆', value: [106.55, 29.57], symbolSize: 14 },
	{ name: '无锡', value: [120.3, 31.57], symbolSize: 14 },
	{ name: '苏州', value: [120.62, 31.32], symbolSize: 14 }
	];

	// Set chart options
	var option = {
	backgroundColor: '#fff',
	title: {
	text: '成都分流对标城市',
	left: 'center',
	top: '20px',
	textStyle: {
	fontSize: 22,
	fontWeight: 'bold',
	color: '#333'
	}
	},
	tooltip: {
	trigger: 'item',
	backgroundColor: 'rgba(0,0,0,0.75)',
	borderWidth: 0,
	textStyle: {
	color: '#fff'
	},
	formatter: function (params) {
	return `<strong>${params.name}</strong>`;
	}
	},
	geo: {
	map: 'china',
	roam: true, // Enable zoom and pan
	center: [104, 36], // Center the map on China
	zoom: 1.2, // Initial zoom level
	label: {
	show: false
	},
	itemStyle: {
	areaColor: '#e0f2fe', // Light blue for land
	borderColor: '#94a3b8',
	borderWidth: 0.5
	},
	emphasis: {
	itemStyle: {
	areaColor: '#bae6fd' // Slightly darker blue on hover
	},
	label: {
	show: false
	}
	}
	},
	series: [
	{
	name: 'Cities',
	type: 'effectScatter',
	coordinateSystem: 'geo',
	data: cities,
	symbolSize: function(val, params) {
	return params.data.symbolSize;
	},
	showEffectOn: 'render',
	rippleEffect: {
	brushType: 'stroke',
	period: 4,
	scale: 3
	},
	hoverAnimation: true,
	label: {
	show: true,
	position: 'right',
	formatter: '{b}',
	fontSize: 14,
	fontWeight: 'bold',
	color: '#333',
	textBorderColor: '#fff',
	textBorderWidth: 2
	},
	itemStyle: {
	color: '#f97316', // Orange color for points
	shadowBlur: 10,
	shadowColor: 'rgba(0, 0, 0, 0.3)'
	},
	zlevel: 1
	}
	]
	};

	// Set the options and render the chart
	chart.setOption(option);

	// Handle window resize
	window.addEventListener('resize', function () {
	chart.resize();
	});
	})
	.catch(error => {
	console.error('Error loading China map data:', error);
	chart.hideLoading();
	document.getElementById('china-map').innerHTML = 'Failed to load map data. Please check console for details.';
	});
	});
	</script>
	</body>

	</html>