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

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

效果

在这里插入图片描述

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

相关文章

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

Hadoop集群数据均衡之磁盘间数据均衡

生产环境,由于硬盘空间不足,往往需要增加一块硬盘。刚加载的硬盘没有数据时,可以执行磁盘数据均衡命令。(Hadoop3.x新特性) plan后面带的节点的名字必须是已经存在的,并且是需要均衡的节点。 如果节点不存在,会报如下错误: 如果节点只有一个硬盘的话,不会创建均衡计划: (1)生成均衡计划 hdfs diskbalancer -plan hadoop102 (2)执行均衡计划 hd

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

AI一键生成 PPT

AI一键生成 PPT 操作步骤 作为一名打工人,是不是经常需要制作各种PPT来分享我的生活和想法。但是,你们知道,有时候灵感来了,时间却不够用了!😩直到我发现了Kimi AI——一个能够自动生成PPT的神奇助手!🌟 什么是Kimi? 一款月之暗面科技有限公司开发的AI办公工具,帮助用户快速生成高质量的演示文稿。 无论你是职场人士、学生还是教师,Kimi都能够为你的办公文

sqlite3 相关知识

WAL 模式 VS 回滚模式 特性WAL 模式回滚模式(Rollback Journal)定义使用写前日志来记录变更。使用回滚日志来记录事务的所有修改。特点更高的并发性和性能;支持多读者和单写者。支持安全的事务回滚,但并发性较低。性能写入性能更好,尤其是读多写少的场景。写操作会造成较大的性能开销,尤其是在事务开始时。写入流程数据首先写入 WAL 文件,然后才从 WAL 刷新到主数据库。数据在开始