ECharts中visualMap的piecewise使用详解
什么是 visualMapvisualMap 是一种视觉映射的组件放一张官方设置了 visualMap 的效果图是不是对 视觉映射组件是干嘛用的 有了一个基本的理解对每段进行颜色的分割,一目了然来看一个简单的折线图,根据这个折线图来进行我们的 visualMap 的简单设置visualMap 两个组件Piecewise 分段类型Continuous 连续类型Piecewise 分段类以下具体举例用
什么是 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
设置两端的文本
categories
离散数据根据类别分段
用于表示离散型数据(或可以称为类别型数据、枚举型数据)的全集
官网上的示例:
可能有点乱,不容易理解
举个例子
房租金额 和 房间面积大小 做了一个简单的 柱状图
(以上图表数据均为瞎编,理解意思就行)
打个比方方便理解,照常理来说房子面积越大收的房租越昂贵,但是有些房子面积很小但可能因为地理位置、屋内设施等原因房租也很昂贵,这就是较常理的不同,排除原因,这就是离散数据
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]
}]
};
更多推荐
所有评论(0)