echarts的地图省份颜色自适应变化
在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应
将后台返回的数据中的value放入一个新的数组中,然后取出数组中的最大值来设置给echarts的visulMap的max属性,并将最小值设置给min属性,当后台没有数据返回的时候会报错,所以要进行一下判断
这里取最大值和最小值使用的是扩展运算符配合Math.max/Math.min来实现的
//data是后台返回的数据
var lengedarr = []for (var i = 0; i < data.length; i++) {
lengedarr.push(data[i].value)
}
map_flow_provice.series[0].data = dataList;
if(lengedarr.length){
map_flow_provice.visualMap.max = Math.max(...lengedarr)
map_flow_provice.visualMap.min = Math.min(...lengedarr)
}else {
map_flow_provice.visualMap.max = 0
map_flow_provice.visualMap.min = 200
}
echarts的地图省份颜色自适应变化的更多相关文章
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
- vue 下实现 echarts 全国到省份的地图下钻
vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo
- ECharts 实现地图散点图上(转载)
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
- 数据视化Echarts+百度地图API实现市县区级下钻
开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
- echarts的地图点击事件
1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...
- echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...
- echarts map 地图在react项目中的使用
需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...
- 图像处理------颜色梯度变化 (Color Gradient)
有过UI设计经验的一定对2D图形渲染中的Color Gradient 或多或少有些接触,很多编程 语言也提供了Gradient的接口,但是想知道它是怎么实现的嘛? 本文介绍三种简单的颜色梯度变化算法, ...
- echarts中国地图
echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...
随机推荐
- Linux提高工作效率的命令
find ./ -name 'laun*'|xargs grep 8881 在laun开头的文件内查找8881 find ./ -name 'laun*' find . -type f -mtime ...
- js规范思维导图(仅限于自己)
- 原生 JS 实现最简单的图片懒加载
懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多 ...
- 通过rpm安装crontab
可以在对应的虚拟机centos上查看 所安装的crontab安装信息,然后选中rpm包进行安装,命令:rpm -qa |grep cron 如: 如没有上述信息,表名没有安装,也可以直接用cronta ...
- 【cf补题记录】Codeforces Round #607 (Div. 2)
比赛传送门 这里推荐一位dalao的博客-- https://www.cnblogs.com/KisekiPurin2019/ A:字符串 B:贪心 A // https://codeforces.c ...
- 将fasta fastq文件线性化处理
将fasta文件线性化处理 awk '/^>/ {printf("%s%s\t",(N>0?"\n":""),$0);N++;n ...
- 网卡监控脚本--nagios
#!/usr/bin/python26#filename:check_traffic.py#the python script function for monitoring network tra ...
- javascript系列--认识并理解构造函数,原型和原型链
一.前言 介绍构造函数,原型,原型链.比如说经常会被问道:symbol是不是构造函数:constructor属性是否只读:prototype.[[Prototype]]和__proto__的区别:什么 ...
- Shell脚本之一 Shell脚本简介
一.什么是shell? 我们平时所说的 Shell 可以理解为 Linux 系统提供给用户的使用界面.Shell 为用户提供了输入命令和参数并可得到命令执行结果的环境.当一个用户登录 Linux 之后 ...
- Linux文件内容查看相关命令
1.more命令 在Linux中,more命令是一个基于vi编辑器的文本过滤器,它能以全屏的方式按页显示文本文件的内容,more里面内置了一些快捷键. (1)命令语法 more(选项)(参数) (2) ...