绘制金融集团监控大屏的地图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);
    // 等待所有脚本执行完再setOption
    setTimeout(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: '广州分行',
    }
    // 更多流向数据...
  ]
});