生成毕业同学去向数据地图,鼠标经过某个省是变色而且显示相关的信息(比如那些人在这个省)

本文主要是介绍生成毕业同学去向数据地图,鼠标经过某个省是变色而且显示相关的信息(比如那些人在这个省),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果

在这里插入图片描述

html代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;color: #333333;}body {font-family: "微软雅黑";}#charts {width: 800px;height: 600px;margin: 0 auto;}</style>
</head><body><div id="charts"></div>
</body><script src="echarts-all2.js"></script>
<script>var detail = [{ ren: "长沙:xxx、xxx、xxx" },{ ren: "西安:xxx" },{ ren: "昆明:xxx、xxx、xxx、xxx、 <br> &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; xxx、xxx、xxx、xxx、 <br> &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; xxx、xxx、xxx、<br> &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; xxx、  xxx、xxx <br> 威信:xxx <br> 昭通:xxx <br> 曲靖:xxx" },{ ren: "毕节赫章:xxx  <br> 贵阳南明:xxx" },{ ren: "&nbsp; &nbsp; &nbsp;杭州:&nbsp; &nbsp;  &nbsp;xxx  <br> 衢(qú)州:xxx" },{ ren: "洛阳:xxx" },{ ren: "上海闵行:xxx  <br> 上海浦东:xxx  <br>上海杨浦:xxx、xxx" },{ ren: "深圳:xxx、xxx、xxx" },{ ren: "成都:&nbsp;  &nbsp; xxx、xxx、xxx、  <br> &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; xxx、xxx <br> 攀枝花:xxx" },{ ren: "天津:xxx" },{ ren: "重庆:xxx、xxx" },];var mycharts = echarts.init(document.getElementById('charts'))option = {dataRange: {show: false,x: 'left',y: 'bottom',splitList: [{ start: 5, end: 5, color: 'orange' },//当值为5时,区域背景{ start: 10, end: 10, color: '#ff6300' },//当值为10时,区域背景{ start: 15, end: 15, color: '#ccc' },//当值为15时,区域背景],},tooltip: {alwaysShowContent: true,enterable: true,formatter: function (params) {var name = params.name;var goaltext = "none";if (name == "湖南") {goaltext = detail[0].ren;} else if (name == "陕西") {goaltext = detail[1].ren;}else if (name == "云南") {goaltext = detail[2].ren;}else if (name == "贵州") {goaltext = detail[3].ren;}else if (name == "浙江") {goaltext = detail[4].ren;}else if (name == "河南") {goaltext = detail[5].ren;}else if (name == "上海") {goaltext = detail[6].ren;}else if (name == "广东") {goaltext = detail[7].ren;}else if (name == "四川") {goaltext = detail[8].ren;}else if (name == "天津") {goaltext = detail[9].ren;}else if (name == "重庆") {goaltext = detail[10].ren;}else {goaltext = "none";}return goaltext;}},series: [{name: '',type: 'map',mapType: 'china',//hoverable: false,roam: false,itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: false } }},data: [],}],animation: false};var ini_data = [];//初始化省份数组/*要那些省就在这儿改*/var provArr = ['贵州', '河南', '云南', '浙江', '上海', '湖南', '广东', '四川', '天津', '重庆', '陕西'];//获取的省份,有可能是从后台获取//正则省份,将省与市的字眼去掉,框架不识别for (var i = 0; i < provArr.length; i++) {var str = provArr[i];var re = /省|市/g;  //全局匹配var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组ini_data.push(str2);}option.series[0].data = ini_data;//将拼接好的数组赋给参数集合mycharts.setOption(option);//跟新图表//鼠标滑过事件var testStr = ',' + provArr.join(",") + ",";mycharts.on('hover', function (param) {// console.log(param);if (testStr.indexOf("," + param.name + ",") != -1) {return false;} else {param.value = 15;mycharts.setOption(option);}});//初始化省颜色function ini_province() {var ini_len = option.series[0].data.length;for (var i = 0; i < ini_len; i++) {//初始化颜色option.series[0].data[i].value = 5;mycharts.setOption(option);}}
</script></html>

用到的js代码

链接:https://pan.baidu.com/s/1vAX5gHP0n90xxfttOx-MSA

提取码:mdvs

这篇关于生成毕业同学去向数据地图,鼠标经过某个省是变色而且显示相关的信息(比如那些人在这个省)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/292896

相关文章

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注