最近做项目遇到一个需求，需要显示广东省各个地级市的地图，并且鼠标移入高亮显示，鼠标点击可以选中某个地级市。在网上查阅了大量资料之后，最后选择了使用echarts实现该需求。在此记录一下，希望可以帮到有需求的小伙伴。本人初次使用，有不足之处希望大家可以指出，先看看效果图：

　　

该需求主要有以下几个关键点：

　　首先我们需要初始化一个地图坐标系，可以在网上下载一个地图的json文件。

　　

  1. import GDJson from '../../../../statics/cdn/guangdong.json';
  2.  
  3. echarts.registerMap('GD', GDJson);

　　然后就是通过配置option绘制出具体的地图，此处我是通过绘制一个散点图，实现的各个地级市名字的显示，需要知道各个市的经纬度，这个可以在网上查到。然后通过dataRange设置了不同的value值所显示的颜色。具体配置如下所示：

　　

  1. var provienceData = [
  2.       { name: '广州', type: 'areaCenterCity', value: 0, departId: '001021' },
  3.       { name: '深圳', type: 'areaCenterCity', value: 0, departId: '001020' },
  4.       { name: '佛山', type: 'areaCenterCity', value: 0, departId: '001004' },
  5.       { name: '东莞', type: 'areaCenterCity', value: 0, departId: '001008' },
  6.       { name: '中山', type: 'areaCenterCity', value: 0, departId: '001019' },
  7.       { name: '珠海', type: 'areaCenterCity', value: 0, departId: '001011' },
  8.       { name: '江门', type: 'areaCenterCity', value: 0, departId: '001015' },
  9.       { name: '肇庆', type: 'areaCenterCity', value: 0, departId: '001005' },
  10.       { name: '惠州', type: 'areaCenterCity', value: 0, departId: '001010' },
  11.       { name: '汕头', type: 'areaCenterCity', value: 0, departId: '001007' },
  12.       { name: '潮州', type: 'areaCenterCity', value: 0, departId: '001009' },
  13.       { name: '揭阳', type: 'areaCenterCity', value: 0, departId: '001006' },
  14.       { name: '汕尾', type: 'areaCenterCity', value: 0, departId: '001001' },
  15.       { name: '湛江', type: 'areaCenterCity', value: 0, departId: '001018' },
  16.       { name: '茂名', type: 'areaCenterCity', value: 0, departId: '001003' },
  17.       { name: '阳江', type: 'areaCenterCity', value: 0, departId: '001016' },
  18.       { name: '韶关', type: 'areaCenterCity', value: 0, departId: '001013' },
  19.       { name: '清远', type: 'areaCenterCity', value: 0, departId: '001017' },
  20.       { name: '云浮', type: 'areaCenterCity', value: 0, departId: '001002' },
  21.       { name: '梅州', type: 'areaCenterCity', value: 0, departId: '001014' },
  22.       { name: '河源', type: 'areaCenterCity', value: 0, departId: '001012' },
  23.     ];
  24. let option = {
  25.       dataRange: {
  26.         show: false,
  27.         x: 'left',
  28.         y: 'bottom',
  29.         splitList: [
  30.           { start: 0, end: 0, color: '#13667e' },//当值为5时，区域背景
  31.           { start: 5, end: 5, color: '#187fed' },//当值为5时，区域背景
  32.         ],
  33.       },
  34.       geo: {
  35.         map: 'GD',
  36.         roam: false,
  37.         zoom: 0.94,
  38.         tooltip: {
  39.           show: false,       //不显示提示标签
  40.         },
  41.         center: [113.122717, 22.900762],
  42.         label: {
  43.           normal: {
  44.             show: false,//显示省份标签
  45.             textStyle: { color: "#333333" }//省份标签字体颜色
  46.           },
  47.           emphasis: {//对应的鼠标悬浮效果
  48.             show: false,
  49.             textStyle: { color: "#333333" }
  50.           }
  51.         },
  52.         itemStyle: {
  53.           normal: {
  54.             borderWidth: 1,//区域边框宽度
  55.             borderColor: '#ffffff',//区域边框颜色
  56.             areaColor: "#fff",//区域颜色
  57.             label: { show: false }
  58.           },
  59.           emphasis: {
  60.             areaColor: "#187fed",
  61.           }
  62.         },
  63.       },
  64.       series: [
  65.         {
  66.           type: 'scatter',  //'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
  67.           //'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
  68.           coordinateSystem: 'geo',
  69.           data: this.convertData(provienceData),
  70.           symbolSize: 10,
  71.           symbolRotate: 40,
  72.           geoIndex: 0,
  73.           label: {
  74.             normal: {
  75.               formatter: '{b}',
  76.               position: 'bottom',
  77.               show: true,
  78.               color: '#fff',
  79.             },
  80.             emphasis: {
  81.               show: false
  82.             }
  83.           },
  84.           tooltip: {
  85.             show: false,       //不显示提示标签
  86.             formatter: '{c}',      //提示标签格式
  87.             backgroundColor: "#fff",//提示标签背景颜色
  88.             borderColor: '#ccc',
  89.             borderWidth: 5,
  90.             textStyle: { color: "#ccc" } //提示标签字体颜色
  91.           },
  92.           itemStyle: {
  93.             normal: {
  94.               color: '#fff'
  95.             }
  96.           }
  97.         },
  98.         {
  99.           type: 'map',
  100.           mapType: 'GD',
  101.           geoIndex: 0,
  102.           roam: false,
  103.           zoom: 0.94,
  104.           center: [113.122717, 22.900762],
  105.           tooltip: {
  106.             show: false,       //不显示提示标签
  107.           },
  108.           label: {
  109.             normal: {
  110.               show: false    //显示省份标签
  111.             },
  112.             emphasis: {
  113.               show: false,
  114.             }
  115.           },
  116.           itemStyle: {
  117.             //正常样式
  118.             normal: {
  119.               borderWidth: 1,      //区域边框宽度
  120.               borderColor: '#ffffff',  //区域边框颜色
  121.               areaColor: "#187fed",
  122.             },
  123.             //鼠标事件区块样式
  124.             emphasis: {
  125.               areaColor: "#187fed",
  126.             }
  127.           },
  128.           data: provienceData
  129.         }
  130.       ],
  131.     }
  132.     myChart.setOption(option);
  133. convertData(data) {
  134.     const geoCoordMap = {
  135.       '广州': [113.480637, 23.325178],
  136.       '深圳': [114.085947, 22.597],
  137.       '佛山': [113.022717, 23.028762],
  138.       '东莞': [113.746262, 23.006237],
  139.       '中山': [113.382391, 22.521113],
  140.       '珠海': [113.353986, 22.124979],
  141.       '江门': [112.594942, 22.290431],
  142.       '肇庆': [112.072529, 23.651546],
  143.       '惠州': [114.412599, 23.079404],
  144.       '汕头': [116.708463, 23.37102],
  145.       '潮州': [116.832301, 23.761701],
  146.       '揭阳': [116.055733, 23.343778],
  147.       '汕尾': [115.364238, 22.974485],
  148.       '湛江': [110.064977, 21.274898],
  149.       '茂名': [110.919229, 21.959751],
  150.       '阳江': [111.805107, 22.009222],
  151.       '韶关': [113.591544, 24.801322],
  152.       '清远': [113.051227, 24.285022],
  153.       '云浮': [112.044439, 22.929801],
  154.       '梅州': [116.117582, 24.299112],
  155.       '河源': [114.997802, 23.946266],
  156.     }
  157.     var res = [];
  158.     for (var i = 0; i < data.length; i++) {
  159.       var geoCoord = geoCoordMap[data[i].name];
  160.       if (geoCoord) {
  161.         res.push({
  162.           name: data[i].name,
  163.           value: geoCoord.concat(data[i].value),
  164.           area: data[i].area,
  165.           type: data[i].type,
  166.         });
  167.       }
  168.     }
  169.     return res;
  170.   }

