01可视化地图

已于 2022-08-20 16:22:58 修改
阅读量241 收藏
点赞数
分类专栏： 前端开发 文章标签： echarts javascript vue.js
于 2022-08-20 16:16:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45123364/article/details/126441077
版权

行政区可视化地图

1. 页面布局
<template>
  <div class="mapbox" v-if="MapDisplay">
    <div class="Mymaps" id="Mymap"></div>
    <div class="timelinebox1" v-if="ButDisplay">
      <button
        title="时间点"
        type="reset"
        v-for="year in years"
        :key="year.value"
        :value="year.index"
        @click="ChageColor(year.index)"
        :style="{ backgroundColor: activeColor[year.index] }"
      ></button>
    </div>
    <div class="timelinebox2">
      <span class="buttile" v-for="year in years" :key="year.value">{{
        year.value
      }}</span>
    </div>
  </div>
</template>
2. 方法实现
<script>
import "echarts/map/js/china";
export default {
  name: "Mymap",
  data() {
    return {
      PollutedDaysData: [
          { name: "天津", value: 196 },{ name: "河南", value: 193 },{ name: "山东", value: 170 },
          { name: "河北", value: 154 },{ name: "北京", value: 134 },{ name: "安徽", value: 116 },
          { name: "江苏", value: 115 },{ name: "湖北", value: 108 },{ name: "湖南", value: 105 },
          { name: "上海", value: 83 },{ name: "山西", value: 76 },{ name: "重庆", value: 62 },
          { name: "浙江", value: 57 },{ name: "陕西", value: 54 },{ name: "广西", value: 49 },
          { name: "贵州", value: 49 },{ name: "江西", value: 48 },{ name: "辽宁", value: 46 },
          { name: "广东", value: 34 },{ name: "吉林", value: 30 },{ name: "香港", value: 25 },
          { name: "澳门", value: 23 },{ name: "宁夏", value: 15 },{ name: "海南", value: 9 },
          { name: "福建", value: 7 },{ name: "新疆", value: 6 },{ name: "黑龙江", value: 5 },
          { name: "甘肃", value: 3 },{ name: "四川", value: 3 },{ name: "内蒙古", value: 2 },
          { name: "云南", value: 0 },{ name: "青海", value: 0 },{ name: "西藏", value: 0 },
        ],
      ButDisplay: true,
      MapDisplay: true,
      years: [
        { index: 0, value: 2013 },
        { index: 1, value: 2014 },
        { index: 2, value: 2015 },
        { index: 3, value: 2016 },
        { index: 4, value: 2017 },
        { index: 5, value: 2018 },
      ],
      activeColor: ["orange", "gray", "gray", "gray", "gray", "gray"],
      selectyear: 0,
    };
  },
  methods: {
    MapShow() {
      let that = this;
      let echarts = require("echarts");
      this.myecharts = echarts.init(document.getElementById("Mymap"));
      var option = {
        title: {
          text: "中国污染天数统计图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["中国污染天数统计图"],
        },
        visualMap: {
          type: "piecewise",
          pieces: [
            { min: 180, max: 365, label: "大于180天", color: "#372a28" },
            { min: 120, max: 179, label: "120-180天", color: "#4e160f" },
            { min: 60, max: 119, label: "60-120天", color: "#974236" },
            { min: 10, max: 59, label: "10-60天", color: "#ee7263" },
            { min: 0, max: 9, label: "小于10天", color: "#f5bba7" },
          ],
          color: ["#E0022B", "#E09107", "#A3E00B"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: {
              title: "数据统计",
              show: true,
              readOnly: false,
              //修改数据视图的格式，以表格的形式
              optionToContent: function (opt) {
                console.log(opt);
                var data = opt.series[0].data;
                var table =
                  '<table style="width:100%;text-align:center;left:center"><tbody><tr>' +
                  "<td>地区</td>" +
                  "<td>累计天数</td>" +
                  "</tr>";
                for (var i = 0, l = data.length; i < l; i++) {
                  table +=
                    "<tr>" +
                    "<td>" +
                    data[i].name +
                    "</td>" +
                    "<td>" +
                    data[i].value +
                    "</td>" +
                    "</tr>";
                }
                table += "</tbody></table>";
                return table;
              },
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        roamController: {
          show: true,
          left: "right",
          mapTypeControl: {
            china: true,
          },
        },
        series: [
          {
            name: "地区  累计天数",
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              show: true,
              color: "rgb(249, 249, 249)",
            },
            data: that.PollutedDaysData,
          },
        ],
      };
      this.myecharts.setOption(option);
      window.addEventListener("resize", () => {
        this.myecharts.resize();
      });
    },
    //点击按钮显示高亮
    ChageColor(e) {
      this.ButDisplay = false;
      this.MapShow();
      this.activeColor[e] = "orange";
      this.selectyear = e;
      switch (e) {
        case 0:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 1:
          this.activeColor[0] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 2:
          this.activeColor[1] =
            this.activeColor[0] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 3:this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[0] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 4:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[0] =
            this.activeColor[5] =
              "gray";
          break;
        case 5:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[0] =
              "gray";
          break;
        default:
          break;
      }
      console.log("success");
      this.ButDisplay = true;
    },
  },
  mounted() {
    let that = this;
    that.MapShow();
  },
};
</script>

如果需要点击按钮能够切换不同年份的数据，需要创建一个数据列表，然后修改如下代码就行

series: [
          {
            name: "地区  累计天数",
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              show: true,
              color: "rgb(249, 249, 249)",
            },
            data: that.PollutedDaysData[that.selectyear],
          },

创建数据列表如图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mrrK49pa-1660983196952)(E:/Vue开发/Vue开发.assets/image-20220820155450768.png)]

