codecamp

ECharts视觉映射组件(visualMap)

visualMap[i]

visualMap 是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。

视觉元素可以是:

  • symbol: 图元的图形类别。
  • symbolSize: 图元的大小。
  • color: 图元的颜色。
  • colorAlpha: 图元的颜色的透明度。
  • opacity: 图元以及其附属物(如文字标签)的透明度。
  • colorLightness: 颜色的明暗度,参见 HSL
  • colorSaturation: 颜色的饱和度,参见 HSL
  • colorHue: 颜色的色调,参见 HSL

visualMap 组件可以定义多个,从而可以同时对数据中的多个维度进行视觉映射。

visualMap 组件可以定义为 分段型(visualMapPiecewise) 或 连续型(visualMapContinuous),通过 type 来区分。例如:

option = {
    visualMap: [
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 viusalMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
    ...
};

视觉映射方式的配置

既然是『数据』到『视觉元素』的映射,visualMap 中可以指定数据的『哪个维度』(参见 visualMap.dimension)映射到哪些『视觉元素』(参见 visualMap.inRange 和 visualMap.outOfRange)中。

在 visualMap 组件所控制的 series 中,如果 series 中某个数据项需要避开 visualMap 映射,可以这么配置:

series : [
    {name: 'Shanghai', value: 251},
    {name: 'Haikou', value: 21},
    // 设置 `visualMap: false` 则 visualMap 不对此项进行控制,此时系列
    // 可使用自身的视觉参数(color/symbol/ ...控制此项的显示。
    {name: 'Beijing', value: 821, visualMap: false},
    ...
]

与 ECharts2 中 dataRange 的关系

visualMap 是由 ECharts2 中的 dataRange 组件改名以及扩展而来。ECharts 3里 option 中的 dataRange 配置项仍然被兼容,会自动转换成 visualMap 配置项。在 option 中推荐写 visualMap 而非 dataRange。


ECharts滑动条型数据区域缩放组件文字样式的设置
视觉映射组件的controller属性
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }