什么是 visualMap

visualMap 是一种视觉映射的组件

放一张官方设置了 visualMap 的效果图

是不是对 视觉映射组件 是干嘛用的有了一个基本的理解

对每段进行颜色的分割，一目了然

来看一个简单的折线图，根据这个折线图来进行我们的 visualMap 的简单设置

visualMap 两个组件

Piecewise 分段类型
Continuous 连续类型

Piecewise 分段类

以下具体举例用的比较多的几个设置

splitNumber

对于连续型数据，自动平均切分成几段。默认为5段。

            visualMap : {top : 50,right : 15,type : 'piecewise',splitNumber : 8,},

pieces

这项设置用的还蛮多的

自定义每一段的范围，以及每一段的文字，以及每一段的特别的样式

如果设置了 visualMap - pieceswise - pieces，则 splitNumber 无效。

            visualMap : {type : 'piecewise',top : 50,right : 15,pieces : [{ min : 150 , color : 'brown' },{ min : 120 , max : 150 , color : 'purple' },{ min : 90 , max : 120 , color : 'red' },{ min : 60 , max : 90 , color : 'orange' },{ min : 25 , max : 60 , color : 'yellow' },{ max : 25 , color : 'green' }]},

或者，要想更精确点，

可以使用

lt（小于，less than），

gt（大于，greater than），

lte（小于等于 less than or equals），

gte（大于等于，greater than or equals）来表达边界

text

设置两端的文本

dimension

指定用数据的『哪个维度』，映射到视觉元素上

总结

有时候设置了 visualMap 可以结合 markLine 使用，会使得图更清晰

var option = {title : {text : '某地降水量'},xAxis : {data : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},legend : {left : 'right'},tooltip : {trigger : 'axis'},visualMap : {type : 'piecewise',top : 50,right : 15,text : ['降水量高','降水量低'],pieces : [{ gte : 150 , color : 'brown' },{ gt : 120 , lte : 150 , color : 'purple' },{ gt : 90 , lte : 120 , color : 'red' },{ gt : 60 , lte : 90 , color : 'orange' },{ gt : 30 , lte : 60 , color : 'yellow' },{ gt : 0 , lte : 30 , color : 'green' }]},yAxis : {},series : [{name : 'Rainfall',type : 'line',smooth : true,markLine : {silent: true,lineStyle: {color: '#333'},data: [{yAxis: 30},{yAxis: 60},{yAxis: 90},{yAxis: 120},{yAxis: 150}]},lineStyle : {width : 5},data : [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]}]};

ECharts中visualMap的piecewise使用详解相关推荐

Linux中/proc目录下文件详解
Linux中/proc目录下文件详解(一) 声明:可以自由转载本文,但请务必保留本文的完整性. 作者:张子坚 email:zhangzijian@163.com 说明:本文所涉及示例均在fedora ...
python创建列向量_关于Numpy中的行向量和列向量详解
关于Numpy中的行向量和列向量详解行向量方式1 import numpy as np b=np.array([1,2,3]).reshape((1,-1)) print(b,b.shape) 结 ...
jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解前几天我再开发一个叫河蟹工 ...
java mod %区别_Java中 % 与Math.floorMod() 区别详解
%为取余(rem),Math.floorMod()为取模(mod) 取余取模有什么区别呢? 对于整型数a,b来说,取模运算或者取余运算的方法都是: 1.求整数商: c = a/b; 2.计算模或者余 ...
python的执行过程_在交互式环境中执行Python程序过程详解
前言相信接触过Python的伙伴们都知道运行Python脚本程序的方式有多种,目前主要的方式有:交互式环境运行.命令行窗口运行.开发工具上运行等,其中在不同的操作平台上还互不相同.今天,小编讲些Py ...
python平方数迭代器_对python中的高效迭代器函数详解
python中内置的库中有个itertools,可以满足我们在编程中绝大多数需要迭代的场合,当然也可以自己造轮子,但是有现成的好用的轮子不妨也学习一下,看哪个用的顺手~ 首先还是要先import一下: ...
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解_起飞的木木的博客-CSDN博客_labelencoder原理
Oracle中序列（Sequence）详解
Oracle中序列(Sequence)详解一序列定义序列(SEQUENCE)是序列号生成器,可以为表中的行自动生成序列号,产生一组等间隔的数值(类型为数字).不占用磁盘空间,占用内存. 其主要用 ...
java 静态编译_Java中的动态和静态编译实例详解
Java中的动态和静态编译实例详解首先,我们来说说动态和静态编译的问题. Q: java和javascript有什么区别? 总结了一下:有以下几点吧: 1.首先从运行环境来说java代码是在JVM上 ...

ECharts中visualMap的piecewise使用详解