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 ...
随机推荐
- matlab-线性回归
1.调用函数regress(Y,X,alpha),plpha是置信度,如果直接用regress(Y,X)则默认置信度为0.05,Y是一个 的列向量,X是一个 的矩阵,其中第一列是全1向量. 2.函数返 ...
- Nacos
欢迎来到 Nacos 的世界! Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理. Nacos 帮助您 ...
- ZROI 暑期高端峰会 A班 Day4 树上数据结构
FBI Warning:本文含有大量人类的本质之一. 你经历过绝望吗? [ZJOI2007]捉迷藏 询问树上最远黑点对. 动态边分治可以比点分治少一个 \(\log\). bzoj3730 咕了. [ ...
- K8s容器资源限制
在K8s中定义Pod中运行容器有两个维度的限制: 1. 资源需求:即运行Pod的节点必须满足运行Pod的最基本需求才能运行Pod. 如: Pod运行至少需要2G内存,1核CPU 2. 资源限额: ...
- 通过rpm安装crontab
可以在对应的虚拟机centos上查看 所安装的crontab安装信息,然后选中rpm包进行安装,命令:rpm -qa |grep cron 如: 如没有上述信息,表名没有安装,也可以直接用cronta ...
- #lua中编写shader的方式
lua中编写shader的方式 1. 字符串拼接 类似于下面这种 vertDefaultSource = "\n".."\n" .. "attribu ...
- git常用指令汇总
命令行指令 Git 全局设置 git config --global user.name "cqu2003" git config --global user.email &quo ...
- Redis 动态字符串 SDS 源码解析
本文作者: Pushy 本文链接: http://pushy.site/2019/12/21/redis-sds/ 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可 ...
- 【IntelliJ IDEA学习之五】IntelliJ IDEA 搭建项目
版本:IntelliJIDEA2018.1.4 一.同一窗口展示多个应用(弊端:耗内存) idea没有eclipse workspace的概念,如果想在同一窗口显示多个应用,可以按照如下方式来做:1. ...
- github下载速度慢甚至多次失败,通过码云的导入功能导入github项目到码云上,然后再从码云下载
github下载速度慢甚至多次失败,通过码云的导入功能导入github项目到码云上,然后再从码云下载 参考 https://blog.csdn.net/kcx64/article/details/83 ...