数据可视化ECharts:中国地图模拟飞行模块

2023-11-17 18:35| 来源: 网络整理| 查看: 265

原先是用ECharts自带的社区做的，但是现在在新版已经没有了，然后我又找到了一个相似的Echarts - ChartLib (datains.cn)

实现步骤：

- 第一需要下载china.js提供中国地图的js文件

- 第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入

- 使用社区提供的配置即可。

需要修改：

- 去掉标题组件

- 去掉背景颜色

- 修改地图省份背景 #142957 areaColor 里面做修改

- 地图放大通过 zoom 设置为1.2即可

geo: { map: 'china', zoom: 1.2, label: { emphasis: { show: false } }, roam: false, itemStyle: { normal: { areaColor: '#142957', borderColor: '#0692a4' }, emphasis: { areaColor: '#0b1c2d' } } },

细节调整

最后约束缩放

~~~css /* 约束屏幕尺寸 */ @media screen and (max-width: 1024px) { html { font-size: 42px !important; } } @media screen and (min-width: 1920px) { html { font-size: 80px !important; } }

效果

【本文地址】

公司简介

联系我们