3. 实现效果

在这里插入图片描述

4. 出现的问题
  • 按钮点击变色问题
:style="{ backgroundColor: activeColor[year.index] }"

这里设置了一个样式变量，但是样式设置中的背景颜色属性带有“-”，只需要将横杠去掉，横杆后面第一个字母改成大写

  • 如何设置仅一个按钮变色，其他按钮恢复原色问题
ChageColor(e) {
      this.ButDisplay = false;
      this.MapShow();
      this.activeColor[e] = "orange";
      this.selectyear = e;
      switch (e) {
        case 0:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 1:
          this.activeColor[0] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 2:
          this.activeColor[1] =
            this.activeColor[0] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 3:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[0] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 4:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[0] =
            this.activeColor[5] =
              "gray";
          break;
        case 5:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[0] =
              "gray";
          break;
        default:
          break;
      }
      console.log("success");
      this.ButDisplay = true;
    },

这里我使用了一个switch检查函数，遍历其他按钮，恢复原样

  • 点击按钮后，仅仅后台数据修改，前端没有刷新
ChageColor(e) {
      this.ButDisplay = false;
      this.MapShow();
      this.activeColor[e] = "orange";
      this.selectyear = e;
      switch (e) {
        case 0:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 1:
          this.activeColor[0] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 2:
          this.activeColor[1] =
            this.activeColor[0] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 3:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[0] =
            this.activeColor[4] =
            this.activeColor[5] =
              "gray";
          break;
        case 4:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[0] =
            this.activeColor[5] =
              "gray";
          break;
        case 5:
          this.activeColor[1] =
            this.activeColor[2] =
            this.activeColor[3] =
            this.activeColor[4] =
            this.activeColor[0] =
              "gray";
          break;
        default:
          break;
      }
      console.log("success");
      this.ButDisplay = true;
    },

这里我使用了一个switch检查函数，遍历其他按钮，恢复原样

  • 点击按钮后，仅仅后台数据修改，前端没有刷新
this.MapShow();

这里我在按钮响应方法里每点击一次重新加载可视化地图，进行前端页面刷新

