Echarts数据可视化visualMap，开发全解+完美注释
Echarts数据可视化visualMap全解：
visualMap=[                                    //视觉映射组件，⽤于进⾏『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的⼤⼩。color: 图元的颜⾊。
// colorAlpha: 图元的颜⾊的透明度。opacity: 图元以及其附属物（如⽂字标签）的透明度。colorLightness: 颜⾊的明暗度。colorSaturation: 颜⾊的饱和度。colorHue: 颜⾊的⾊调。
{
show:true,                              //是否显⽰ visualMap-continuous 组件。如果设置为 false，不会显⽰，但是数据映射的功能还存在
type: 'continuous',                    // 定义为连续型 viusalMap
min:10,                                  //指定 visualMapContinuous 组件的允许的最⼩值
max:100,                                //指定 visualMapContinuous 组件的允许的最⼤值
range:[15, 40],                          //指定⼿柄对应数值的位置。range 应在 min max 范围内
calculable:true,                        //是否显⽰拖拽⽤的⼿柄（⼿柄能拖拽调整选中范围）
realtime:true,                          //拖拽时，是否实时更新
inverse:false,                          //是否反转 visualMap 组件
precision:0,                            //数据展⽰的⼩数精度，默认为0，⽆⼩数点
itemWidth:20,                          //图形的宽度，即长条的宽度。
itemHeight:140,                        //图形的⾼度，即长条的⾼度。
align:"auto",                          //指定组件中⼿柄和⽂字的摆放位置.可选值为：'auto' ⾃动决定。'left' ⼿柄和label在右。'right' ⼿柄和label在左。'top' ⼿柄和label在下。'bottom' ⼿柄和label在上。
text:['High', 'Low'],                  //两端的⽂本
textGap:10,                              //两端⽂字主体之间的距离，单位为px
dimension:2,                            //指定⽤数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成⼀个⼆维数组，其中每个列是⼀个维度，默认取 data 中最后⼀个维度
seriesIndex:1,                          //指定取哪个系列的数据，即哪个系列的 series.data，默认取所有系列
textstylehoverLink:true,                        //⿏标悬浮到 visualMap 组件上时，⿏标位置对应的数值 在 图表中对应的图形元素，会⾼亮
inRange:{                              //定义 在选中范围中 的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{  //定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0,                                  //所属图形的Canvas分层，zlevel ⼤的 Canvas 会放在 zlevel ⼩的 Canvas 的上⾯
z:2,                                        //所属组件的z分层，z值⼩的图形会被z值⼤的图形覆盖
left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top",                                  //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto",                              //组件离容器右侧的距离,'20%'
bottom:"auto",                              //组件离容器下侧的距离,'20%'
orient:"vertical",                        //图例排列⽅向
padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
backgroundColor:"transparent",            //标题背景⾊
borderColor:"#ccc",                        //边框颜⾊
borderWidth:0,                              //边框线宽
textStyle:mytextStyle,                      //⽂本样式
formatter: function (value) {                //标签的格式化⼯具。
return 'aaaa' + value;                    // 范围标签显⽰内容。
}
},
{
{
show:true,                          //是否显⽰ visualMap-continuous 组件。如果设置为 false，不会显⽰，但是数据映射的功能还存在        type: 'piecewise',                  // 定义为分段型 visualMap
splitNumber:5,                      //对于连续型数据，⾃动平均切分成⼏段。默认为5段
pieces: [                          //⾃定义『分段式视觉映射组件（visualMapPiecewise）』的每⼀段的范围，以及每⼀段的⽂字，以及每⼀段的特别的样式
{min: 1500},                    // 不指定 max，表⽰ max 为⽆限⼤（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（⾃定义label）'},
{value: 123, label: '123（⾃定义特殊颜⾊）', color: 'grey'}, // 表⽰ value 等于 123 的情况。
{max: 5}                        // 不指定 min，表⽰ min 为⽆限⼤（-Infinity）。
],
categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],  //⽤于表⽰离散型数据（或可以称为类别型数据、枚举型数据）的全集
min:10,                            //指定 visualMapContinuous 组件的允许的最⼩值
max:100,                            //指定 visualMapContinuous 组件的允许的最⼤值
minOpen:true,                      //界⾯上会额外多出⼀个『< min』的选块
maxOpen:true,                      //界⾯上会额外多出⼀个『> max』的选块。
selectedMode:"multiple",          //选择模式，可以是：'multiple'（多选）。'single'（单选）。
inverse:false,                      //是否反转 visualMap 组件
precision:0,                        //数据展⽰的⼩数精度，默认为0，⽆⼩数点
itemWidth:20,                      //图形的宽度，即长条的宽度。
itemHeight:140,                    //图形的⾼度，即长条的⾼度。
align:"auto",                      //指定组件中⼿柄和⽂字的摆放位置.可选值为：'auto' ⾃动决定。'left' ⼿柄和label在右。'right' ⼿柄和label在左。'top' ⼿柄和label在下。'bottom' ⼿柄和label在上。
text:['High', 'Low'],              //两端的⽂本
textGap:10,                          //两端⽂字主体之间的距离，单位为px
showLabel:true,                    //是否显⽰每项的⽂本标签
itemGap:10,                          //每两个图元之间的间隔距离，单位为px
itemSymbol:"roundRect",            //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
dimension:2,                          //指定⽤数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成⼀个⼆维数组，其中每个列是⼀个维度，默认取 data 中最后⼀个维度
seriesIndex:1,                        //指定取哪个系列的数据，即哪个系列的 series.data，默认取所有系列
hoverLink:true,                      //⿏标悬浮到 visualMap 组件上时，⿏标位置对应的数值 在 图表中对应的图形元素，会⾼亮
inRange:{                            //定义 在选中范围中 的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{                            //定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0,                                  //所属图形的Canvas分层，zlevel ⼤的 Canvas 会放在 zlevel ⼩的 Canvas 的上⾯
z:2,                                        //所属组件的z分层，z值⼩的图形会被z值⼤的图形覆盖
left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top",                                  //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto",                              //组件离容器右侧的距离,'20%'
bottom:"auto",                              //组件离容器下侧的距离,'20%'
orient:"vertical",                        //图例排列⽅向
padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
backgroundColor:"transparent",            //标题背景⾊
borderColor:"#ccc",                        //边框颜⾊
borderWidth:0,                              //边框线宽
textStyle:mytextStyle,                      //⽂本样式
textStyle:mytextStyle,                      //⽂本样式
formatter: function (value) {                //标签的格式化⼯具。            return 'aaaa' + value;                  // 范围标签显⽰内容。
}
}
];

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。