最后则是为地图添加点击事件，点击某个区域的时候，更改某个区域的value值，进而改变其颜色

  1. myChart.on('click', function (params) {
  2.       for (let i = 0; i < provienceData.length; i++) {
  3.         provienceData[i].value = 0
  4.         if (params.name === provienceData[i].name && _this.state.departName !== params.data.name) {
  5.           provienceData[i].value = 5
  6.         }
  7.       }
  8.  
  9.      myChart.setOption(option);
  10. });

最后来一波总体代码

  1. import React from 'react'
  2. import echarts from 'echarts';
  3. import GDJson from '../../../../statics/cdn/guangdong.json';
  4. componentDidMount() {
  5.     this.initalECharts()
  6.  }
  7. // 初始化地图
  8.   initalECharts() {
  9.     if(!document.getElementById('map')){
  10.       return
  11.     }
  12.     let _this = this
  13.     var provienceData = [
  14.       { name: '广州', type: 'areaCenterCity', value: 0, departId: '001021' },
  15.       { name: '深圳', type: 'areaCenterCity', value: 0, departId: '001020' },
  16.       { name: '佛山', type: 'areaCenterCity', value: 0, departId: '001004' },
  17.       { name: '东莞', type: 'areaCenterCity', value: 0, departId: '001008' },
  18.       { name: '中山', type: 'areaCenterCity', value: 0, departId: '001019' },
  19.       { name: '珠海', type: 'areaCenterCity', value: 0, departId: '001011' },
  20.       { name: '江门', type: 'areaCenterCity', value: 0, departId: '001015' },
  21.       { name: '肇庆', type: 'areaCenterCity', value: 0, departId: '001005' },
  22.       { name: '惠州', type: 'areaCenterCity', value: 0, departId: '001010' },
  23.       { name: '汕头', type: 'areaCenterCity', value: 0, departId: '001007' },
  24.       { name: '潮州', type: 'areaCenterCity', value: 0, departId: '001009' },
  25.       { name: '揭阳', type: 'areaCenterCity', value: 0, departId: '001006' },
  26.       { name: '汕尾', type: 'areaCenterCity', value: 0, departId: '001001' },
  27.       { name: '湛江', type: 'areaCenterCity', value: 0, departId: '001018' },
  28.       { name: '茂名', type: 'areaCenterCity', value: 0, departId: '001003' },
  29.       { name: '阳江', type: 'areaCenterCity', value: 0, departId: '001016' },
  30.       { name: '韶关', type: 'areaCenterCity', value: 0, departId: '001013' },
  31.       { name: '清远', type: 'areaCenterCity', value: 0, departId: '001017' },
  32.       { name: '云浮', type: 'areaCenterCity', value: 0, departId: '001002' },
  33.       { name: '梅州', type: 'areaCenterCity', value: 0, departId: '001014' },
  34.       { name: '河源', type: 'areaCenterCity', value: 0, departId: '001012' },
  35.     ];
  36.     echarts.registerMap('GD', GDJson);
  37.     //初始化ECharts实例
  38.     const myChart = echarts.init(document.getElementById('map'));
  39.     let option = {
  40.       dataRange: {
  41.         show: false,
  42.         x: 'left',
  43.         y: 'bottom',
  44.         splitList: [
  45.           { start: 0, end: 0, color: '#13667e' },//当值为5时，区域背景
  46.           { start: 5, end: 5, color: '#187fed' },//当值为5时，区域背景
  47.         ],
  48.       },
  49.       geo: {
  50.         map: 'GD',
  51.         roam: false,
  52.         zoom: 0.94,
  53.         tooltip: {
  54.           show: false,       //不显示提示标签
  55.         },
  56.         center: [113.122717, 22.900762],
  57.         label: {
  58.           normal: {
  59.             show: false,//显示省份标签
  60.             textStyle: { color: "#333333" }//省份标签字体颜色
  61.           },
  62.           emphasis: {//对应的鼠标悬浮效果
  63.             show: false,
  64.             textStyle: { color: "#333333" }
  65.           }
  66.         },
  67.         itemStyle: {
  68.           normal: {
  69.             borderWidth: 1,//区域边框宽度
  70.             borderColor: '#ffffff',//区域边框颜色
  71.             areaColor: "#fff",//区域颜色
  72.             label: { show: false }
  73.           },
  74.           emphasis: {
  75.             areaColor: "#187fed",
  76.           }
  77.         },
  78.       },
  79.       series: [
  80.         {
  81.           type: 'scatter',  //'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
  82.           //'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
  83.           coordinateSystem: 'geo',
  84.           data: this.convertData(provienceData),
  85.           symbolSize: 10,
  86.           symbolRotate: 40,
  87.           geoIndex: 0,
  88.           label: {
  89.             normal: {
  90.               formatter: '{b}',
  91.               position: 'bottom',
  92.               show: true,
  93.               color: '#fff',
  94.             },
  95.             emphasis: {
  96.               show: false
  97.             }
  98.           },
  99.           tooltip: {
  100.             show: false,       //不显示提示标签
  101.             formatter: '{c}',      //提示标签格式
  102.             backgroundColor: "#fff",//提示标签背景颜色
  103.             borderColor: '#ccc',
  104.             borderWidth: 5,
  105.             textStyle: { color: "#ccc" } //提示标签字体颜色
  106.           },
  107.           itemStyle: {
  108.             normal: {
  109.               color: '#fff'
  110.             }
  111.           }
  112.         },
  113.         {
  114.           type: 'map',
  115.           mapType: 'GD',
  116.           geoIndex: 0,
  117.           roam: false,
  118.           zoom: 0.94,
  119.           center: [113.122717, 22.900762],
  120.           tooltip: {
  121.             show: false,       //不显示提示标签
  122.           },
  123.           label: {
  124.             normal: {
  125.               show: false    //显示省份标签
  126.             },
  127.             emphasis: {
  128.               show: false,
  129.             }
  130.           },
  131.           itemStyle: {
  132.             //正常样式
  133.             normal: {
  134.               borderWidth: 1,      //区域边框宽度
  135.               borderColor: '#ffffff',  //区域边框颜色
  136.               areaColor: "#187fed",
  137.             },
  138.             //鼠标事件区块样式
  139.             emphasis: {
  140.               areaColor: "#187fed",
  141.             }
  142.           },
  143.           data: provienceData
  144.         }
  145.       ],
  146.     }
  147.     myChart.setOption(option);
  148.  
  149.     myChart.on('click', function (params) {
  150.       for (let i = 0; i < provienceData.length; i++) {
  151.         provienceData[i].value = 0
  152.         if (params.name === provienceData[i].name && _this.state.departName !== params.data.name) {
  153.           provienceData[i].value = 5
  154.         }
  155.       }
  156.       if (_this.state.departName !== params.data.name) {
  157.         _this.setState({ departName: params.data.name, departId: params.data.departId }, () => {
  158.           _this.getData()
  159.         })
  160.       } else {
  161.         _this.setState({ departName: '', departId: '' }, () => {
  162.           _this.getData()
  163.         })
  164.       }
  165.       myChart.setOption(option);
  166.     });
  167.     window.addEventListener('resize', () => {
  168.       if (myChart && myChart.resize) {
  169.         myChart.resize();
  170.       }
  171.     });
  172.  
  173.   }
  174.   // 添加地图每个市的坐标
  175.   convertData(data) {
  176.     const geoCoordMap = {
  177.       '广州': [113.480637, 23.325178],
  178.       '深圳': [114.085947, 22.597],
  179.       '佛山': [113.022717, 23.028762],
  180.       '东莞': [113.746262, 23.006237],
  181.       '中山': [113.382391, 22.521113],
  182.       '珠海': [113.353986, 22.124979],
  183.       '江门': [112.594942, 22.290431],
  184.       '肇庆': [112.072529, 23.651546],
  185.       '惠州': [114.412599, 23.079404],
  186.       '汕头': [116.708463, 23.37102],
  187.       '潮州': [116.832301, 23.761701],
  188.       '揭阳': [116.055733, 23.343778],
  189.       '汕尾': [115.364238, 22.974485],
  190.       '湛江': [110.064977, 21.274898],
  191.       '茂名': [110.919229, 21.959751],
  192.       '阳江': [111.805107, 22.009222],
  193.       '韶关': [113.591544, 24.801322],
  194.       '清远': [113.051227, 24.285022],
  195.       '云浮': [112.044439, 22.929801],
  196.       '梅州': [116.117582, 24.299112],
  197.       '河源': [114.997802, 23.946266],
  198.     }
  199.     var res = [];
  200.     for (var i = 0; i < data.length; i++) {
  201.       var geoCoord = geoCoordMap[data[i].name];
  202.       if (geoCoord) {
  203.         res.push({
  204.           name: data[i].name,
  205.           value: geoCoord.concat(data[i].value),
  206.           area: data[i].area,
  207.           type: data[i].type,
  208.         });
  209.       }
  210.     }
  211.     return res;
  212.   }
  213. render(){
  214. 　　return(<div className={styles.map} id="map"></div>)
    }

