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 ...
随机推荐
- Codeforces Round #609 (Div. 2) A到C题
签到,乘以两个相邻的合数 #include<bits/stdc++.h> using namespace std; int main(int argc, char const *argv[ ...
- eclipse IDE for java developers下载与安装
1.进入eclipse官网下载页面 https://www.eclipse.org/downloads/ 2.点击Download Packages 3.windows 用户 选择 64 bits 4 ...
- springboot 整合 freemarker
springboot 整合 freemarker 依赖 <parent> <groupId>org.springframework.boot</groupId> & ...
- redisTemplate 键值序列化策略
redisTemplate 键值序列化策略 RedisSerializer<T> StringRedisSerializer JdkSerializationRedisSerializer ...
- 微信小程序 组件 全局样式
配置如下设置 /** * 组件的一些选项 */ options: { addGlobalClass: true },
- VScode插件:Todo Tree
Todo Tree 用于记录很多需要做但是暂时没办法立即做的事情,如修改样式,日期格式处理等 用法: // TODO: 流程图用canvas重构 然后,你在代码中写的TODO,会被识别出来,点击即可查 ...
- C函数之genv
函数原型: include<stdlib.h> char *getenv(char *envvar); 函数说明: getenv()用来取得参数envvar环境变量的内容.参数envvar ...
- haproxy 配置文件详解 之 配置文件示例
此示例文件在haproxy1.8.20 测试没有问题: global log 127.0.0.1 local0 info maxconn user nobody group nobody daemon ...
- 有趣的js代码
for ( ; ; ) { window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/ )\n(ノΠU\n何回閉じても無駄ですよ-ww\nm9(^Д^) ...
- windows 安装 numpy scipy matplotlib scikit-learn
直接使用 pip install 包名 的方法安装不成功 下载第三方安装包 下载地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#numpy 根据系统 ...