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

原先是用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;}
}

效果

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

HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
数据可视化ECharts:饼形图 1年龄分布模块制作
- 官网找到类似实例, 适当分析,并且引入到HTML页面中 - 根据需求定制图表定制图表需求1: - 修改图例组件在底部并且居中显示. - 每个小图标的宽度和高度修改为 10px - 文字大小为12 ...
数据可视化ECharts:饼形图2 地区分布模块制作（南丁格尔玫瑰图）
- 官网找到类似实例, 适当分析,并且引入到HTML页面中 - 根据需求定制图表 - 需求1:颜色设置 color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7 ...
数据可视化路上——中国地图可视化
想用geo:from pyecharts import Geo Collecting Geo Could not find a version that satisfies the requireme ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...

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

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

最新文章

热门文章