react使用Echarts绘制高亮可点击选中的省市地图的更多相关文章

  1. react使用echarts

    1.安装echarts: npm install echarts --save 2.制作线性图组件,只引入echart必要的js内容 /** * Created by yongyuehuang on ...

  2. React＋Echarts简单的封装套路

    今天我们来介绍一下React中,对Echarts的一个简单的封装. 首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以 cnpm install ech ...

  3. react的echarts BizCharts

    react BizCharts react的饼图,折线图 点击进入官网 -> https://bizcharts.net/products/bizCharts/demo 如果你在这遇到了问题,欢 ...

  4. react之echarts数据更新

    react之echarts数据更新 在使用setState更新数据时,如果要将图标更新,需要做一些简单的封装,代码如下: import React, { Component } from 'react ...

  5. 使用echarts绘制漂亮的渐变键盘仪表盘

    echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...

  6. webpack+react实现echarts可视化配置

    先上效果 开发环境要求 需要事先安装node及npm 前期准备 1.创建文件夹react-echarts-editor2.在项目根目录(以下称根目录)下创建src目录3.在项目根目录下创建dist目录 ...

  7. 使用echarts绘制条形图和扇形图

    使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 <!doctype html> <html lang="en" ...

  8. Echarts如何添加鼠标点击事件？防止重复触发点击事件

    Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...

  9. echarts —— 绘制横向柱状图（圆角、无坐标轴）

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

随机推荐

  1. 移动端布局的一些设置（在viewport里设置使页面显示相同宽度，显示相同像素大小）

    viewport(视口) 具体数值(不设置时默认为980 ,部分安卓手机不支持设置成具体数值) width=device-width 和设备宽度保持一致 user-scalable=no 是否允许用户 ...

  2. 复习MintUI

    一.表单----复选框列表 1.<mt-checklist title="标题" options="['a','b','c']" #选项列表 v-mode ...

  3. Django之请求生命周期

    settings.py中间件执行 自定义中间件的配置: (1)任意新建一个py文件,导入模块from django.utils.deprecation import MiddlewareMixin ( ...

  4. strom_hdfs与Sequence详解

    这片博客主要是讲解storm-hdfs,Squence及它们的trident方法使用,不多说上代码: pom.xml <dependency> <groupId>org.apa ...

  5. Thinkphp5 post提交模糊查询带分页如何保留参数

    最近做了一个分页的模糊查询post请求,发现查出来的分页点击下一页导致所有的搜索条件被重置,分页效果就失效了. 以下是网上部分解决办法: 控制器代码 public function index($na ...

  6. Android | 超简单集成HMS ML Kit实现最大脸微笑抓拍

    前言   如果大家对HMS ML Kit 人脸检测功能有所了解,相信已经动手调用我们提供的接口编写自己的APP啦.目前就有小伙伴在调用接口的过程中反馈,不太清楚HMS ML Kit 文档中的MLMax ...

  7. 是时候扔掉cmder， 换上Windows Terminal

    作为一个Windows的长期用户,一直没有给款好用的终端,知道遇到了 cmder,它拯救一个习惯用Windows敲shell命令的人. 不用跟我安利macOS真香!公司上班一直用macOS,一方面确实 ...

  8. nginx 搭建图片服务器（windows 下，linux 下原理应该一样）

    作者的心声:很多知道的.用过的东西,不写下来,下次还要百度查询,浪费时间和精力,故本次写下学习笔记,方便下次查阅. 题外话:如有读者通过我这篇博客解决了工作上的难题,可以给个评论,让我一起分享你的喜悦 ...

  9. Asp.Net Mvc基于Fleck开发的多人网页版即时聊天室

    一.项目的核心说明 1.Fleck这个是实现websocket一个比较简单第三方组件,它不需要安装额外的容器.本身也就几个接口可供调用. 2.项目是基于.net framework 4.7.2 ,在v ...

  10. 面试题：我们重写一个对象的时候为什么要同时重写hashcode()和equals（）方法

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 在创建的类不重写hashCode()和equals() 方法时,默认使用 java 提供的 java.l ...