Echarts地图实现:山东省报考人数

devtools/2024/10/21 6:00:39/

Echarts地图实现:山东省报考人数

效果预览

image-20240628163751543

设计思路

  1. 数据可视化:选择地图作为数据展示的方式,可以直观地展示山东省不同城市的报考人数分布。
  2. 交互性:通过ECharts的交互功能,如提示框(tooltip)和工具箱(toolbox),增强用户体验。
  3. 视觉效果:通过色彩和图标大小的变化,突出显示数据的关键点,如报考人数的多少。

图表类型

  • 散点图(Scatter):用于表示城市和对应的报考人数,其中点的大小与报考人数成正比。
  • 地图(Map):作为基础层,展示山东省的地图轮廓。
  • 特效散点图(EffectScatter):用于突出显示报考人数最多的前五个城市。

色彩搭配

  • 背景色#020933,深蓝色背景,给人以稳重和专业的感觉。
  • 点的颜色#F4E925,明亮的黄色,使得数据点在深色背景上更加醒目。
  • 地图区域颜色:普通状态下为#020933,强调状态下为#2B91B7,提供视觉对比。
  • 边框颜色#3fdaff,亮蓝色边框,增加了地图的视觉吸引力。

核心代码

以下是HTML文档中的核心JavaScript代码段,用于初始化ECharts图表并设置配置项:

var myChart = echarts.init(document.getElementById('ECharts'));
// ...省略加载地图数据和配置地图的代码...var option = {// 背景颜色、标题、提示框、图例、工具箱等配置// ...series: [{name: 'light',type: 'scatter',// 数据和样式配置},{type: 'map',map: 'shandong',// 数据和样式配置},{name: 'Top 5',type: 'effectScatter',// 数据和样式配置}]
};myChart.setOption(option);

代码和json文件

点我下载代码和json文件


http://www.ppmy.cn/devtools/57420.html

相关文章

js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some

遍历方法返回值使用场景备注副作用for 循环——遍历数组通用可以改变原数组forEach 循环——遍历数组ES5 新增,不支持中断和异步可以改变原数组for of 循环——遍历数组ES6 新增可以改变原数组map格式化后的数组格式化数组的API不会改变原数组filter过滤后的数组过滤…

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第42课-多人联机-实时互动

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第42课-多人联机-实时互动 使用dtns.network德塔世界(开源的智体世界引擎),策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界…

Linux进程管理

查看进程 语法: ps [-e -f] 选项: -e ,显示出全部的进程 选项: -f ,以完全格式化的形式展示信息(展示全部信息) 一般来说,固定用法就是: ps -ef列出全部进程的全部信息。…

二维码登录的原理

二维码登录的原理: 二维码登录是一种基于移动设备和网络技术的便捷登录方式。其原理主要依赖于以下几个关键要素: 随机生成:服务器端随机生成一个具有唯一性和时效性的二维码。编码信息:这个二维码包含了特定的登录信息,例如用户标识、会话标识、时间戳等。扫描识别:用户…

【C++】 解决 C++ 语言报错:Undefined Reference

文章目录 引言 未定义引用(Undefined Reference)是 C 编程中常见的错误之一,通常在链接阶段出现。当编译器无法找到函数或变量的定义时,就会引发未定义引用错误。这种错误会阻止生成可执行文件,影响程序的正常构建。本…

UML形式化建模期末复习笔记

本文档为xmind导出,可能存在缺少图片等问题,建议下载思维导图查看完整内容 链接: https://pan.baidu.com/s/17s-utC2C6Qg0tFp61Kw0ZQ?pwduq64 提取码: uq64 概述 UML: Unified Modeling Language 统一建模语言 建模 定义 把不太理解的东西和一些已经较…

Flume集群部署(手把手部署图文详细版)

前景概要: Kafka消息订阅系统在大数据业务中有着重要运用,尤其在实时业务中,kafka是必不可少的组件之一。 Flume是大数据组件中重要的数据采集工具,我们常利用Flume采集各种数据源的数据供其他组件分析使用。例如在实时业务中&…

windows USB设备驱动开发-开发USB 设备端驱动

USB 设备是通过单个端口连接到计算机的外设,例如鼠标设备和键盘。 USB 客户端驱动程序是计算机上安装的软件,该软件与硬件通信以使设备正常运行。 如果设备属于 Microsoft 支持的设备类,Windows 会为该设备加载 Microsoft 提供的 USB 驱动程序…