echarts地图自定义label属性以及引入china.js

效果图:

要点1:calc函数

重点:在于mapChart的height可以写成函数以便适配不同尺寸;

        <div class="content-map"><div class="wai-top-box" style="width: 100%; height: 100%"><div id="mapChart" style=" width: 100%; height: calc(100vh - 100px)"> </div></div></div>重点1:在于mapChart的height可以写成函数适配不同尺寸
要点2:要点较多
map: {title: {text: '',x: 'center',textStyle: {color: '#333333'}},tooltip: {trigger: 'item',showDelay: 0,transitionDuration: 0.2,formatter: function (params) {const value = (params.value + '').split('.');const valueStr = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');return params.name + ': ' + (params.value ? valueStr : 0);}},// 数据和类型series: [{type: 'map',map: 'china',label: {normal: {  PS: 自定义label 一定要写在norml里面show: true,position: 'inside',formatter: function (params) {  params就是数据请求里面的对象{name:xxx,value:xxx}const value = (params.value + '').split('.');const valueStr = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');return params.name + '\n' + '{a|' + (params.value ? valueStr : 0) + '}';   PS:\n用于换行},rich: {      PS:rich可以对自定的label的样子进行单独修改 ,该场景是下面的数字的fontSize比上面的小 a: {color: "rgba(104, 104, 104, 0.8)",fontSize: 12,lineHeight: 16}},color: 'rgba(104, 104, 104, 0.8)',fontSize: 17},},// 地图区域的多边形 图形样式。itemStyle: {normal: {borderColor: '#E3E3E3', 省会旁边的描边颜色 即border的属性borderWidth: 1},},// 地图大小倍数zoom: 1.2, 感觉data: []}],visualMap: {type: "piecewise",  这里是采用根据区间来设置颜色min: 0,text: ['High', 'Low'],realtime: true,calculable: true,textStyle: {color: '#fff'},
//               inRange: { 这种情况是不限制区间根据地图自动渲染//        color: ['#FFFAED', '#840007', 'blue']//      },pieces: [{ gt: 3000, color: "#280000" },{ gt: 1000, lte: 3000, color: "#450000" },{ gt: 500, lte: 1000, color: "#630000" },{ gt: 300, lte: 500, color: "#840007" },{ gt: 250, lte: 300, color: "#9B000C" },{ gt: 200, lte: 250, color: "#B20011" },{ gt: 150, lte: 200, color: "#CA0017" },{ gt: 100, lte: 150, color: "#DA0C23" },{ gt: 90, lte: 100, color: "#E22537" },{ gt: 80, lte: 90, color: "#EA3E4B" },{ gt: 70, lte: 80, color: "#F25760" },{ gt: 60, lte: 70, color: "#FB7174" },{ gt: 50, lte: 60, color: "#FF9469" },{ gt: 40, lte: 50, color: "#FFB24C" },{ gt: 30, lte: 40, color: "#FFCB45" },{ gt: 20, lte: 30, color: "#FFD15D" },{ gt: 10, lte: 20, color: "#FFD874" },{ gt: 1, lte: 10, color: "#FFE5A3" },{ value: 0, lte: 1, color: "#FFFAED" }],right: -100}}
要点3:数据请求
 getMap() {// 中国地图this.map.series[0].data = [];distributed().then((res) => {this.nowData = res.data;res.data.loanProvinceCountList.forEach((item) => {if (item.province) {this.map.series[0].data.push({name:item.province value: item.loanCount});}console.log(this.map.series[0].data);});this.map.series[0].data.push({name: '南海诸岛',itemStyle: {normal: {opacity: 1,label: {show: false}}}});let mapChartDom = document.getElementById('mapChart');let mapChart = this.$echarts.init(mapChartDom);mapChart.setOption(this.map);window.addEventListener('resize', function () {mapChart.resize();   根据尺寸自适应});});},
要点4:引用china 

因为报错说map.china不存在

在main.js里面引入china.json
import * as echarts from 'echarts';
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
要点5:将展示的label居中

因为地图默认文字展示的是省会城市

将node_module里面的echarts里面的map的china.json文件复制一份在util下面
将要点4的import china from 'echarts/mapxxxx'改为引入util下面的china.json
import china from '@/utils/china.json'

各个省份居中都对应的经纬度, 修改chin.json里面的cp值;

 

1.新疆: [86.61 , 40.79]
2.西藏:[89.13 , 30.66]
3.黑龙江:[128.34 , 47.05]
4.吉林:[126.32 , 43.38]
5.辽宁:[123.42 , 41.29]
6.内蒙古:[112.17 , 42.81]
7.北京:[116.40 , 40.40 ]
8.宁夏:[106.27 , 36.76]
9.山西:[111.95,37.65]
10.河北:[115.21 , 38.44]
11.天津:[117.04 , 39.52]
12.青海:[97.07 , 35.62]
13.甘肃:[103.82 , 36.05]
14.山东:[118.01 , 36.37]
15.陕西:[108.94 , 34.46]
16.河南:[113.46 , 34.25]
17.安徽:[117.28 , 31.86]
18.江苏:[120.26 , 32.54]
19.上海:[121.46 , 31.28]
20.四川:[103.36 , 30.65]
21.湖北:[112.29 , 30.98]
22.浙江:[120.15 , 29.28]
23.重庆:[107.51 , 29.63]
24.湖南:[112.08 , 27.79]
25.江西:[115.89 , 27.97]
26.贵州:[106.91 , 26.67]
27.福建:[118.31 , 26.07]
28.云南:[101.71 , 24.84]
29.台湾:[121.01 , 23.54]
30.广西:[108.67 , 23.68]
31.广东:[113.98 , 22.82]
32.海南:[110.03 , 19.33]
33.澳门:[113.54 , 22.19]
34.香港:[114.17 , 22.32]
 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法优选】 动态规划之简单多状态dp问题——贰

文章目录 &#x1f38b;前言&#x1f334;[买卖股票的最佳时机含冷冻期](https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-with-cooldown/description/)&#x1f6a9;题目描述&#x1f6a9;算法思路&#xff1a;&#x1f388;状态表示&#xff1a;&#x1f388;…

Host Aware SMR

SMR 简介 首先给一点前置SMR知识。 SMR优势&#xff1a;Capacity的提升。 看图&#xff1a;由于重叠Track使得存储密度得到了提升。但是由于Track的重叠&#xff0c;使得SMR只能顺序写。 在SMR中&#xff0c;多个Track组成一个Band&#xff0c;各个Band之间可以随机写 这个 …

设计模式-依赖倒置原则

基本介绍 依赖倒转原则(Dependence Inversion Principle)是指: 高层模块不应该依赖低层模块&#xff0c;二者都应该依赖其抽象抽象不应该依赖细节&#xff0c;细节应该依赖抽象依赖倒转(倒置)的中心思想是面向接口编程依赖倒转原则是基于这样的设计理念:相对于细节的多变性&a…

94岁诺奖得主希格斯去世,曾预言「上帝粒子」的存在

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 一位用诗意的语言揭示宇宙秘密的人。 一位 94 岁伟大科学家的逝世&#xff0c;引发了人们广泛…

RUST语言值所有权之内存复制与移动

1.RUST中每个值都有一个所有者,每次只能有一个所有者 String::from函数会为字符串hello分配一块内存 内存示例如下: 在内存分配前调用s1正常输出 在分配s1给s2后调用报错 因为s1分配给s2后,s1的指向自动失效 s1被move到s2 s1自动释放 字符串克隆使用 所有整数类型,布尔类型 …

深入了解go的通道类型

目录 目录 一:类型介绍 二:通道操作 三:通道的特性 四:通道的注意事项

控制文件损坏处理

二、有rman备份的恢复 2.1 只损坏一个控制文件的情况 本文档的恢复场景都是针对的多控制文件的情况&#xff0c;如果你只有一个那当我没说&#x1f604;。 查看控制文件 SQL> show parameter control_files;NAME TYPE VALUE ---------------------…

nandgame中的Code generation(代码生成)

题目说明&#xff1a; 代码生成为语言的语法规则定义代码生成&#xff0c;以支持加法和减法。 您可以使用在前面级别中定义的堆栈操作&#xff08;如ADD和SUB&#xff09;。代码生成模板通常需要包含规则中其他符号的代码。 这些可以通过方括号中的符号名称插入。例如&#xf…

Linux生态系统:探索Linux的开源世界

Linux生态系统:探索Linux的开源世界 在前面的博客中,我们深入探讨了Linux的各种技能和技巧,从入门到进阶,再到高手级别。这一路走来,相信大家对Linux已经有了全面的认识和掌握。然而,Linux的魅力远不止于此。今天,我们将进一步探索Linux生态系统,了解Linux在开源世界中的重要地…

day03-java类型转换和运算符

3.1 表达式和语句 表达式一共分为三种&#xff1a; &#xff08;1&#xff09;变量或常量 运算符构成的计算表达式 &#xff08;2&#xff09;new 表达式&#xff0c;结果是一个数组或类的对象。&#xff08;后面讲&#xff09; &#xff08;3&#xff09;方法调用表达式&…

接口自动化进阶: Pytest之Fixture拓展及conftest.py加载机制!

Pytest是一个功能强大的Python测试框架&#xff0c;它提供了很多有用的功能和扩展机制。其中之一是Fixture&#xff0c;Fixture是pytest中的一个装饰器&#xff0c;可以用来提供测试所需的数据和对象。 本篇文章将从头开始&#xff0c;详细介绍如何使用Fixture进行接口自动化测…

关于moviepy出现must be real number, not NoneType

#降级装饰器版本 decorator4.4.2 不行就再降4.0.2 有的也可以通过省级mv解决更多解答https://stackoverflow.com/questions/68032884/getting-typeerror-must-be-real-number-not-nonetype-whenever-trying-to-run-wr

Linux安装Oracle11g(无图形界面下的静默安装)

Oracle11g安装文档-Linux静默安装 环境准备安装数据库配置监听器创建数据库测试打开防火墙 环境准备 创建组和用户 [rootlocalhost ~]# groupadd oinstall #创建oinstall组 [rootlocalhost ~]# groupadd dba  #创建dba组 [rootlocalhost ~]# useradd -g oinstall -G dba -m…

鸿蒙HarmonyOS开发实例:【分布式关系型数据库】

介绍 本示例使用[ohos.data.relationalStore]接口和[ohos.distributedDeviceManager] 接口展示了在eTS中分布式关系型数据库的使用&#xff0c;在增、删、改、查的基本操作外&#xff0c;还包括分布式数据库的数据同步同能。 效果预览 使用说明: 启动应用后点击“ ”按钮可…

《QT实用小工具·十七》密钥生成工具

1、概述 源码放在文章末尾 该项目主要用于生成密钥&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #pragma execution_character_set("utf-8")#include "frmmain.h" #include "ui_frmmain.h" #include "qmessag…

ArrayList中多线程的不安全问题

ArrayList中的不安全问题 正常的输出 List<String> list Arrays.asList("1","2","3"); list.forEach(System.out::println);为什么可以这样输出&#xff0c;是一种函数是接口&#xff0c;我们先过个耳熟 Arrys.asList是返回一个ArrayL…

【leetcode面试经典150题】40. 同构字符串(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

进程间通信 (匿名管道)

一、进程间通信的概念 进程间通信是一个进程把自己的数据交给另一个进程&#xff0c;它可以帮助我们进行数据传输、资源共享、通知事件和进程控制。 进程间通信的本质是让不同的进程看到同一份资源。因此&#xff0c;我们要有&#xff1a; 1、交换数据的空间。2、这个空间不能由…

端口号占用解决方法

进入cmd输入&#xff1a; 第一步输入&#xff1a;netstat -ano|findstr 8080 第二步输入&#xff1a;taskkill -pid **** -f (示例)&#xff1a; C:\Users\Administrator>netstat -ano|findstr 8080 TCP 0.0.0.0:8080 0.0.0.0:0 LISTENING …

AcWing 790. 数的三次方根——算法基础课题解

AcWing 790. 数的三次方根 题目描述 给定一个浮点数 n&#xff0c;求它的三次方根。 输入格式 共一行&#xff0c;包含一个浮点数 n。 输出格式 共一行&#xff0c;包含一个浮点数&#xff0c;表示问题的解。 注意&#xff0c;结果保留 6 位小数。 数据范围 −10000≤…