${params.name}
@@ -654,80 +1110,77 @@ const getChartOption = () => {
return params.name
}
},
- legend: {
- orient: 'vertical',
- left: 'left',
- top: 'bottom',
- data: ['交易城市', '流向线', '重要节点'],
- textStyle: {
- color: '#8cc8ff',
- fontSize: 12
- },
- itemStyle: {
- borderColor: '#00d4ff'
- }
- },
- geo: {
- map: getMapName(currentMode.value),
- roam: true,
- // 只有在非local模式时才手动设置zoom和center，让ECharts自动适应GeoJSON范围
- ...(currentMode.value !== 'local' && {
- zoom: mapBounds.zoom,
- center: mapBounds.center
- }),
- label: {
- show: true,
- color: '#ffffff',
- fontSize: 11,
- fontWeight: 'bold',
- shadowBlur: 3,
- shadowColor: '#000'
- },
- emphasis: {
+ geo: buildGeoLayers(mapName, mapBounds),
+ series: [
+ {
+ name: 'mapFill',
+ type: 'map',
+ map: mapName,
+ roam: false,
+ ...mapLayout,
+ zlevel: 2,
+ silent: true,
+ selectedMode: false,
+ data: buildRegionFillData(),
+ itemStyle: {
+ borderColor: MAP_INNER_BORDER,
+ borderWidth: MAP_INNER_BORDER_WIDTH
+ },
label: {
show: true,
- color: '#00d4ff',
- fontSize: 13,
- fontWeight: 'bold'
+ color: MAP_LABEL_COLOR,
+ fontSize: 11,
+ fontFamily: 'Microsoft YaHei, sans-serif',
+ fontWeight: 'bold',
+ textBorderColor: 'rgba(0, 0, 0, 0.45)',
+ textBorderWidth: 2
},
- itemStyle: {
- areaColor: '#1e3a5f',
- borderColor: '#00d4ff',
- borderWidth: 2,
- shadowBlur: 10,
- shadowColor: '#00d4ff'
+ emphasis: {
+ disabled: true
+ }
+ },
+ {
+ name: 'mapWireframe',
+ type: 'lines',
+ coordinateSystem: 'geo',
+ geoIndex: WIREFRAME_GEO_INDEX,
+ zlevel: 5,
+ polyline: true,
+ silent: true,
+ data: wireframeData,
+ lineStyle: {
+ color: MAP_WIREFRAME_COLOR,
+ width: 3.2,
+ opacity: 0.96,
+ cap: 'round',
+ join: 'round',
+ shadowBlur: 16,
+ shadowColor: 'rgba(120, 230, 255, 0.6)'
}
},
- itemStyle: {
- areaColor: '#0f1b2e', // 深蓝色地图
- borderColor: '#2c5282',
- borderWidth: 1,
- shadowBlur: 5,
- shadowColor: 'rgba(0, 212, 255, 0.3)'
- }
- },
- series: [
{
name: '交易城市',
type: 'scatter',
coordinateSystem: 'geo',
+ geoIndex: GEO_DATA_INDEX,
+ zlevel: 6,
data: scatterData,
symbolSize: 8,
label: {
show: true,
position: 'top',
- color: '#ffffff',
+ color: MAP_LABEL_COLOR,
fontSize: 11,
fontWeight: 'bold',
formatter: '{b}',
- shadowBlur: 2,
- shadowColor: '#000'
+ textBorderColor: 'rgba(0, 0, 0, 0.35)',
+ textBorderWidth: 2
},
emphasis: {
label: {
show: true,
fontSize: 13,
- color: '#00d4ff'
+ color: MAP_LABEL_COLOR
},
itemStyle: {
borderColor: '#00d4ff',
@@ -737,28 +1190,30 @@ const getChartOption = () => {
}
},
{
- name: '流向线',
+ name: '流向',
type: 'lines',
coordinateSystem: 'geo',
+ geoIndex: GEO_DATA_INDEX,
+ zlevel: 6,
data: linesData,
large: true,
effect: {
show: true,
- constantSpeed: 40,
+ constantSpeed: 45,
symbol: 'arrow',
- symbolSize: 12,
- trailLength: 0.15,
- color: '#ffffff',
- shadowBlur: 6,
- shadowColor: '#00d4ff'
+ symbolSize: 10,
+ trailLength: 0.2,
+ color: '#e8f7ff',
+ shadowBlur: 8,
+ shadowColor: 'rgba(110, 207, 255, 0.8)'
},
lineStyle: {
- color: '#00d4ff',
- width: 1.2,
- opacity: 0.7,
- curveness: 0.3,
- shadowBlur: 3,
- shadowColor: '#00d4ff'
+ color: '#7ee8ff',
+ width: 1.5,
+ opacity: 0.85,
+ curveness: 0.28,
+ shadowBlur: 8,
+ shadowColor: 'rgba(110, 232, 255, 0.55)'
},
emphasis: {
lineStyle: {
@@ -772,6 +1227,8 @@ const getChartOption = () => {
name: '重要节点',
type: 'effectScatter',
coordinateSystem: 'geo',
+ geoIndex: GEO_DATA_INDEX,
+ zlevel: 6,
data: effectScatterData,
symbolSize: function(val) {
return Math.max(14, Math.min(26, val[2] / 60))
@@ -785,12 +1242,12 @@ const getChartOption = () => {
label: {
show: true,
position: 'top',
- color: '#ffffff',
+ color: MAP_LABEL_COLOR,
fontSize: 12,
fontWeight: 'bold',
formatter: '{b}',
- shadowBlur: 3,
- shadowColor: '#000'
+ textBorderColor: 'rgba(0, 0, 0, 0.35)',
+ textBorderWidth: 2
},
itemStyle: {
shadowBlur: 15
@@ -819,6 +1276,9 @@ const reloadMapData = async (mapMode) => {
const mapName = getMapName(mapMode)
echarts.registerMap(mapName, chinaMapData)
+ cachedOutlineKey = ''
+ cachedOutlinePaths = []
+ mapTextureCache.clear()
return true
} catch (error) {
@@ -872,11 +1332,8 @@ const updateChart = async (needReloadMap = false) => {
}
chartInstance.setOption(getChartOption(), {
- replaceMerge: ['series', 'geo'],
- transition: {
- duration: 1200,
- easing: 'cubicInOut'
- }
+ notMerge: false,
+ replaceMerge: ['geo', 'series']
})
}
}
@@ -911,64 +1368,184 @@ onUnmounted(() => {
\ No newline at end of file
+
diff --git a/src/components/MarketRealtimeMonitor.vue b/src/components/MarketRealtimeMonitor.vue
index 692c3bc..45c9970 100644
--- a/src/components/MarketRealtimeMonitor.vue
+++ b/src/components/MarketRealtimeMonitor.vue
@@ -1,75 +1,124 @@
- 
+