echarts地图修改图例

本文主要是介绍echarts地图修改图例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

要求：根据数据排名，前三名点亮橙色，其他地区根据数值分配不同颜色，并且要加上单位
效果图如下：

实现方法如下：

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);},

完成。

这篇关于echarts地图修改图例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---