使用Echarts.js绘制中国地图

使用Echarts.js绘制中国地图

一、页面效果

在这里插入图片描述

二、功能描述

​ 1、展示中国所有省份,包括南海诸岛,确保领土完整,中国领土神圣且不可侵犯

​ 2、每个省份根据对应数据的不同渲染不同的颜色,根据数据从小到大,对应底部视觉映射组件指定的颜色渐变区间内从浅到深。

​ 3、每个省份不可被选中,但鼠标hover会展示对应数据信息,且对应数据图形具有hover高亮样式。

​ 4、颜色渐变区间对应的数据区间,由数据列表的实际数据决定,最小值为0,最大值为数据列表的最大值。

*注意:

​ 1、当前案例是在Vue2中使用,echarts.js版本为5.3.2

三、具体代码

html结构
<!-- 准备渲染echarts的画布 -->  
<div class="china-map" id="map"></div>

<script>
// 引入echarts依赖
import * as echarts from "echarts";
// 导入中国地图JSON数据
import mapJson from "@/assets/json/china.json";
</script>
js渲染逻辑
    // 渲染地图函数(最大值参数可不传递,默认为10000)
showMap(dataList, maxValue = 10000) {
      // 判断是否已经存在实例 避免重复注册
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));
      if (!myChart) {
        myChart = echarts.init(document.getElementById("map"));
      }
  		// 注册地图
      echarts.registerMap("china", mapJson); 
      var option;
      option = {
        // 提示框组件
        tooltip: {
          trigger: "item", // 触发类型-数据项图形hover触发
          formatter: "{b}:{c}人", // hover提示框展示的内容
        },
        // 视觉映射组件
        visualMap: {
          orient: "horizontal", // 显示方式-水平
          left: "center", // 距离容器左侧的位置-居中
          min: 0, // 数据最小值
          max: maxValue, // 指定数据最大值
          itemHeight: 200, // 组件高度-200px(设置显示方式为水平之后,组件高度即为宽度)
          inRange: {
            color: ["#c2e9ff", "#2662a9"], // 范围颜色-从小到大渐变颜色区间
          },
          hoverLink: false, // 是否启用数据项图形hover时的联动高亮效果。
          // text: ["高", "低"], // 组件两侧的文本
        },
        series: [
          {
            name: "中国", // 地图名称
            type: "map", // 系列类型-地图
            map: "china", // 地图类型-与registerMap注册地图的名字相同
            roam: false, // 是否开启鼠标缩放和平移漫游
            zoom: 1.08, // 当前视角的缩放比例
            select: {
              disabled: true, // 数据项图形是否能被选中
            },
            label: {
              normal: {
                show: false, // 是否在数据图形上展示省份名称
              },
            },
            data: dataList, // 渲染的数据列表
          },
        ],
      };
      option && myChart.setOption(option);
    },
js调用逻辑:
// 省略前置逻辑
// 从后端接口获取要渲染的数据列表 name-对应省份 value-对应数据量
const data = [
        {
          name: "内蒙古",
          value: 6666,
        },
        {
          name: "山东",
          value: 99999,
        },
        {
          name: "青海",
          value: 9999,
        },
        {
          name: "河北",
          value: 999,
        },
        {
          name: "新疆",
          value: 99,
        },
        {
          name: "西藏",
          value: 9,
        },
        {
          name: "四川",
          value: 69999,
        },
        {
          name: "黑龙江",
          value: 28848,
        },
        {
          name: "甘肃",
          value: 54321,
        },
        // 其他数据。。。。
];
// 获取数据列表的最大值
const maxValue = 100000;
// 调用渲染函数 渲染地图数据
this.showMap(data, maxValue);

四、相关资料

china.json地图数据

Echarts.js 配置文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/175402.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

定时器的使用

目录 前言 正文 1.方法 schedule(TimerTask task, Date time) 的测试 &#xff08;1&#xff09;执行任务的时间晚于当前时间(在未来执行)的效果 &#xff08;2&#xff09;线程TimerThread不销毁的原因 &#xff08;3&#xff09;使用 public void cancel() 方法实现 T…

为何内存不够用?微服务改造启动多个Spring Boot的陷阱与解决方案

在生产环境中我们会遇到一些问题&#xff0c;此文主要记录并复盘一下当时项目中的实际问题及解决过程。 背景简述 最初系统上线后都比较正常风平浪静的。在系统运行了一段时间后&#xff0c;业务量上升后&#xff0c;生产上发现java应用内存占用过高&#xff0c;服务器总共64…

