当前位置: 首页 > news >正文

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

image

<!-- 引入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: '广州分行',}// 更多流向数据...]
});
http://www.hskmm.com/?act=detail&tid=17312

相关文章:

  • 实用指南:《原神助手》开源神器:游戏体验大升级
  • 9-25
  • AT_agc021_d [AGC021D] Reversed LCS
  • adb shell 常用文件命令
  • Java文件编程
  • 自我介绍与规划
  • 软件工程学习日志2025.9.25
  • 从50ms到30ms:YOLOv10部署中图像预处理的性能优化实践 - 实践
  • redis实现分布式锁1
  • 完整教程:(13)GPS/无GPS转换
  • Transformer自回归关键技术:掩码注意力原理与PyTorch完整实现
  • 第四篇
  • PyTorch图神经网络(六)
  • Qwen多模态系列模型笔记—Qwen-VL
  • go 语法里变量前面增加、*区别
  • 历程回顾-(2024-2025)
  • CF Round 1053(2150 2151) 总结
  • 20250922_QQ_backdoor
  • 实用指南:【Java八股文】13-中间件面试篇
  • AT_agc012_d [AGC012D] Colorful Balls
  • 02、Python从入门到癫狂:函数与资料容器
  • 第二周第四天2.4
  • 9/25
  • 关闭Edge浏览器页面的圆角效果
  • 搜索二维矩阵II-leetcode
  • Rust/C/C++ 混合构建 - Cmake集成Cargo编译动态库
  • 第12章 day13 关于json请求体
  • CF1349
  • 学习敏捷课程PSM,自考证书分享
  • Rust/C/C++ 混合构建 - 用Bazel构建Rust与C