{{ target: component-visual-map-continuous }}
连续型视觉映射组件(visualMapContinuous)
visualMapContinuous
中,可以通过 visualMap.calculable 来显示或隐藏手柄(手柄能拖拽改变值域)。
类型为连续型。
{{ use: partial-component-id( prefix = “#” ) }}
指定 visualMapContinuous 组件的允许的最小值。'min'
必须用户指定。[visualMap.min, visualMax.max]
形成了视觉映射的『定义域』。
指定 visualMapContinuous 组件的允许的最大值。'max'
必须用户指定。[visualMap.min, visualMax.max]
形成了视觉映射的『定义域』。
指定手柄对应数值的位置。range
应在 min
max
范围内。例如:
chart.setOption({ visualMap: { min: 0, max: 100, // 两个手柄对应的数值是 4 和 15 range: [4, 15], ... } });
setOption 改变 min、max 时 range 的自适应
range
不设置(或设置为 null)例如: chart.setOption({visualMap: {min: 10, max: 300}}); // 不设置 range,则 range 默认为 [min, max],即 [10, 300]。 chart.setOption({visualMap: {min: 0, max: 400}}); // 再次使用 setOption 改变 min、max。 // 此时 range 也自然会更新成改变过后的 [min, max],即 [0, 400]。
range
被以具体值设置了(例如设置为 [10, 300])例如: chart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // 设置了 range chart.setOption({visualMap: {min: 0, max: 400}}); // 再次使用 setOption 改变 min、max。 // 此时 range 不会改变而仍维持本来的数值,仍为 [20, 80]。 chart.setOption({visualMap: {range: null}}); // 再把 range 设为 null。 // 则 range 恢复为 [min, max],即 [0, 400],同时也恢复了自动随 min max 而改变的能力。
getOption
得到的 range
总是 Array
,不会为 null
或 undefined
。
是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。
(注:为兼容 ECharts2,当 visualMap.type 未指定时,假如设置了 'calculable'
,则type
自动被设置为'continuous'
,无视 visualMap-piecewise.splitNumber 等设置。所以,建议使用者不要不指定 visualMap.type,否则表意不清晰。)
拖拽时,是否实时更新。
如果为ture
则拖拽手柄过程中实时更新图表视图。
如果为false
则拖拽结束时,才更新视图。
是否反转 visualMap 组件。
当inverse
为false
时,数据大小的位置规则,和直角坐标系相同,即:
'vertical'
时,数据上大下小。'horizontal'
时,数据右大左小。当inverse
为true
时,相反。
数据展示的小数精度,默认为0,无小数点。
图形的宽度,即长条的宽度。
图形的高度,即长条的高度。
指定组件中手柄和文字的摆放位置,可选值为:
'auto'
自动决定。'left'
手柄和label在右,orient 为 horizontal 时有效。'right'
手柄和label在左,orient 为 horizontal 时有效。'top'
手柄和label在下,orient 为 vertical 时有效。'bottom'
手柄和label在上,orient 为 vertical 时有效。两端的文本,如 ['High', 'Low']
。参见例子。
text
中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse。
两端文字主体之间的距离,单位为px。参见 visualMap-continuous.text
{{ use: partial-visual-map-common( visualMapName = ‘visualMap-continuous’ ) }}
标签的格式化工具。
string
,表示模板,例如:aaaa{value}
。其中 {value}
是当前的范围边界值。Function
,表示回调函数,形如:formatter: function (value) { return 'aaaa' + value; // 范围标签显示内容。 }
{{ use: partial-version( version = “5.0.0” ) }}
两端手柄的形状。默认为
'M-11.39,9.77h0a3.5,3.5,0,0,1-3.5,3.5h-22a3.5,3.5,0,0,1-3.5-3.5h0a3.5,3.5,0,0,1,3.5-3.5h22A3.5,3.5,0,0,1-11.39,9.77Z'
{{ use: partial-icon-image-path() }}
{{ use: partial-version( version = “5.0.0” ) }}
手柄的大小。可以是相对于组件尺寸的百分比大小。
{{ use: partial-version( version = “5.0.0” ) }}
手柄的样式配置。
{{ use: partial-item-style( prefix = “##”, defaultBorderColor = “#fff”, defaultBorderWidth = 1 ) }}
指示器的形状,默认为圆形。指示器在鼠标移到组件上,或者在移到系列图形上联动高亮的时候出现。
{{ use: partial-version( version = “5.0.0” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
指示器的大小。可以是相对于组件尺寸的百分比大小。
指示器样式。
{{ use: partial-item-style( prefix = “##”, defaultBorderColor = “#fff”, defaultBorderWidth = 2, defaultShadowBlur = 2, defaultShadowOffsetX = 1, defaultShadowOffsetY = 1, defaultShadowColor = ‘rgba(0,0,0,0.2)’ ) }}