ビジュアルデータマッピングをEcharts-

出典：公式サイトでは、自分自身を整理します

データ可視化データマッピング処理ビジュアル要素に（符号化処理はまた、視覚と呼ぶことができ、視覚的要素はまた、視覚的チャネルと呼ばれることもあります）。

各チャートECharts自体は、「ライン」ヒストグラムデータにマッピングされるにデータをマッピングする線グラフのように、このマッピングプロセスを構築し、「長さ」。より複雑なグラフのいくつかは、のような graph、事件河流图、treemapまた、その内蔵のマップを行います。

また、EChartsも提供 visualMap成分を共通の視覚的マッピングを提供します。visualMap アセンブリビジュアル要素を使用することができ
图形类别（symbol）ます：图形大小（symbolSize）
颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、
颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、、色调（colorHue）

次に、 visualMap 構成要素の使用を簡単に説明しました。

データおよび寸法

典型的に格納され、データをECharts series.data に。グラフの種類に応じて、データの特定の形式は、わずかに異なっていてもよいです。例えば、「直線状」、「木」、「マップ」などがあるかもしれません。しかし、それらはすべて一つの共通点があります「項目（データ項目）、」すべてのコレクションを各データ項目は、「データ値（値）」およびその他の情報（必要な場合）を含みます。各データ値は、単一の値（一次元）アレイ、又は（多次元）であってもよいです。

例えば、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のコンポーネントには、次の2種類を提供 visualMap.type 区別を。

その定義構造例：

option = { visualMap: [ // 可以同时定义多个 visualMap 组件。 { // 第一个 visualMap 组件 type: 'continuous', // 定义为连续型 viusalMap ... }, { // 第二个 visualMap 组件 type: 'piecewise', // 定义为分段型 visualMap ... } ], ... };
连续型（visualMapContinuous）
分段型（visualMapPiecewise）

セグメントタイプのビジュアルマッピングアセンブリ（visualMapPiecewise）、3つのモードがあります。

平均連続データセグメント：基づい visualMap-piecewise.splitNumber 自動的に均等にいくつかのブロックに分割されます。
カスタム連続データ・セグメント：基づい visualMap-piecewise.pieces 各範囲を定義します。
離散データ（カテゴリデータ）：でクラス定義 visualMap-piecewise.categories インチ

視覚的なマッピングアプローチを設定します

それは「データ」マッピング「視覚的要素」である、とするのでvisualMap 、あなたは、「次元」のデータを指定することができます（参照visualMap.dimensionを（参照「視覚的要素」にマッピングされている） visualMap.inRange と visualMap.outOfRangeをして）。

例1：

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を。