「Verilog学习笔记」含有无关项的序列检测

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1ns module sequence_detect(input clk,input rst_n,input a,output reg match);reg [8:0] a_tem ; always (posedge clk or negedge rst_n) begin if (~rs…

【giszz笔记】产品设计标准流程【7】

&#xff08;续上回&#xff09; 今天来讨论下产品设计标准流程中&#xff0c;交互设计和视觉设计的内容。 想参考之前文章的&#xff0c;我把链接给到这里。 【giszz笔记】产品设计标准流程【6】-CSDN博客 【giszz笔记】产品设计标准流程【5】-CSDN博客 【giszz笔记】产品…

怎么判断list是否为null

List<Entity> baseMess new ArrayList<>(); baseMess motiveService.getBaseMessage(machine.get(i),preDate,nowDate); System.out.println("获取Size"baseMess.size()); baseMess.removeIf(Objects::isNull); System.out.println("获取Size"…

SpringDoc枚举字段处理与SpringBoot接收枚举参数处理

本期内容 添加SpringDoc配置展示枚举字段&#xff0c;在文档页面中显示枚举值和对应的描述添加SpringMVC配置使项目可以接收枚举值&#xff0c;根据枚举值找到对应的枚举 默认内容 先不做任何处理看一下直接使用枚举当做入参是什么效果。 定义一个枚举 package com.exampl…

便携式自动气象站让你随时随地掌握天气变化

WX-BXQX12 随着科技的发展&#xff0c;人们对气象信息的掌握越来越重要。无论是在日常生活中&#xff0c;还是在农业生产、旅游出行等领域&#xff0c;了解天气变化都显得至关重要。为了满足人们对气象信息的需求&#xff0c;一款名为“便携式自动气象站”的创新产品应运而生。…

第15届蓝桥STEMA测评真题剖析-2023年10月29日Scratch编程初中级组

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第160讲。 第15届蓝桥第2次STEMA测评&#xff0c;这是2023年10月29日举办的STEMA&#xff0c;比赛仍然采取线上形式。这…

Java 下载地址

1 地址&#xff1a; Java Downloads | Oracle 2 往下翻(Java 8 和 Java 11) 3 往下翻 (JRE 下载)(JRE 8 为例) 4 跳转到登录(登录账号才可以下载)

汽车托运汽车会产生公里数吗?

汽车托运&#xff0c;顾名思义就是把汽车放在板车上进行托运&#xff0c;既然是被托运&#xff0c;那为什么还会产生公里数呢?是被司机私用了吗?还是被当成租赁工具租借出去了呢? 其实不然&#xff0c;回到托运流程里&#xff0c;特别是大板车&#xff0c;我们的线路有很多需…

Vue 2使用element ui 表格不显示

直接修改package.json文件 把这两个依赖修改成对应的 删除node_modules 重新安装依赖 重启

安全框架springSecurity+Jwt+Vue-2(后端开发)

一、创建项目及配置 ①&#xff1a;创建新的项目及常用包 ②&#xff1a;引入依赖和配置 devtools&#xff1a;项目的热加载重启插件 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId&…

技术分享|电商数据接口|淘宝天猫京东商品API接口之数据同步

常见的数据同步/集成场景多发生于不同的存储系统、不同的存储格式&#xff0c;如从 mysql 同步数据至数仓、excel 或 csv 导入数据库中&#xff0c;但是众多数据同步解决方案很少涉及从 http 接口同步数据。 如淘宝、拼多多等电商平台&#xff0c;平台内部不同团队之间的数据打…

【开源】基于Vue.js的高校学院网站的设计和实现

项目编号&#xff1a; S 020 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S020&#xff0c;文末获取源码。} 项目编号&#xff1a;S020&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学院院系模块2.2 竞赛报名模块2.3 教…

webpack 创建typescript项目

【视频链接】尚硅谷TypeScript教程&#xff08;李立超老师TS新课&#xff09; 创建webpack 项目 IDE&#xff1a;webstorm 新建一个空的项目运行npm init初始化项目目录结构 1. 安装 webpack&#xff1a;构建工具webpack-cli&#xff1a; webpack的命令行工具typescript&am…

福州大学《嵌入式系统综合设计》实验三:多媒体开发基础编程

一、实验目的 本实验基于搭建好的开发环境和硬件环境&#xff0c;通过编写简单的通信实验&#xff0c;验证开发环境&#xff0c;掌握多媒体开发编程基础&#xff0c;包括SOCKET编程、多线程编程和线程同步知识。 二、实验内容 基于套接字、多线程、同步锁机制实现多媒体文件…

c++语言核心及进阶

核心编程 内存分区模型 根据c执行将内存划分为5个区域&#xff1a; 代码区&#xff0c;存放函数体的二进制&#xff0c;即CPU执行的机器指令&#xff0c;并且是只读的&#xff1b;常量区&#xff0c;存放常量&#xff0c;即程序运行期间不能被改变的量。全局区&#xff08;静…

汇编-PUSHFD和POPFD标志寄存器值压栈和出栈

PUSHFD指令将32位EFLAGS寄存器内容压入堆栈&#xff0c; 而POPFD指令则将栈顶单元内容弹出到EFLAGS寄存器 格式&#xff1a;

finalshell上传文件失败的解决方法

问题描述 最近使用虚拟机docker部署项目&#xff0c;使用的finalshell远程连接虚拟机&#xff0c;然后奇怪的发现无法往里面传输文件&#xff0c;各种传输方式&#xff08;手动or直接拉拽&#xff09;都不行&#xff0c;直接报错如下&#xff1a; 原因分析 一开始我以为是新…

kibana 7安装

手动安装 下载 wget https://artifacts.elastic.co/downloads/kibana/kibana-7.17.15-linux-x86_64.tar.gz 解压 mv kibana-7.17.15-linux-x86_64.tar.gz /usr/local tar -zxvf kibana-7.17.15-linux-x86_64.tar.gz chown -R es:es kibana-7.17.15-linux-x86_64修改配置 s…