ECharts中visualMap的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]
            }]
        };