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

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

效果

在这里插入图片描述

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>