echarts交互組件與數(shù)據(jù)的視覺映射
更新時間：2022年06月07日 09:38:35 作者：springsnow
這篇文章介紹了echarts交互組件與數(shù)據(jù)的視覺映射，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
交互組件
ECharts 提供了很多交互組件：例組件 legend、標題組件 title、視覺映射組件 visualMap、數(shù)據(jù)區(qū)域縮放組件 dataZoom、時間線組件 timeline。
接下來的內(nèi)容我們將介紹如何使用數(shù)據(jù)區(qū)域縮放組件 dataZoom。
dataZoom
dataZoom 組件可以實現(xiàn)通過鼠標滾輪滾動，放大縮小圖表的功能。
默認情況下 dataZoom 控制 x 軸，即對 x 軸進行數(shù)據(jù)窗口縮放和數(shù)據(jù)窗口平移操作。
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 這個dataZoom組件，默認控制x軸。
type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
}
],
series: [
{
type: 'scatter', // 這是個『散點圖』
itemStyle: {
opacity: 0.8
},
symbolSize: function (val) {
return val[2] * 40;
},
data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
}上面的實例只能拖動 dataZoom 組件來縮小或放大圖表。如果想在坐標系內(nèi)進行拖動，以及用鼠標滾輪（或移動觸屏上的兩指滑動）進行縮放，那么需要 再再加上一個 inside 型的 dataZoom 組件。
在以上實例基礎上我們再增加 type: 'inside' 的配置信息：
option = {
...,
dataZoom: [
{ // 這個dataZoom組件，默認控制x軸。
type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
},
{ // 這個dataZoom組件，也控制x軸。
type: 'inside', // 這個 dataZoom 組件是 inside 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
}
],
...
}當然我們可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數(shù)軸。
var data1 = [];
var data2 = [];
var data3 = [];
var random = function (max) {
return (Math.random() * max).toFixed(3);
};
for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
}
option = {
animation: false,
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
tooltip: {
},
xAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
}數(shù)據(jù)的視覺映射
數(shù)據(jù)可視化簡單來講就是將數(shù)據(jù)用圖表的形式來展示，專業(yè)的表達方式就是數(shù)據(jù)到視覺元素的映射過程。
ECharts 的每種圖表本身就內(nèi)置了這種映射過程，我們之前學習到的柱形圖就是將數(shù)據(jù)映射到長度。
此外，ECharts 還提供了 visualMap 組件 來提供通用的視覺映射。visualMap 組件中可以使用的視覺元素有：
- 圖形類別（symbol）
- 圖形大小（symbolSize）
- 顏色（color）
- 透明度（opacity）
- 顏色透明度（colorAlpha）
- 顏色明暗度（colorLightness）
- 顏色飽和度（colorSaturation）
- 色調（colorHue）
一、數(shù)據(jù)和維度
ECharts 中的數(shù)據(jù)，一般存放于 series.data 中。
不同的圖表類型，數(shù)據(jù)格式有所不一樣，但是他們的共同特點就都是數(shù)據(jù)項（dataItem） 的集合。每個數(shù)據(jù)項含有 數(shù)據(jù)值（value） 和其他信息（可選）。每個數(shù)據(jù)值，可以是單一的數(shù)值（一維）或者一個數(shù)組（多維）。
series.data 最常見的形式 是線性表，即一個普通數(shù)組：
series: {
data: [
{ // 這里每一個項就是數(shù)據(jù)項（dataItem）
value: 2323, // 這是數(shù)據(jù)項的數(shù)據(jù)值（value）
itemStyle: {...}
},
1212, // 也可以直接是 dataItem 的 value，這更常見。
2323, // 每個 value 都是『一維』的。
4343,
3434
]
}
series: {
data: [
{ // 這里每一個項就是數(shù)據(jù)項（dataItem）
value: [3434, 129, '圣馬力諾'], // 這是數(shù)據(jù)項的數(shù)據(jù)值（value）
itemStyle: {...}
},
[1212, 5454, '梵蒂岡'], // 也可以直接是 dataItem 的 value，這更常見。
[2323, 3223, '瑙魯'], // 每個 value 都是『三維』的，每列是一個維度。
[4343, 23, '圖瓦盧'] // 假如是『氣泡圖』，常見第一維度映射到x軸，
// 第二維度映射到y(tǒng)軸，
// 第三維度映射到氣泡半徑（symbolSize）
]
}在圖表中，往往默認把 value 的前一兩個維度進行映射，比如取第一個維度映射到x軸，取第二個維度映射到y(tǒng)軸。如果想要把更多的維度展現(xiàn)出來，可以借助 visualMap 。
二、visualMap 組件
visualMap 組件定義了把數(shù)據(jù)的指定維度映射到對應的視覺元素上。
visualMap 組件可以定義多個，從而可以同時對數(shù)據(jù)中的多個維度進行視覺映射。
visualMap 組件可以定義為 分段型（visualMapPiecewise） 或 連續(xù)型（visualMapContinuous），通過 type 來區(qū)分。例如：
option = {
visualMap: [
{ // 第一個 visualMap 組件
type: 'continuous', // 定義為連續(xù)型 visualMap
...
},
{ // 第二個 visualMap 組件
type: 'piecewise', // 定義為分段型 visualMap
...
}
],
...
};分段型視覺映射組件，有三種模式：
- 連續(xù)型數(shù)據(jù)平均分段: 依據(jù) visualMap-piecewise.splitNumber 來自動平均分割成若干塊。
- 連續(xù)型數(shù)據(jù)自定義分段: 依據(jù) visualMap-piecewise.pieces 來定義每塊范圍。
- 離散數(shù)據(jù)根據(jù)類別分段: 類別定義在 visualMap-piecewise.categories 中。
分段型視覺映射組件，展現(xiàn)形式如下圖：
實例
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var geoCoordMap = {
"海門":[121.15,31.89],
"鄂爾多斯":[109.781327,39.608266],
"招遠":[120.38,37.35],
"舟山":[122.207216,29.985295],
"齊齊哈爾":[123.97,47.33],
"鹽城":[120.13,33.38],
"赤峰":[118.87,42.28],
"青島":[120.33,36.07],
"乳山":[121.52,36.89],
"金昌":[102.188043,38.520089],
"泉州":[118.58,24.93],
"萊西":[120.53,36.86],
"日照":[119.46,35.42],
"膠南":[119.97,35.88],
"南通":[121.05,32.08],
"拉薩":[91.11,29.97],
"云浮":[112.02,22.93],
"梅州":[116.1,24.55],
"文登":[122.05,37.2],
"上海":[121.48,31.22],
"攀枝花":[101.718637,26.582347],
"威海":[122.1,37.5],
"承德":[117.93,40.97],
"廈門":[118.1,24.46],
"汕尾":[115.375279,22.786211],
"潮州":[116.63,23.68],
"丹東":[124.37,40.13],
"太倉":[121.1,31.45],
"曲靖":[103.79,25.51],
"煙臺":[121.39,37.52],
"福州":[119.3,26.08],
"瓦房店":[121.979603,39.627114],
"即墨":[120.45,36.38],
"撫順":[123.97,41.97],
"玉溪":[102.52,24.35],
"張家口":[114.87,40.82],
"陽泉":[113.57,37.85],
"萊州":[119.942327,37.177017],
"湖州":[120.1,30.86],
"汕頭":[116.69,23.39],
"昆山":[120.95,31.39],
"寧波":[121.56,29.86],
"湛江":[110.359377,21.270708],
"揭陽":[116.35,23.55],
"榮成":[122.41,37.16],
"連云港":[119.16,34.59],
"葫蘆島":[120.836932,40.711052],
"常熟":[120.74,31.64],
"東莞":[113.75,23.04],
"河源":[114.68,23.73],
"淮安":[119.15,33.5],
"泰州":[119.9,32.49],
"南寧":[108.33,22.84],
"營口":[122.18,40.65],
"惠州":[114.4,23.09],
"江陰":[120.26,31.91],
"蓬萊":[120.75,37.8],
"韶關":[113.62,24.84],
"嘉峪關":[98.289152,39.77313],
"廣州":[113.23,23.16],
"延安":[109.47,36.6],
"太原":[112.53,37.87],
"清遠":[113.01,23.7],
"中山":[113.38,22.52],
"昆明":[102.73,25.04],
"壽光":[118.73,36.86],
"盤錦":[122.070714,41.119997],
"長治":[113.08,36.18],
"深圳":[114.07,22.62],
"珠海":[113.52,22.3],
"宿遷":[118.3,33.96],
"咸陽":[108.72,34.36],
"銅川":[109.11,35.09],
"平度":[119.97,36.77],
"佛山":[113.11,23.05],
"?？?:[110.35,20.02],
"江門":[113.06,22.61],
"章丘":[117.53,36.72],
"肇慶":[112.44,23.05],
"大連":[121.62,38.92],
"臨汾":[111.5,36.08],
"吳江":[120.63,31.16],
"石嘴山":[106.39,39.04],
"沈陽":[123.38,41.8],
"蘇州":[120.62,31.32],
"茂名":[110.88,21.68],
"嘉興":[120.76,30.77],
"長春":[125.35,43.88],
"膠州":[120.03336,36.264622],
"銀川":[106.27,38.47],
"張家港":[120.555821,31.875428],
"三門峽":[111.19,34.76],
"錦州":[121.15,41.13],
"南昌":[115.89,28.68],
"柳州":[109.4,24.33],
"三亞":[109.511909,18.252847],
"自貢":[104.778442,29.33903],
"吉林":[126.57,43.87],
"陽江":[111.95,21.85],
"瀘州":[105.39,28.91],
"西寧":[101.74,36.56],
"宜賓":[104.56,29.77],
"呼和浩特":[111.65,40.82],
"成都":[104.06,30.67],
"大同":[113.3,40.12],
"鎮(zhèn)江":[119.44,32.2],
"桂林":[110.28,25.29],
"張家界":[110.479191,29.117096],
"宜興":[119.82,31.36],
"北海":[109.12,21.49],
"西安":[108.95,34.27],
"金壇":[119.56,31.74],
"東營":[118.49,37.46],
"牡丹江":[129.58,44.6],
"遵義":[106.9,27.7],
"紹興":[120.58,30.01],
"揚州":[119.42,32.39],
"常州":[119.95,31.79],
"濰坊":[119.1,36.62],
"重慶":[106.54,29.59],
"臺州":[121.420757,28.656386],
"南京":[118.78,32.04],
"濱州":[118.03,37.36],
"貴陽":[106.71,26.57],
"無錫":[120.29,31.59],
"本溪":[123.73,41.3],
"克拉瑪依":[84.77,45.59],
"渭南":[109.5,34.52],
"馬鞍山":[118.48,31.56],
"寶雞":[107.15,34.38],
"焦作":[113.21,35.24],
"句容":[119.16,31.95],
"北京":[116.46,39.92],
"徐州":[117.2,34.26],
"衡水":[115.72,37.72],
"包頭":[110,40.58],
"綿陽":[104.73,31.48],
"烏魯木齊":[87.68,43.77],
"棗莊":[117.57,34.86],
"杭州":[120.19,30.26],
"淄博":[118.05,36.78],
"鞍山":[122.85,41.12],
"溧陽":[119.48,31.43],
"庫爾勒":[86.06,41.68],
"安陽":[114.35,36.1],
"開封":[114.35,34.79],
"濟南":[117,36.65],
"德陽":[104.37,31.13],
"溫州":[120.65,28.01],
"九江":[115.97,29.71],
"邯鄲":[114.47,36.6],
"臨安":[119.72,30.23],
"蘭州":[103.73,36.03],
"滄州":[116.83,38.33],
"臨沂":[118.35,35.05],
"南充":[106.110698,30.837793],
"天津":[117.2,39.13],
"富陽":[119.95,30.07],
"泰安":[117.13,36.18],
"諸暨":[120.23,29.71],
"鄭州":[113.65,34.76],
"哈爾濱":[126.63,45.75],
"聊城":[115.97,36.45],
"蕪湖":[118.38,31.33],
"唐山":[118.02,39.63],
"平頂山":[113.29,33.75],
"邢臺":[114.48,37.05],
"德州":[116.29,37.45],
"濟寧":[116.59,35.38],
"荊州":[112.239741,30.335165],
"宜昌":[111.3,30.7],
"義烏":[120.06,29.32],
"麗水":[119.92,28.45],
"洛陽":[112.44,34.7],
"秦皇島":[119.57,39.95],
"株洲":[113.16,27.83],
"石家莊":[114.48,38.03],
"萊蕪":[117.67,36.19],
"常德":[111.69,29.05],
"保定":[115.48,38.85],
"湘潭":[112.91,27.87],
"金華":[119.64,29.12],
"岳陽":[113.09,29.37],
"長沙":[113,28.21],
"衢州":[118.88,28.97],
"廊坊":[116.7,39.53],
"菏澤":[115.480656,35.23375],
"合肥":[117.27,31.86],
"武漢":[114.31,30.52],
"大慶":[125.03,46.58]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push(geoCoord.concat(data[i].value));
}
}
return res;
};
option = {
backgroundColor: '#404a59',
title: {
text: '全國主要城市空氣質量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['pm2.5'],
textStyle: {
color: '#fff'
}
},
visualMap: {
min: 0,
max: 300,
splitNumber: 5,
color: ['#d94e5d','#eac736','#50a3ba'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name: "海門", value: 9},
{name: "鄂爾多斯", value: 12},
{name: "招遠", value: 12},
{name: "舟山", value: 12},
{name: "齊齊哈爾", value: 14},
{name: "鹽城", value: 15},
{name: "赤峰", value: 16},
{name: "青島", value: 18},
{name: "乳山", value: 18},
{name: "金昌", value: 19},
{name: "泉州", value: 21},
{name: "萊西", value: 21},
{name: "日照", value: 21},
{name: "膠南", value: 22},
{name: "南通", value: 23},
{name: "拉薩", value: 24},
{name: "云浮", value: 24},
{name: "梅州", value: 25},
{name: "文登", value: 25},
{name: "上海", value: 25},
{name: "攀枝花", value: 25},
{name: "威海", value: 25},
{name: "承德", value: 25},
{name: "廈門", value: 26},
{name: "汕尾", value: 26},
{name: "潮州", value: 26},
{name: "丹東", value: 27},
{name: "太倉", value: 27},
{name: "曲靖", value: 27},
{name: "煙臺", value: 28},
{name: "福州", value: 29},
{name: "瓦房店", value: 30},
{name: "即墨", value: 30},
{name: "撫順", value: 31},
{name: "玉溪", value: 31},
{name: "張家口", value: 31},
{name: "陽泉", value: 31},
{name: "萊州", value: 32},
{name: "湖州", value: 32},
{name: "汕頭", value: 32},
{name: "昆山", value: 33},
{name: "寧波", value: 33},
{name: "湛江", value: 33},
{name: "揭陽", value: 34},
{name: "榮成", value: 34},
{name: "連云港", value: 35},
{name: "葫蘆島", value: 35},
{name: "常熟", value: 36},
{name: "東莞", value: 36},
{name: "河源", value: 36},
{name: "淮安", value: 36},
{name: "泰州", value: 36},
{name: "南寧", value: 37},
{name: "營口", value: 37},
{name: "惠州", value: 37},
{name: "江陰", value: 37},
{name: "蓬萊", value: 37},
{name: "韶關", value: 38},
{name: "嘉峪關", value: 38},
{name: "廣州", value: 38},
{name: "延安", value: 38},
{name: "太原", value: 39},
{name: "清遠", value: 39},
{name: "中山", value: 39},
{name: "昆明", value: 39},
{name: "壽光", value: 40},
{name: "盤錦", value: 40},
{name: "長治", value: 41},
{name: "深圳", value: 41},
{name: "珠海", value: 42},
{name: "宿遷", value: 43},
{name: "咸陽", value: 43},
{name: "銅川", value: 44},
{name: "平度", value: 44},
{name: "佛山", value: 44},
{name: "?？?, value: 44},
{name: "江門", value: 45},
{name: "章丘", value: 45},
{name: "肇慶", value: 46},
{name: "大連", value: 47},
{name: "臨汾", value: 47},
{name: "吳江", value: 47},
{name: "石嘴山", value: 49},
{name: "沈陽", value: 50},
{name: "蘇州", value: 50},
{name: "茂名", value: 50},
{name: "嘉興", value: 51},
{name: "長春", value: 51},
{name: "膠州", value: 52},
{name: "銀川", value: 52},
{name: "張家港", value: 52},
{name: "三門峽", value: 53},
{name: "錦州", value: 54},
{name: "南昌", value: 54},
{name: "柳州", value: 54},
{name: "三亞", value: 54},
{name: "自貢", value: 56},
{name: "吉林", value: 56},
{name: "陽江", value: 57},
{name: "瀘州", value: 57},
{name: "西寧", value: 57},
{name: "宜賓", value: 58},
{name: "呼和浩特", value: 58},
{name: "成都", value: 58},
{name: "大同", value: 58},
{name: "鎮(zhèn)江", value: 59},
{name: "桂林", value: 59},
{name: "張家界", value: 59},
{name: "宜興", value: 59},
{name: "北海", value: 60},
{name: "西安", value: 61},
{name: "金壇", value: 62},
{name: "東營", value: 62},
{name: "牡丹江", value: 63},
{name: "遵義", value: 63},
{name: "紹興", value: 63},
{name: "揚州", value: 64},
{name: "常州", value: 64},
{name: "濰坊", value: 65},
{name: "重慶", value: 66},
{name: "臺州", value: 67},
{name: "南京", value: 67},
{name: "濱州", value: 70},
{name: "貴陽", value: 71},
{name: "無錫", value: 71},
{name: "本溪", value: 71},
{name: "克拉瑪依", value: 72},
{name: "渭南", value: 72},
{name: "馬鞍山", value: 72},
{name: "寶雞", value: 72},
{name: "焦作", value: 75},
{name: "句容", value: 75},
{name: "北京", value: 79},
{name: "徐州", value: 79},
{name: "衡水", value: 80},
{name: "包頭", value: 80},
{name: "綿陽", value: 80},
{name: "烏魯木齊", value: 84},
{name: "棗莊", value: 84},
{name: "杭州", value: 84},
{name: "淄博", value: 85},
{name: "鞍山", value: 86},
{name: "溧陽", value: 86},
{name: "庫爾勒", value: 86},
{name: "安陽", value: 90},
{name: "開封", value: 90},
{name: "濟南", value: 92},
{name: "德陽", value: 93},
{name: "溫州", value: 95},
{name: "九江", value: 96},
{name: "邯鄲", value: 98},
{name: "臨安", value: 99},
{name: "蘭州", value: 99},
{name: "滄州", value: 100},
{name: "臨沂", value: 103},
{name: "南充", value: 104},
{name: "天津", value: 105},
{name: "富陽", value: 106},
{name: "泰安", value: 112},
{name: "諸暨", value: 112},
{name: "鄭州", value: 113},
{name: "哈爾濱", value: 114},
{name: "聊城", value: 116},
{name: "蕪湖", value: 117},
{name: "唐山", value: 119},
{name: "平頂山", value: 119},
{name: "邢臺", value: 119},
{name: "德州", value: 120},
{name: "濟寧", value: 120},
{name: "荊州", value: 127},
{name: "宜昌", value: 130},
{name: "義烏", value: 132},
{name: "麗水", value: 133},
{name: "洛陽", value: 134},
{name: "秦皇島", value: 136},
{name: "株洲", value: 143},
{name: "石家莊", value: 147},
{name: "萊蕪", value: 148},
{name: "常德", value: 152},
{name: "保定", value: 153},
{name: "湘潭", value: 154},
{name: "金華", value: 157},
{name: "岳陽", value: 169},
{name: "長沙", value: 175},
{name: "衢州", value: 177},
{name: "廊坊", value: 193},
{name: "菏澤", value: 194},
{name: "合肥", value: 229},
{name: "武漢", value: 273},
{name: "大慶", value: 279}
]),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
三、視覺映射方式的配置
visualMap 中可以指定數(shù)據(jù)的指定維度映射到對應的視覺元素上。
實例 1
option = {
visualMap: [
{
type: 'piecewise'
min: 0,
max: 5000,
dimension: 3, // series.data 的第四個維度（即 value[3]）被映射
seriesIndex: 4, // 對第四個系列進行映射。
inRange: { // 選中范圍中的視覺配置
color: ['blue', '#121122', 'red'], // 定義了圖形顏色映射的顏色列表，
// 數(shù)據(jù)最小值映射到'blue'上，
// 最大值映射到'red'上，
// 其余自動線性計算。
symbolSize: [30, 100] // 定義了圖形尺寸的映射范圍，
// 數(shù)據(jù)最小值映射到30上，
// 最大值映射到100上，
// 其余自動線性計算。
},
outOfRange: { // 選中范圍外的視覺配置
symbolSize: [30, 100]
}
},
...
]
};實例 2
option = {
visualMap: [
{
...,
inRange: { // 選中范圍中的視覺配置
colorLightness: [0.2, 1], // 映射到明暗度上。也就是對本來的顏色進行明暗度處理。
// 本來的顏色可能是從全局色板中選取的顏色，visualMap組件并不關心。
symbolSize: [30, 100]
},
...
},
...
]
};以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript詞法作用域與作用域鏈,結合實例形式分析了JavaScript詞法作用域與作用域鏈相關概念、原理與操作注意事項,需要的朋友可以參考下2020-05-05
用Aptana軟件來調試javascript的方法，一般情況下大家都使用firefox瀏覽器+firebug來調試的。2009-11-11
基于JavaScript實現(xiàn)鼠標懸浮彈出跟隨鼠標移動的帶箭頭的信息層
這篇文章主要介紹了基于JavaScript實現(xiàn)鼠標懸浮彈出跟隨鼠標移動的帶箭頭的信息層 的相關資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS Math對象與Math方法,結合實例形式總結分析了javascript中math對象常用屬性與方法相關使用技巧,需要的朋友可以參考下2019-07-07
this指觸發(fā)事件的對象，接下來為大家分享下javascript中onclick(this)的用法，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
如果需要在程序中獲取當前用戶的IP,通常手段都是需要使用服務器,但現(xiàn)在借助WebRTC的強大功能,我們可以直接在瀏覽器客戶端獲取用戶IP,所以本文小編將給大家介紹一下如何在在瀏覽器中使用WebRTC獲取用戶IP地址,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了基于Bootstrap框架實現(xiàn)圖片切換的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
本文主要介紹了JS支付頁面倒計時的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
javascript中負數(shù)算術右移、邏輯右移的奧秘探索
javascript中負數(shù)的算術右移和邏輯右移都十分的讓人迷惑，特別是邏輯右移，接下來的文章中將為大家詳細介紹下為什么右移之后，一個很小的負數(shù)也會得到一個無比巨大的數(shù)2013-10-10
BootStrap下拉框在firefox瀏覽器界面不友好的解決方案
BootStrap下拉框在firefox瀏覽器界面很不友好，在firefix瀏覽器打開鏈接就會發(fā)現(xiàn)里面有個小容器，怎么處理呢，下面看下小編給大家分享的有關這個問題的處理方案2016-08-08