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 ...
随机推荐
- 【大数据】0002---MongoDB集群自动分离创建新集群
场景:MongoDB集群运行后,自动产生新的集群 解答:可能没有理解问题,理清思路如下 1.日志分析 2.配置文件检查(日期.版本) 3.网络IP变化 4.github 5.stack overflo ...
- Scrapy笔记(1)- 入门篇
Scrapy笔记01- 入门篇 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架.可以应用在包括数据挖掘, 信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取(更确切来说, ...
- [Algorithm] 118. Pascal's Triangle
Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. In Pascal's t ...
- 部署zabbix服务端和客户端和网页
一:安装zabbix服务端 1.部署准备 命令:iptables -F #关闭防火墙命令:systemctl stop firewalld #关闭防火墙 设置解析,自建yum源 命令:c ...
- 编码格式检测chardet模块
chardet模块: -->检测编码格式 未知编码的bytes,要把它转换成str,就需要知道该bytes的编码方式 #1.直接检测bytes >>> chardet.dete ...
- 箭头函数可不用return直接将表达式作为函数返回值
箭头函数如果函数体只有一个表达式,那么表达式将作为函数的返回值,这种写法无须加上return关键字, 看下面两个函数定义 var testAf = () => '111'; var testAf ...
- 超强在线考试系统源码(私有部署&二次开发)
随着信息化技术的发展,考试系统也在进行着深入的变革.从传统的纸质考试人工评分到现在的在线考试自动评分. 在线考试系统的应用场景也在逐渐扩宽,例如:学校的学生考试.员工培训考试.招聘考试.职称考试等等. ...
- c++隐式转换(implicit conversion)
1.缘由 最近在使用nlohmann的json,发现有些地方不是特别好用,所以就想自己修改一下(目的是为了增加类似jsoncpp中可以//增加注释的功能),在看源码的时候看到了一个迷惑的地方,就是解析 ...
- 【操作系统之八】Linux常用命令之top
一.概念Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,且可以通过交互式命令自定义显示内容,类似于Windows的任务管理器. 二.命令格式 [root@PCS101 log ...
- Hbase(一)了解Hbase与Phoenix
前言 HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Googl ...