【项目实践】银行风控与贷款监控大屏 —— 地图+散点展示

本项目为数据可视化大屏展示，基于 Vue 3 + TypeScript + ECharts 构建，主要聚焦于 ECharts 图表的多样化应用与大屏交互体验的实现。

效果如下：

在线预览：https://shizq.github.io/vue-bank-screen/

 

功能特色：

金融业务有很强的地域性，地图是很常用的组件，用地图直观展示全国各地的业务量和风险等级，用地图+散点展示分行或客户的地理分布。

- 散点展示 ：在地图上显示主要分行的地理分布，点的大小与客户数成正比

- 交互功能 ：悬停显示省份业务量、风险等级，以及分行客户数详情

 

部分模块实现

中间地图

第一步先获取中国地图geo数据，打开dataV（点击打开dataV链接），找到数据可视化学院，选择中国地图，把它的GeoJSON下载下来。

 

下载下来的数据长这样：

这就是我们需要的geojson数据了。

​ 拿到数据之后，就需要将其渲染出来。

​ 这里我用的是echarts的地图。因为这个项目的地图，基本没有交互，就纯纯的数据展示。使用echarts来做的效果会比cesium那些更好。

 

注册地图

const response = await fetch('@/assets/china.json');
const chinaJson = await response.json();
registerMap('china', chinaJson as unknown as { type: 'FeatureCollection'; features: any[] });

先将前面下载来的数据geojson数据注册到echarts里面，并配置echarts的geo选项

geo: {
    map: 'china',
    zoom: 1.7,
    center: [104, 36],
    roam: false,
    label: {
      show: true,
      color: '#e0e8f5',
      fontSize: 14,
      fontWeight: 500,
      textBorderColor: 'rgba(2, 8, 24, 0.9)',
      textBorderWidth: 2,
      textShadowBlur: 4,
      textShadowColor: 'rgba(0, 212, 255, 0.5)',
    },
    itemStyle: {
      areaColor: 'rgba(0, 150, 255, 0.14)',
      borderColor: 'rgba(0, 212, 255, 0.5)',
      borderWidth: 1,
    },
    emphasis: {
      itemStyle: {
        areaColor: 'rgba(0, 212, 255, 0.3)',
        borderColor: '#00d4ff',
        borderWidth: 2,
      },
      label: {
        color: '#00d4ff',
        fontSize: 16,
        fontWeight: 600,
        textBorderColor: 'rgba(2, 8, 24, 0.9)',
        textBorderWidth: 2,
        textShadowBlur: 8,
        textShadowColor: 'rgba(0, 212, 255, 0.8)',
      },
    },
  },

 

其他图表

​其它图表就比较常规了，这里就不做过多介绍。