在使用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的地图省份颜色自适应变化的更多相关文章

  1. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  2. vue 下实现 echarts 全国到省份的地图下钻

    vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo

  3. ECharts 实现地图散点图上(转载)

    转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上)  小红  2016-04-28  ECharts, 教 ...

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

    开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...

  5. echarts的地图点击事件

    1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...

  6. echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...

  7. echarts map 地图在react项目中的使用

    需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...

  8. 图像处理------颜色梯度变化 (Color Gradient)

    有过UI设计经验的一定对2D图形渲染中的Color Gradient 或多或少有些接触,很多编程 语言也提供了Gradient的接口,但是想知道它是怎么实现的嘛? 本文介绍三种简单的颜色梯度变化算法, ...

  9. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

随机推荐

  1. python3用turtle库进行绘制小猪佩奇图案

    晚上闲着无事,深入学习这个turtle用法,就做了小猪佩奇图 附上代码: # coding: utf-8 #功能:绘画小猪佩奇 import turtle as t t.screensize(400, ...

  2. windows 运行库与dll文件

    Windows 10包含版本 win10家庭版win10专业版win10教育版win 10企业版 Windows 7包含6个版本分别为Windows 7 Starter(初级版)Windows 7 H ...

  3. hdu 6217 A BBP Formula 公式题

    题意 已知公式:$\pi=\sum_{k=0}^{\infty}\left[\frac{1}{16^{k}}\left(\frac{4}{8 k+1}-\frac{2}{8 k+4}-\frac{1} ...

  4. selenium数据读取模块

    例如 数据保存在txt中 def info(path): web_info={} config = open(path) for line in config: result = [ele.strip ...

  5. 【java】字符串截取

    String a = 'abcdef';String a = a.substring(0,1); a = 'a'; substring(int beginIndex, int endIndex) be ...

  6. c# Aes加解密

    using System; using System.Collections.Generic; using System.IO; using System.Security.Cryptography; ...

  7. B 题解————2019.10.16

    相信他说的话,但不要当真 [题目描述]有一个长度为 n 的自然数序列 a,要求将这个序列恰好分成至少 m 个连续子段. 每个子段的价值为该子段的所有数的按位异或.要使所有子段的价值按位与的结果最大,输 ...

  8. ORA-01589错误的解决办法

    出现下图错误 使用下面解决办法,首先输入下面第一个箭头的语句,然后会弹出一个等待光标,接下来就是找到最新的那个REMOD0X.LOG文件地址,也就是第二个箭头所示. 再输入下面图片第一个箭头的语句.

  9. 近年NOI题目总结

    NOI2015D1T1 题目大意:$T$ 组数据.在一个程序中有无数个变量 $x_i$.现在有 $n$ 条限制,形如 $x_i=x_j$ 或者 $x_i\ne x_j$.(对于每个限制 $i,j$ 给 ...

  10. 在非gnome系桌面环境下运行deepin-wine tim的错误解决

    本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/deepin_wine_run_in_not_gnome_desk ...