01可视化地图

已于 2022-08-20 16:22:58 修改
阅读量219 收藏
点赞数
分类专栏： 前端开发 文章标签： 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();

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

哈希程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
地图数据可视化系统
12-22
大多数消费者在选择团购网站消费侯后会做出相应评价，从而产生海量的交易数据。这些数据包含了消费者对饮食比较全面的主观性评价和量化评分，因此通过对此类餐饮数据的分析能够有效洞悉城市餐饮消费行为。而由于该类数据体量大、数据类型多等特点，使得传统的数据分析技术已经难以有效进行分析处理。如何将可视分析技术应用于团购网站餐饮类数据分析，探索城市消费行为是一个新颖的研究课题
第十一章 数据可视化 - 地图可视化
weixin_59496235的博客
10-19 3130
无
数据可视化之地图可视化
weixin_48192346的博客
11-09 4325
做过数据分析的人都知道，老板最喜欢的莫过于数据可视化，可视化中最喜欢的莫过于地图可视化。但是想要做地图可视化也并非易事，对于大多数人来说，Excel一直都是首选，但是Excel真的是实现地图可视化的最好工具吗？大案显然不是的，在综合各个房间，小编推荐一款地图软件。
百度地图数据可视化
m0_57307213的博客
06-24 345
百度地图入门 百度开发者账号申请 官方教程 控制台 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 1638
基础地图、国内疫情地图、省内疫情地图
echarts地图数据可视化-支持手机
03-19
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图、散点图等，并且特别值得一提的是，ECharts也支持地图数据的可视化。在“echarts地图数据可视化-支持...
python实现3D地图可视化
12-20
Python 3D地图可视化的实现主要涉及到几个关键的库和技术，包括gdal、opencv和matplotlib。这些库在地理信息系统（GIS）和数据可视化领域中扮演着重要的角色。 首先，gdal是一个强大的开源库，用于处理地理空间数据...
地图数据可视化表达.pptx
08-25
地图数据可视化表达 地图数据可视化表达是指通过利用 ArcGIS 平台和其他相关技术对地图数据进行可视化处理和表达，使得地图数据更加生动、直观和易于理解。下面是地图数据可视化表达的知识点： 一、 ArcGIS 平台 ...
地图可视化风场源码样例
10-21
【地图可视化风场源码样例】是一种将气象学中的风场数据通过地图进行动态展示的技术，这种技术在气象预测、环境科学、海洋学、航空航海等领域有着广泛的应用。源码样例通常是为了帮助开发者理解和实现类似功能而提供...
陕西省三原地图数据可视化
02-22
在IT行业中，地图数据可视化是一种将地理信息以图形或图像形式展示的技术，它能帮助我们更好地理解和分析地理数据。在“陕西省三原地图数据可视化”这个项目中，我们将重点探讨如何利用JavaScript（通常通过地图库如...
基于AIMAP平台实现高仿真快速三维建模技术
06-01
文中简要介绍了基于AIMAP平台实现高仿真快速三维建模技术。在数字城市的三维建模技术上提供了新思路,指出了技术路线及工作流程,实现方法步骤,建模内容及相关标准,并用实例进行了验证,极大地提高了作业效率,达到了满意的效果。
地图可视化学习（转载）
u010380670的博客
12-03 608
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 3582
在数据可视化中，地图可视化是最常用的高级图表之一。很多人以为可视化地图这么高大上做起来肯定不容易，但如果用上FineReport或FineBI，制作起来其实并不难！ 下面帆软君就给大家介绍，用FineReport都可以做出哪些精彩的地图可视化吧！（文末有惊喜） 1 普通地图 1、区域地图 区域地图是按照国家、省市行政区划分，用来展现地理信息，以及与地理位置有关的信息。区域地图适用于带有地理位置信息的数据集展现，可以用颜色深浅来直观展示指标的大小。详情请参见：区域地图 2、点地图 点地图是通过定位经纬度，用
echarts 绘制县级市地图 数据可视化
cwtnice的博客
08-16 9534
背景： 上头给了我一个兰溪市地图相关的数据可视化任务，我自然想到了以前用过的pyecharts，但使用过发现他自带的能实现的只到地级市（例如金华市），而县级市的区划暂时没法实现。 本文以兰溪市（县级市）为例，别的地区也是一样的操作 一、准备阶段： 1.在DATAV上获取地区json DATAV.GeoAtlas:是阿里推出的一个用于获取全国、各省、各市以及个县级市详细地图信息的json文件。 这里我选中浙江省-金华市-兰溪市： 可以看到县级市并没有包含子区域，因此还需要我们继续处理 复制json数据（
地图可视化类型大全
codeuniverse的博客
10-17 2610
地图可视化类型大全: 散点地图 网格地图 聚合地图 气泡地图 热力图 Choropleth地图/分级设色地图/分级区域地图/着色地图/分级统计地图（百度百科这样翻译）/等值域地图/分段设色地图 Cartogram地图/变形地图/示意地图 规则形状地图 /RecMap/Demers Cartogram/瓷砖网格地图/DorlingMap 流型图（Flow Map）\流线图\流向图\轨迹地图 复合地图
【Echarts】数据可视化完成大屏地图（拓展乡镇地区）的绘制
毛毛的博客
05-31 1838
绘制地图要素 地图边缘 地理位置（中心点或者自定义的未知） echarts绘制 * 实现在前 * 成品展示放在最后 * 代码太长，参考代码可见Github Github地址 获取地图 获取精确到乡镇街道的地图JSON数据   高德地图api获取JSON 上面拿到的数据最多只能到县（无法到达乡镇），为了能拓展到乡镇地区，我们用如下方法：  （1）进入bigmap下载页面  （2）下载安装之后打开，可以在右上角进行区域的选择，可以发现，它是精确到镇级的, 这里 不要点击左边的下载按钮
手把手教你制作一目了然的可视化地图
明月说数据
05-26 3763
可视化是一种常见的数据可视化方法。利用数据可视化的方法，分析对与地理位置有关的信息，并将其显示成真实的地图，使其更加清晰，便于人们对其进行分析，从而帮助做出正确的判断。
python如何画出漂亮的地图？推荐一个地图可视化神器：pyecharts
weixin_42625143的博客
11-06 2197
pyecharts是什么？ 是一个用于生成 Echarts 图表的类库，Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，pyecharts 是为了与 Python 进行对接，方便在 Python 中直接使用数据生成图。 使用pyecharts可以生成独立的网页，也可以在flask、django中集成使用。 PS：百度地图今年的审图号是“GS(20...
五种高大上的可视化地图，10分钟快速上手，一个代码都不用敲
帆软商业智能技术
06-01 3026
在数据可视化中，地图可视化是最最常用的高级图表之一了，尤其是各种企业的可视化大屏里，要是不放张地图大屏，都不好意思跟老板或者同行看。 这种可视化地图虽然高大上，但是制作方法其实并不难，主要有两种方法： 第一种是用python、echarts组合的方法，这种方式要求具有一定的JS编程基础，难度较高，但是自由化程度很高，可以实现诸如喷泉图的效果，推荐有编程基础的人学习。 第二种是使用可视化平台，比如国内的FineBI、国外的BatchGeo等，这种方式的学习成本很低，基本不...
javascript可视化地图
最新发布
08-16
在 JavaScript 中，您可以使用各种库和工具来实现可视化地图。以下是几个常用的 JavaScript 地图库： 1. Leaflet：它是一个开源的 JavaScript 库，提供了一个简单而灵活的方式来创建交互式地图。您可以在 Leaflet ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值