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

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

效果

在这里插入图片描述

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

相关文章

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

java中使用POI生成Excel并导出过程

《java中使用POI生成Excel并导出过程》:本文主要介绍java中使用POI生成Excel并导出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求说明及实现方式需求完成通用代码版本1版本2结果展示type参数为atype参数为b总结注:本文章中代码均为

在java中如何将inputStream对象转换为File对象(不生成本地文件)

《在java中如何将inputStream对象转换为File对象(不生成本地文件)》:本文主要介绍在java中如何将inputStream对象转换为File对象(不生成本地文件),具有很好的参考价... 目录需求说明问题解决总结需求说明在后端中通过POI生成Excel文件流,将输出流(outputStre

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Redis 中的热点键和数据倾斜示例详解

《Redis中的热点键和数据倾斜示例详解》热点键是指在Redis中被频繁访问的特定键,这些键由于其高访问频率,可能导致Redis服务器的性能问题,尤其是在高并发场景下,本文给大家介绍Redis中的热... 目录Redis 中的热点键和数据倾斜热点键(Hot Key)定义特点应对策略示例数据倾斜(Data S

JavaScript Array.from及其相关用法详解(示例演示)

《JavaScriptArray.from及其相关用法详解(示例演示)》Array.from方法是ES6引入的一个静态方法,用于从类数组对象或可迭代对象创建一个新的数组实例,本文将详细介绍Array... 目录一、Array.from 方法概述1. 方法介绍2. 示例演示二、结合实际场景的使用1. 初始化二