哈希程
关注
专栏目录
地图数据可视化系统
12-22
大多数消费者在选择团购网站消费侯后会做出相应评价，从而产生海量的交易数据。这些数据包含了消费者对饮食比较全面的主观性评价和量化评分，因此通过对此类餐饮数据的分析能够有效洞悉城市餐饮消费行为。而由于该类数据体量大、数据类型多等特点，使得传统的数据分析技术已经难以有效进行分析处理。如何将可视分析技术应用于团购网站餐饮类数据分析，探索城市消费行为是一个新颖的研究课题
python实现3D地图可视化
12-20
Python 3D地图可视化的实现主要涉及到几个关键的库和技术，包括gdal、opencv和matplotlib。这些库在地理信息系统（GIS）和数据可视化领域中扮演着重要的角色。 首先，gdal是一个强大的开源库，用于处理地理空间数据...
第十一章 数据可视化 - 地图可视化
weixin_59496235的博客
10-19 3310
无
数据可视化之地图可视化
weixin_48192346的博客
11-09 4450
做过数据分析的人都知道，老板最喜欢的莫过于数据可视化，可视化中最喜欢的莫过于地图可视化。但是想要做地图可视化也并非易事，对于大多数人来说，Excel一直都是首选，但是Excel真的是实现地图可视化的最好工具吗？大案显然不是的，在综合各个房间，小编推荐一款地图软件。
百度地图数据可视化
m0_57307213的博客
06-24 404
百度地图入门 百度开发者账号申请 官方教程 控制台 API 基本用法 ::: details <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> &l
8-数据可视化-地图可视化
欢迎来到我的博客
04-07 1725
基础地图、国内疫情地图、省内疫情地图
地图数据可视化看板大屏幕模板,大屏数据可视化动态地图,HTML
09-10
地图数据可视化看板大屏幕模板是一种高效的数据呈现方式，它结合了地理信息系统（GIS）与大数据可视化技术，专为大数据展示设计。这种模板通常用于商业智能、城市规划、交通管理等领域，通过大屏幕实时展现各类数据...
HTML+CSS+JS数据可视化大屏平台模板实例10-大数据地图
03-25
在这个"HTML+CSS+JS数据可视化大屏平台模板实例10-大数据地图"中，我们将探讨如何利用这些技术将大量复杂的数据转化为直观且具有吸引力的地图展示。 首先，HTML（HyperText Markup Language）作为网页内容的结构...
python使用pyecharts库画地图数据可视化的实现
09-17
在Python中，Pyecharts库是一个强大的工具，用于创建各种类型的数据可视化图表，包括地图。本文将详细介绍如何使用Pyecharts库来实现地图数据可视化。 首先，我们需要导入必要的库。在Python中，`pyecharts`是我们...
基于AIMAP平台实现高仿真快速三维建模技术
06-01
文中简要介绍了基于AIMAP平台实现高仿真快速三维建模技术。在数字城市的三维建模技术上提供了新思路,指出了技术路线及工作流程,实现方法步骤,建模内容及相关标准,并用实例进行了验证,极大地提高了作业效率,达到了满意的效果。
地理数据可视化：使用echarts实现地图可视化功能
最新发布
希望看完文章的你能够带着答案离开
03-11 9288
地理数据可视化：使用echarts实现地图可视化功能
地图可视化学习（转载）
u010380670的博客
12-03 631
basemap安装 通过该网站（https://www.lfd.uci.edu/~gohlke/pythonlibs/）下载对应版本的Pyproj和basemap的whl文件，如图12.1和12.2所示。 切换到这两个whl文件的路径下，按顺序通过pip依次安装Pyproj和basemap文件，代码如下，安装Pyproj h: cd H:\python数据分析\数据 pip install py...
2022，这些地图可视化，够你用一整年了（附可视化素材）
帆软商业智能技术
01-18 3797
在数据可视化中，地图可视化是最常用的高级图表之一。很多人以为可视化地图这么高大上做起来肯定不容易，但如果用上FineReport或FineBI，制作起来其实并不难！ 下面帆软君就给大家介绍，用FineReport都可以做出哪些精彩的地图可视化吧！（文末有惊喜） 1 普通地图 1、区域地图 区域地图是按照国家、省市行政区划分，用来展现地理信息，以及与地理位置有关的信息。区域地图适用于带有地理位置信息的数据集展现，可以用颜色深浅来直观展示指标的大小。详情请参见：区域地图 2、点地图 点地图是通过定位经纬度，用
echarts 绘制县级市地图 数据可视化
热门推荐
cwtnice的博客
08-16 1万+
背景： 上头给了我一个兰溪市地图相关的数据可视化任务，我自然想到了以前用过的pyecharts，但使用过发现他自带的能实现的只到地级市（例如金华市），而县级市的区划暂时没法实现。 本文以兰溪市（县级市）为例，别的地区也是一样的操作 一、准备阶段： 1.在DATAV上获取地区json DATAV.GeoAtlas:是阿里推出的一个用于获取全国、各省、各市以及个县级市详细地图信息的json文件。 这里我选中浙江省-金华市-兰溪市： 可以看到县级市并没有包含子区域，因此还需要我们继续处理 复制json数据（
地图可视化类型大全
codeuniverse的博客
10-17 2770
地图可视化类型大全: 散点地图 网格地图 聚合地图 气泡地图 热力图 Choropleth地图/分级设色地图/分级区域地图/着色地图/分级统计地图（百度百科这样翻译）/等值域地图/分段设色地图 Cartogram地图/变形地图/示意地图 规则形状地图 /RecMap/Demers Cartogram/瓷砖网格地图/DorlingMap 流型图（Flow Map）\流线图\流向图\轨迹地图 复合地图
5分钟带你快速了解各类可视化地图！
gis_witch的博客
02-01 1500
​数据可视化的类型多样，在此介绍了四种数据可视化方式：点、线、面、栅格。每种方式都有其独特的特点和适用场景。通过不同的可视化方式，我们可以更好地理解数据，发现数据中的规律和趋势，从而做出更准确的决策。点数据可视化是将离散的点数据在地图上呈现出来，帮助人们理解数据的分布、聚集和趋势。点数据通常表示为一系列坐标对（经纬度或 X/Y 坐标），每个坐标对代表一个点的位置。地理中的点位和物理中的质点类似，是一个没有形状或大小的抽象概念，仅包含位置信息。
【Echarts】数据可视化完成大屏地图（拓展乡镇地区）的绘制
毛毛的博客
05-31 1925
绘制地图要素 地图边缘 地理位置（中心点或者自定义的未知） echarts绘制 * 实现在前 * 成品展示放在最后 * 代码太长，参考代码可见Github Github地址 获取地图 获取精确到乡镇街道的地图JSON数据   高德地图api获取JSON 上面拿到的数据最多只能到县（无法到达乡镇），为了能拓展到乡镇地区，我们用如下方法：  （1）进入bigmap下载页面  （2）下载安装之后打开，可以在右上角进行区域的选择，可以发现，它是精确到镇级的, 这里 不要点击左边的下载按钮
手把手教你制作一目了然的可视化地图
明月说数据
05-26 3824
可视化是一种常见的数据可视化方法。利用数据可视化的方法，分析对与地理位置有关的信息，并将其显示成真实的地图，使其更加清晰，便于人们对其进行分析，从而帮助做出正确的判断。
三原县地图数据的可视化展示与分析
资源摘要信息:"陕西省三原地图数据可视化是利用现代计算机技术和图形技术，将陕西省三原县的地图信息以可视化的方式展现出来。这一技术的应用，使得人们可以直观地看到三原县的地理信息，包括地形、地貌、道路、水系...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值