echarts地图修改图例

embedded/2024/10/22 15:35:54/

要求:根据数据排名,前三名点亮橙色,其他地区根据数值分配不同颜色,并且要加上单位
效果图如下:
在这里插入图片描述
实现方法如下:

visualMapFormat(list) {//先将数据按从大到小的顺序排列//当list长度为1时,点亮这1个//当list长度为1-3时,点亮第一个//当list长度为3-8时,判断并列第三名的个数,当第三名超过2个时,只有前2名是橙色,否则点亮前三名//当list长度大于8时,点亮前三名list.sort((a, b) => {return b.value - a.value;});let VMOptions = [];if (list.length === 1) {VMOptions = [{gt: this.numToCeil(list[0].value, false), color: color},];} else if (list.length > 1 && list.length <= 3) {VMOptions = [{gte: this.numToCeil(list[0].value, false), color: color},{lt: this.numToCeil(list[0].value, false), color: "#1360D3"},];} else if (list.length > 3 && list.length <= 8) {let thirdNum = list.filter(item => item.value === list[2].value).length;  //获取第三名的个数//当第三名超过2个时,只有前2名是橙色if(thirdNum>=2){VMOptions = [{min: Math.round(list[2].value), color: color},{min: this.numToCeil(list[2].value / 2, false),max: Math.round(list[2].value),color: "#79CBFF",},{max: this.numToCeil(list[2].value / 2, false), color: "#023280"},];}else{VMOptions = [{min: this.numToCeil(list[1].value, false), color: color},{min: this.numToCeil(list[2].value / 2, false),max: this.numToCeil(list[1].value, false),color: "#79CBFF",},{max: this.numToCeil(list[2].value / 2, false), color: "#023280"},];}} else if (list.length == 0) {return} else {let single = this.numToCeil(list[4].value / 5, false);VMOptions = [{min: this.numToCeil(list[2].value, false), color: color},{min: single * 5,max: this.numToCeil(list[2].value, false),color: "#79CBFF",},{min: single * 4, max: single * 5, color: "#79CBFF"},{min: single * 3, max: single * 4, color: "#3996FF"},{min: single * 2, max: single * 3, color: "#1360D3"},{min: single, max: single * 2, color: "#0A49A8"},{max: single, color: "#023280"},];}this.chinaOption.visualMap.pieces = VMOptions;//处理显示格式this.chinaOption.visualMap.formatter = (start, end) => {if (start === -Infinity) {let array = this.setUnit(end)return '< ' + array[0] + array[1]} else if (end === Infinity) {let array = this.setUnit(start)return '>' + array[0] + array[1]} else {let array1 = this.setUnit(start)let array2 = this.setUnit(end)return array1[0] + '-' + array2[0] + array2[1]}}},
//根据数值设置相应的单位setUnit(num) {let unit = ''if (num * 3 > 100000000) {num = Math.round(num / 100000000)unit = '亿人'} else if (num * 3 > 10000) {num = (num / 10000).toFixed(2)unit = '万人'} else {unit = '人'}return [num, unit]},
// 数据取整numToCeil(num, type) {let outPut = 0;if (0 < num && num <= 10) {outPut = num;} else if (10 < num && num < 100) {outPut = type ? Math.ceil(num / 5) * 5 : Math.floor(num / 5) * 5;} else if (num >= 100 && num < 10000) {outPut = type ? Math.ceil(num / 10) * 10 : Math.floor(num / 10) * 10;} else if (num >= 10000) {outPut = type? Math.ceil(num / 100) * 100: Math.floor(num / 100) * 100;}return Math.round(outPut);},

完成。


http://www.ppmy.cn/embedded/51210.html

相关文章

html做一个雷达图的软件

要实现一个在线输入数据并生成雷达图的功能&#xff0c;可以使用HTML表单和JavaScript来处理用户输入的数据。以下是一个示例代码&#xff0c;演示了如何实现这个功能&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"…

android 对不同日期和时间的格式方法的封装

break; default: result “星期一”; break; } return result; } /** 判断两个时间是否属于同一天 param time1 param time2 return */ public boolean isSameDay(long time1, long time2) { Calendar calen Calendar.getInstance(); calen.setTimeInMillis(t…

力扣42.接雨水

力扣42.接雨水 前后缀数组 对于每个一个位置 求其前面最高高度pre_max[i] max(pre_max[i-1] , h[i])和后面最高高度suf_max[i] max(suf_max[i1] , h[i])当前i处的水容量 为min(pre_max[i] , suf_max[i]) - h[i] class Solution {public:int trap(vector<int>& …

virtualbox中共享盘的使用

Windows通过共享盘向虚拟机&#xff08;ubuntu&#xff09;传输文件 第一步&#xff1a; 第二步&#xff1a; 三。完成

连接Huggingface报requests.exceptions.SSLError错误

最近在学习使用 SHAP 算法解释 BERT 模型的输出结果&#xff0c;然而在从 Huggingface 上导入模型和数据集的过程中出现了网络连接相关的错误&#xff0c;本文用于记录错误类型和解决错误的方法。 1 代码示例 SHAP 官方展示的代码如下&#xff1a; import datasets import nu…

Python基础教程(三十一):pyecharts模块

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝💝💝如有需要请大家订阅我的专栏【Python系列】哟!我会定期更新相关系列的文章 💝💝💝关注!关注!!请…

c# 协议数据计算陀螺仪的角度,带符号

subStrL str.Substring((76 - 8), 2); subStrH str.Substring((78 - 8), 2); Data[7] (short)(Convert.ToInt16(subStrH, 16) * 256 Convert.ToInt16(subStrL, 16));//角度X subStrL str.Substring((80 - 8), 2); subStrH str.Subst…

windows设置开机启动项

将文件放到下面路径即可实现每次开机启动 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup