绘制金融集团监控大屏的地图demo

<!-- 引入ECharts和地图数据 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><div id="finance-map" style="width: 100%; height: 800px;"></div><script>// 初始化图表const chart = echarts.init(document.getElementById('finance-map'));// 使用Ajax加载地图数据$.getJSON('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (mapData) {// 注册地图数据echarts.registerMap('china', mapData);// 等待所有脚本执行完再setOptionsetTimeout(function () {chart.setOption(option);}, 0);});// 基础配置const option = {backgroundColor: '#0a1123', // 金融大屏常用深色背景tooltip: {trigger: 'item',formatter: function (params) {if (params.data.name) {return `<div >${params.data.name}</div><div>分支机构：${params.data.branchCount || '-'}家</div><div>管理资产：${params.data.asset || '-'}亿元</div>`;}if(params.data.fromName && params.data.toName){ return `<div>${params.data.fromName} → ${params.data.toName}</div><div>资金流动：${Math.abs(params.data.value)}万元</div>`;}}},geo: {map: 'china',roam: true, // 支持缩放和平移zoom: 1.2,label: {show: true,color: '#ccc' // 省份标签颜色},itemStyle: {areaColor: '#142957', // 地图底色borderColor: '#1f3a8a', // 边界颜色borderWidth: 1},emphasis: {areaColor: '#1e40af', // 鼠标悬停颜色label: { color: '#fff' }}},series: []};</script>
<script src="./zijin.js"></script>
<script src="./prod.js"></script>
<!-- <script src="./warn.js"></script> -->
<!-- 4. 在prod.js加载后，再次应用更新后的配置 -->

prod.js

// 检查option和option.series是否已定义// 安全地添加散点图系列option.series.push({type: 'scatter',coordinateSystem: 'geo',name: '分支机构',symbol: 'pin',symbolSize: function(data) {return Math.min(15, 5+ data[2] / 100);},itemStyle: {color: '#3b82f6',shadowBlur: 100},data: [{ name: '北京分行', value: [116.4, 39.9, 500], scale: 500, branchCount: 20, asset: 1200 },{ name: '上海分行', value: [121.48, 31.22, 1800], scale: 800, branchCount: 35, asset: 2500 }]});

zijin.js

option.series.push({type: 'lines',coordinateSystem: 'geo',name: '资金流向',effect: {show: true,symbol: 'arrow', // 箭头标记symbolSize: 6,trailLength: 0.3 // 动画尾迹长度},lineStyle: {width: 2,curveness: 0.2, // 曲线弧度color: function(params) {// 正向流（流入）绿色，反向流（流出）红色return params.data.value > 0 ? '#10b981' : '#ef4444';}},data: [{ coords: [[116.4, 39.9], [121.48, 31.22]], // 北京→上海value: 500 ,// 正值表示流入上海fromName: '北京分行',toName: '上海分行',},{ coords: [[121.48, 31.22], [113.23, 23.16]], // 上海→广州value: -300 ,// 负值表示从上海流出fromName: '上海分行',toName: '广州分行',}// 更多流向数据...]
});