| __NUXT_JSONP__("/zh/concepts/visual-map", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L){return {data:[{article:{slug:"visual-map",toc:[{id:r,depth:z,text:r},{id:D,depth:z,text:A},{id:s,depth:z,text:s},{id:t,depth:E,text:t},{id:u,depth:E,text:u}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:F},children:[{type:b,tag:d,props:{href:"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:F}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到“线”，柱状图把数据映射到“长度”。一些更复杂的图表，如关系图、事件河流图、树图也都会做出各自内置的映射。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"此外，ECharts 还提供了 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap",rel:[f,g,h],target:i},children:[{type:a,value:A}]},{type:a,value:" 来提供通用的视觉映射。"},{type:b,tag:p,props:{},children:[{type:a,value:B}]},{type:a,value:" 组件中可以使用的视觉元素有："}]},{type:a,value:c},{type:b,tag:G,props:{},children:[{type:a,value:c},{type:b,tag:q,props:{},children:[{type:a,value:"图形类别（symbol）、图形大小（symbolSize）"}]},{type:a,value:c},{type:b,tag:q,props:{},children:[{type:a,value:"颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、"}]},{type:a,value:c},{type:b,tag:q,props:{},children:[{type:a,value:"颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）"}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"下面对 "},{type:b,tag:p,props:{},children:[{type:a,value:B}]},{type:a,value:" 组件的使用方式进行简要的介绍。"}]},{type:a,value:c},{type:b,tag:C,props:{id:r},children:[{type:b,tag:d,props:{href:"#%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:r}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"ECharts 中的数据，一般存放于 "},{type:b,tag:d,props:{href:H,rel:[f,g,h],target:i},children:[{type:b,tag:p,props:{},children:[{type:a,value:I}]}]},{type:a,value:" 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性：都是“数据项（dataItem）“的集合。每个数据项含有“数据值（value）“和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"例如，"},{type:b,tag:d,props:{href:H,rel:[f,g,h],target:i},children:[{type:a,value:I}]},{type:a,value:" 最常见的形式，是“线性表“，即一个普通数组："}]},{type:a,value:c},{type:b,tag:v,props:{className:[w]},children:[{type:b,tag:x,props:{lang:y,"line-highlights":j,"file-name":j},children:[{type:a,value:"series: {\n data: [\n {\n \u002F\u002F 这里每一个项就是数据项（dataItem）\n value: 2323, \u002F\u002F 这是数据项的数据值（value）\n itemStyle: {}\n },\n 1212, \u002F\u002F 也可以直接是 dataItem 的 value，这更常见。\n 2323, \u002F\u002F 每个 value 都是“一维“的。\n 4343,\n 3434\n ];\n}\n"}]}]},{type:a,value:c},{type:b,tag:v,props:{className:[w]},children:[{type:b,tag:x,props:{lang:y,"line-highlights":j,"file-name":j},children:[{type:a,value:"series: {\n data: [\n {\n \u002F\u002F 这里每一个项就是数据项（dataItem）\n value: [3434, 129, '圣马力诺'], \u002F\u002F 这是数据项的数据值（value）\n itemStyle: {}\n },\n [1212, 5454, '梵蒂冈'], \u002F\u002F 也可以直接是 dataItem 的 value，这更常见。\n [2323, 3223, '瑙鲁'], \u002F\u002F 每个 value 都是“三维“的，每列是一个维度。\n [4343, 23, '图瓦卢'] \u002F\u002F 假如是“气泡图“，常见第一维度映射到x轴，\n \u002F\u002F 第二维度映射到y轴，\n \u002F\u002F 第三维度映射到气泡半径（symbolSize）\n ];\n}\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到 x 轴，取第二个维度映射到 y 轴。如果想要把更多的维度展现出来，可以借助 "},{type:b,tag:p,props:{},children:[{type:a,value:B}]},{type:a,value:"。最常见的情况，"},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#series-scatter",rel:[f,g,h],target:i},children:[{type:a,value:"散点图（scatter）"}]},{type:a,value:" 使用半径展现了第三个维度。"}]},{type:a,value:c},{type:b,tag:C,props:{id:D},children:[{type:b,tag:d,props:{href:"#visualmap-%E7%BB%84%E4%BB%B6",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:A}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"visualMap 组件定义了把数据的"},{type:b,tag:J,props:{},children:[{type:a,value:"哪个维度"}]},{type:a,value:"映射到"},{type:b,tag:J,props:{},children:[{type:a,value:"什么视觉元素上"}]},{type:a,value:"。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"现在提供如下两种类型的 visualMap 组件，通过 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap.type",rel:[f,g,h],target:i},children:[{type:a,value:"visualMap.type"}]},{type:a,value:" 来区分。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"其定义结构例如："}]},{type:a,value:c},{type:b,tag:v,props:{className:[w]},children:[{type:b,tag:x,props:{lang:y,"line-highlights":j,"file-name":j},children:[{type:a,value:"option = {\n visualMap: [\n \u002F\u002F 可以同时定义多个 visualMap 组件。\n {\n \u002F\u002F 第一个 visualMap 组件\n type: 'continuous' \u002F\u002F 定义为连续型 visualMap\n \u002F\u002F ...\n },\n {\n \u002F\u002F 第二个 visualMap 组件\n type: 'piecewise' \u002F\u002F 定义为分段型 visualMap\n \u002F\u002F ...\n }\n ]\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:C,props:{id:s},children:[{type:b,tag:d,props:{href:"#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:s}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"ECharts 的视觉映射组件分为连续型（"},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap-continuous",rel:[f,g,h],target:i},children:[{type:a,value:"visualMapContinuous"}]},{type:a,value:"）与分段型（"},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap-piecewise",rel:[f,g,h],target:i},children:[{type:a,value:"visualMapPiecewise"}]},{type:a,value:"）。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"连续型的意思是，进行视觉映射的数据维度是连续的数值；而分段型则是数据被分成了多段或者是离散型的数据。"}]},{type:a,value:c},{type:b,tag:K,props:{id:t},children:[{type:b,tag:d,props:{href:"#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:t}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"连续型视觉映射通过指定最大值、最小值，就可以确定视觉映射的范围。"}]},{type:a,value:c},{type:b,tag:v,props:{className:[w]},children:[{type:b,tag:x,props:{lang:y,"line-highlights":j,"file-name":j},children:[{type:a,value:"option = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, \u002F\u002F series.data 的第四个维度（即 value[3]）被映射\n seriesIndex: 4, \u002F\u002F 对第四个系列进行映射。\n inRange: {\n \u002F\u002F 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], \u002F\u002F 定义了图形颜色映射的颜色列表，\n \u002F\u002F 数据最小值映射到'blue'上，\n \u002F\u002F 最大值映射到'red'上，\n \u002F\u002F 其余自动线性计算。\n symbolSize: [30, 100] \u002F\u002F 定义了图形尺寸的映射范围，\n \u002F\u002F 数据最小值映射到30上，\n \u002F\u002F 最大值映射到100上，\n \u002F\u002F 其余自动线性计算。\n },\n outOfRange: {\n \u002F\u002F 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n }\n \u002F\u002F ...\n ]\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"其中，"},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap.inRange",rel:[f,g,h],target:i},children:[{type:a,value:"visualMap.inRange"}]},{type:a,value:" 表示在数据映射范围内的数据采用的样式；而 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap.outOfRange",rel:[f,g,h],target:i},children:[{type:a,value:"visualMap.outOfRange"}]},{type:a,value:" 则指定了超出映射范围外的数据的样式。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:b,tag:d,props:{href:"~visualMap.dimension"},children:[{type:a,value:"visualMap.dimension"}]},{type:a,value:" 则指定了将数据的哪个维度做视觉映射。"}]},{type:a,value:c},{type:b,tag:K,props:{id:u},children:[{type:b,tag:d,props:{href:"#%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:u}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"分段型视觉映射组件有三种模式："}]},{type:a,value:c},{type:b,tag:G,props:{},children:[{type:a,value:c},{type:b,tag:q,props:{},children:[{type:a,value:"连续型数据平均分段：依据 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap-piecewise.splitNumber",rel:[f,g,h],target:i},children:[{type:a,value:"visualMap-piecewise.splitNumber"}]},{type:a,value:" 来自动平均分割成若干块。"}]},{type:a,value:c},{type:b,tag:q,props:{},children:[{type:a,value:"连续型数据自定义分段：依据 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap-piecewise.pieces",rel:[f,g,h],target:i},children:[{type:a,value:"visualMap-piecewise.pieces"}]},{type:a,value:" 来定义每块范围。"}]},{type:a,value:c},{type:b,tag:q,props:{},children:[{type:a,value:"离散数据（类别性数据）：类别定义在 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap-piecewise.categories",rel:[f,g,h],target:i},children:[{type:a,value:"visualMap-piecewise.categories"}]},{type:a,value:" 中。"}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"使用分段型视觉映射时，需要将 "},{type:b,tag:p,props:{},children:[{type:a,value:"type"}]},{type:a,value:" 设为 "},{type:b,tag:p,props:{},children:[{type:a,value:"'piecewise'"}]},{type:a,value:"，并且将上面的三个配置项选其一配置即可，其他配置项类似连续型视觉映射。"}]}]},dir:"\u002Fzh\u002Fconcepts",path:"\u002Fzh\u002Fconcepts\u002Fvisual-map",extension:".md",createdAt:L,updatedAt:L},postPath:"zh\u002Fconcepts\u002Fvisual-map"}],fetch:{},mutations:[]}}("text","element","\n","a","p","nofollow","noopener","noreferrer","_blank","","true",-1,"span","icon","icon-link","code","li","数据和维度","连续型与分段型视觉映射组件","连续型视觉映射","分段型视觉映射","div","nuxt-content-highlight","md-code-block","js",2,"visualMap 组件","visualMap","h2","visualmap-组件",3,"数据的视觉映射","ul","https:\u002F\u002Fecharts.apache.org\u002Foption.html#series.data","series.data","em","h3","2021-08-02T05:33:02.867Z"))); |