출처 : 공식 웹 사이트는 자신의 정리
시각 요소 데이터 시각화 데이터 매핑 처리 (인코딩 과정은 또한 시각적으로 지칭 될 수 있으며, 시각적 요소는 비주얼 채널로 지칭 될 수있다) .
예를 들면 "라인"히스토그램 데이터에 데이터를 매핑하는 선형 차트와 같은 자체가이 매핑 프로세스를 구축 각 차트 ECharts는 매핑됩니다 "길이." 더 복잡한 차트의 일부는 같은 graph, 事件河流图, treemap또한 내장 된지도를 만들 것입니다.
또한 ECharts도 제공 visualMap 성분을 일반적인 시각 맵핑을 제공하기 위해 . visualMap 사용할 수있는 조립 시각적 요소가 图形类别（symbol）있다 : 图形大小（symbolSize）颜色（color）, 透明度（opacity）, 颜色透明度（colorAlpha）, 颜色明暗度（colorLightness）, 颜色饱和度（colorSaturation）,,色调（colorHue）
다음으로, visualMap 구성 요소의 사용은 간단히 설명.
데이터 및 치수
데이터, 일반적으로 저장 ECharts series.data 에 있습니다. 차트 유형에 따라 데이터의 특정 형태는 약간 다를 수 있습니다. 예를 들어, "선형 형태", "나무", "지도"등이 될 수 있습니다. 그러나 그들은 모두 한 가지 공통점이 있습니다. "항목 (있는 DataItem)"모든 컬렉션을 각각의 데이터 아이템은 "데이터 값 (값)"및 기타 정보 (필요한 경우)을 포함한다. 각각의 데이터 값은 하나의 값 (일차원) 배열 또는 (다차원)를 할 수있다.
예를 들어 series.data 가장 일반적인 형태 "선형 모양", 즉 일반적인 배열 :
series: { data: [ { // 这里每一个项就是数据项（dataItem） value: 2323, // 这是数据项的数据值（value） itemStyle: {...} }, 1212, // 也可以直接是 dataItem 的 value，这更常见。 2323, // 每个 value 都是『一维』的。 4343, 3434 ] }series: { data: [ { // 这里每一个项就是数据项（dataItem） value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value） itemStyle: {...} }, [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。 [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。 [4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴， // 第二维度映射到y轴， // 第三维度映射到气泡半径（symbolSize） ] }
그래프에서, 종종 이전 이차원의 디폴트 값과 같은 X 축에 대응하는 제 사이즈 복용으로 매핑되고, 상기 제 치수가 y 축을 취 매핑된다. 당신이 더 많은 차원을 표시하려는 경우, 당신은 도움이 될 수 있습니다visualMap.
visualMap 구성 요소
visualMap 구성 요소에 맵핑 "치수"의 데이터를 정의 "어떤 시각 요소입니다."
지금까지 부품 visualMap 다음 두 가지 유형의 제공 visualMap.type 구별합니다.
그것의 정의 구조의 예 :
option = { visualMap: [ // 可以同时定义多个 visualMap 组件。 { // 第一个 visualMap 组件 type: 'continuous', // 定义为连续型 viusalMap ... }, { // 第二个 visualMap 组件 type: 'piecewise', // 定义为分段型 visualMap ... } ], ... };
连续型（visualMapContinuous）
分段型（visualMapPiecewise）
세그먼트 타입의 시각적 매핑 어셈블리 (visualMapPiecewise), 세 가지 모드가 있습니다 :
- 평균 연속 데이터 세그먼트 : 기초 visualMap-piecewise.splitNumber는 자동 균등 몇 개의 블록으로 분할.
- 맞춤 연속 데이터 세그먼트는 : 기초 visualMap-piecewise.pieces은 각 범위를 정의한다.
- 이산 데이터 (카테고리 데이터) : 클래스 정의 visualMap-piecewise.categories 한다.
시각적 매핑 방식 구성
그것은 "데이터"매핑 "비주얼 요소"이며, 이후 visualMap 에는 '측정'데이터를 지정할 수있다 (참조 visualMap.dimension을 )이 "시각 요소"(참조에 매핑 visualMap.inRange 및 visualMap.outOfRange을 하여).
예 하나 :
option = { visualMap: [ { type: 'piecewise' min: 0, max: 5000, dimension: 3, // series.data 的第四个维度（即 value[3]）被映射 seriesIndex: 4, // 对第四个系列进行映射。 inRange: { // 选中范围中的视觉配置 color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表， // 数据最小值映射到'blue'上， // 最大值映射到'red'上， // 其余自动线性计算。 symbolSize: [30, 100] // 定义了图形尺寸的映射范围， // 数据最小值映射到30上， // 最大值映射到100上， // 其余自动线性计算。 }, outOfRange: { // 选中范围外的视觉配置 symbolSize: [30, 100] } }, ... ] };예 2 :
option = { visualMap: [ { ..., inRange: { // 选中范围中的视觉配置 colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。 // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。 symbolSize: [30, 100] }, ... }, ... ] };자세한 내용은 참조 visualMap.inRange 및 visualMap.outOfRange을 .