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
}

原文地址:https://www.cnblogs.com/wyongz/p/11233610.html

时间: 2024-08-04 04:10:07

echarts的地图省份颜色自适应变化的相关文章

echarts省外地图根据颜色区分数据量

newPro(){ var data = [ { name: '黑龙江', value: 120057.34 }, { name: '吉林', value: 120057.34 }, { name: '辽宁', value: 120057.34 }, { name: '内蒙古', value: 120057.34 }, { name: '北京', value: 120057.34 }, { name: '天津', value: 120057.34 }, { name: '山西', value:

echarts图随浏览器的大小自适应变化大小

echarts图初始化后不能自适应浏览器的缩放,线条等会伸出div框或不能填充,需要让echarts的图resize一下,在调用浏览器窗口大小变化时调用resize方法即可 "ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道,使用方可以根据自己的需求绑定关心的事件,主动调用resize达到自适应的效果,常见如window.onresize = myChart.resize" 使用方法: window.onresize = function(){         

echarts合并地图,把中国各个省份分成&#39;华北&#39;,&#39;东北&#39;,&#39;华东&#39;,&#39;华中&#39;,&#39;华南&#39;,&#39;西南&#39;,&#39;西北&#39;七个大区

最近公司有个需求是按照大区,即把中国分成华北','东北','华东','华中','华南','西南','西北'七个大区, 但是echarts地图只有省市,还没有大区,只能自己网上找资料再按需求写了 echarts地图合并关键点是把coordinates和encodeOffsets合并,而且这两个必须都合并,且最多只能合并到二维数组,合并到三维数组就不行了. 实例结果截图 代码: <!DOCTYPE html> <html lang="zh"> <head>

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

echarts 3D地图

<script src="js/map/shandong.js"></script> var maps = echarts.init(document.getElementById('map')); var option = { tooltip: { formatter: function(params) { var content = '', content = params.name + '<br>' + params.value[0] + pa

仿微信主界面导航栏图标字体颜色的变化

在所有的移动产品中,微信的界面做的很简洁,简单,我对微信主界面影响最深的就是微信底部导航栏的图标,以及字体颜色的变化,一直都想实现以下,今天有空,就大体的模仿者做了一遍. 效果图如下: 分析: 底部主要分为图标的渐变,字体颜色的渐变. 图标的颜色的渐变:主要是通过canvas绘制两个不同的图片,控制其图片的alpha透明度,来达到图标的渐变. 字体颜色:字体颜色就很好说了,Animator动画框架应该很熟悉了,在Animator框架中,有一个TypeEven是来计算十六进制色值的,我们可以通过A

echarts Map(地图) 不同颜色区块显示

echarts Map(地图) 不同区块显示 这里以重庆地图为例 配置项: var option = { title : { text: '重庆市', subtext: '', x:'left' }, tooltip : { trigger: 'item', formatter: '{b}', itemSize:'14px' }, legend: { orient: 'vertical', x:'center', data:['重庆市区县'] }, dataRange: { x: 'left',

JS实现网页背景颜色与select框中的颜色同时变化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

几个不错的echarts +百度地图 案例

https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/editor.html?c=effectScatter-bmap 空气质量等,可以通过值来控制点的大小和光环. https://echarts.baidu.com/examples/editor.html?c=heatmap-bmap 人流密度图.热力图等 我的echarts+百度地图 左上角可以切换地图和