echarts交互組件與數(shù)據(jù)的視覺映射
更新時(shí)間：2022年06月07日 09:38:35 作者：springsnow
這篇文章介紹了echarts交互組件與數(shù)據(jù)的視覺映射，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
交互組件
ECharts 提供了很多交互組件：例組件 legend、標(biāo)題組件 title、視覺映射組件 visualMap、數(shù)據(jù)區(qū)域縮放組件 dataZoom、時(shí)間線組件 timeline。
接下來的內(nèi)容我們將介紹如何使用數(shù)據(jù)區(qū)域縮放組件 dataZoom。
dataZoom
dataZoom 組件可以實(shí)現(xiàn)通過鼠標(biāo)滾輪滾動(dòng)，放大縮小圖表的功能。
默認(rèn)情況下 dataZoom 控制 x 軸，即對(duì) x 軸進(jìn)行數(shù)據(jù)窗口縮放和數(shù)據(jù)窗口平移操作。
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 這個(gè)dataZoom組件，默認(rèn)控制x軸。
type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
}
],
series: [
{
type: 'scatter', // 這是個(gè)『散點(diǎn)圖』
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"]]
}
]
}上面的實(shí)例只能拖動(dòng) dataZoom 組件來縮小或放大圖表。如果想在坐標(biāo)系內(nèi)進(jìn)行拖動(dòng)，以及用鼠標(biāo)滾輪（或移動(dòng)觸屏上的兩指滑動(dòng)）進(jìn)行縮放，那么需要 再再加上一個(gè) inside 型的 dataZoom 組件。
在以上實(shí)例基礎(chǔ)上我們?cè)僭黾?type: 'inside' 的配置信息：
option = {
...,
dataZoom: [
{ // 這個(gè)dataZoom組件，默認(rèn)控制x軸。
type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
},
{ // 這個(gè)dataZoom組件，也控制x軸。
type: 'inside', // 這個(gè) dataZoom 組件是 inside 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
}
],
...
}當(dāng)然我們可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個(gè)或哪些數(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è)的表達(dá)方式就是數(shù)據(jù)到視覺元素的映射過程。
ECharts 的每種圖表本身就內(nèi)置了這種映射過程，我們之前學(xué)習(xí)到的柱形圖就是將數(shù)據(jù)映射到長度。
此外，ECharts 還提供了 visualMap 組件 來提供通用的視覺映射。visualMap 組件中可以使用的視覺元素有：
- 圖形類別（symbol）
- 圖形大?。╯ymbolSize）
- 顏色（color）
- 透明度（opacity）
- 顏色透明度（colorAlpha）
- 顏色明暗度（colorLightness）
- 顏色飽和度（colorSaturation）
- 色調(diào)（colorHue）
一、數(shù)據(jù)和維度
ECharts 中的數(shù)據(jù)，一般存放于 series.data 中。
不同的圖表類型，數(shù)據(jù)格式有所不一樣，但是他們的共同特點(diǎn)就都是數(shù)據(jù)項(xiàng)（dataItem） 的集合。每個(gè)數(shù)據(jù)項(xiàng)含有 數(shù)據(jù)值（value） 和其他信息（可選）。每個(gè)數(shù)據(jù)值，可以是單一的數(shù)值（一維）或者一個(gè)數(shù)組（多維）。
series.data 最常見的形式 是線性表，即一個(gè)普通數(shù)組：
series: {
data: [
{ // 這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem）
value: 2323, // 這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）
itemStyle: {...}
},
1212, // 也可以直接是 dataItem 的 value，這更常見。
2323, // 每個(gè) value 都是『一維』的。
4343,
3434
]
}
series: {
data: [
{ // 這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem）
value: [3434, 129, '圣馬力諾'], // 這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）
itemStyle: {...}
},
[1212, 5454, '梵蒂岡'], // 也可以直接是 dataItem 的 value，這更常見。
[2323, 3223, '瑙魯'], // 每個(gè) value 都是『三維』的，每列是一個(gè)維度。
[4343, 23, '圖瓦盧'] // 假如是『氣泡圖』，常見第一維度映射到x軸，
// 第二維度映射到y(tǒng)軸，
// 第三維度映射到氣泡半徑（symbolSize）
]
}在圖表中，往往默認(rèn)把 value 的前一兩個(gè)維度進(jìn)行映射，比如取第一個(gè)維度映射到x軸，取第二個(gè)維度映射到y(tǒng)軸。如果想要把更多的維度展現(xiàn)出來，可以借助 visualMap 。
二、visualMap 組件
visualMap 組件定義了把數(shù)據(jù)的指定維度映射到對(duì)應(yīng)的視覺元素上。
visualMap 組件可以定義多個(gè)，從而可以同時(shí)對(duì)數(shù)據(jù)中的多個(gè)維度進(jìn)行視覺映射。
visualMap 組件可以定義為 分段型（visualMapPiecewise） 或 連續(xù)型（visualMapContinuous），通過 type 來區(qū)分。例如：
option = {
visualMap: [
{ // 第一個(gè) visualMap 組件
type: 'continuous', // 定義為連續(xù)型 visualMap
...
},
{ // 第二個(gè) visualMap 組件
type: 'piecewise', // 定義為分段型 visualMap
...
}
],
...
};分段型視覺映射組件，有三種模式：
- 連續(xù)型數(shù)據(jù)平均分段: 依據(jù) visualMap-piecewise.splitNumber 來自動(dòng)平均分割成若干塊。
- 連續(xù)型數(shù)據(jù)自定義分段: 依據(jù) visualMap-piecewise.pieces 來定義每塊范圍。
- 離散數(shù)據(jù)根據(jù)類別分段: 類別定義在 visualMap-piecewise.categories 中。
分段型視覺映射組件，展現(xiàn)形式如下圖：
實(shí)例
<!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],
"招遠(yuǎn)":[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],
"煙臺(tái)":[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],
"韶關(guān)":[113.62,24.84],
"嘉峪關(guān)":[98.289152,39.77313],
"廣州":[113.23,23.16],
"延安":[109.47,36.6],
"太原":[112.53,37.87],
"清遠(yuǎn)":[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],
"揚(yáng)州":[119.42,32.39],
"常州":[119.95,31.79],
"濰坊":[119.1,36.62],
"重慶":[106.54,29.59],
"臺(tái)州":[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],
"濟(jì)南":[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],
"邢臺(tái)":[114.48,37.05],
"德州":[116.29,37.45],
"濟(jì)寧":[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: '全國主要城市空氣質(zhì)量',
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: "招遠(yuǎn)", 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: "煙臺(tái)", 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: "韶關(guān)", value: 38},
{name: "嘉峪關(guān)", value: 38},
{name: "廣州", value: 38},
{name: "延安", value: 38},
{name: "太原", value: 39},
{name: "清遠(yuǎn)", 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: "揚(yáng)州", value: 64},
{name: "常州", value: 64},
{name: "濰坊", value: 65},
{name: "重慶", value: 66},
{name: "臺(tái)州", 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: "濟(jì)南", 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: "邢臺(tái)", value: 119},
{name: "德州", value: 120},
{name: "濟(jì)寧", 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ù)的指定維度映射到對(duì)應(yīng)的視覺元素上。
實(shí)例 1
option = {
visualMap: [
{
type: 'piecewise'
min: 0,
max: 5000,
dimension: 3, // series.data 的第四個(gè)維度（即 value[3]）被映射
seriesIndex: 4, // 對(duì)第四個(gè)系列進(jìn)行映射。
inRange: { // 選中范圍中的視覺配置
color: ['blue', '#121122', 'red'], // 定義了圖形顏色映射的顏色列表，
// 數(shù)據(jù)最小值映射到'blue'上，
// 最大值映射到'red'上，
// 其余自動(dòng)線性計(jì)算。
symbolSize: [30, 100] // 定義了圖形尺寸的映射范圍，
// 數(shù)據(jù)最小值映射到30上，
// 最大值映射到100上，
// 其余自動(dòng)線性計(jì)算。
},
outOfRange: { // 選中范圍外的視覺配置
symbolSize: [30, 100]
}
},
...
]
};實(shí)例 2
option = {
visualMap: [
{
...,
inRange: { // 選中范圍中的視覺配置
colorLightness: [0.2, 1], // 映射到明暗度上。也就是對(duì)本來的顏色進(jìn)行明暗度處理。
// 本來的顏色可能是從全局色板中選取的顏色，visualMap組件并不關(guān)心。
symbolSize: [30, 100]
},
...
},
...
]
};以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序request請(qǐng)求封裝，驗(yàn)簽代碼實(shí)例
這篇文章主要介紹了微信小程序request請(qǐng)求封裝，驗(yàn)簽代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
前端TypeScript時(shí)間格式化函數(shù)舉例詳解
這篇文章主要介紹了前端TypeScript時(shí)間格式化函數(shù)的相關(guān)資料,包括日期格式化formatDate、獲取周數(shù)getWeek、相對(duì)時(shí)間格式化formatPast、時(shí)間問候語formatAxis以及日期時(shí)間格式化parseTime和parseDate,每個(gè)方法都有詳細(xì)的參數(shù)說明和示例,需要的朋友可以參考下2025-02-02
當(dāng)從bean中取出的值是單引號(hào)時(shí)，加載頁面就會(huì)報(bào)js錯(cuò)?？梢允褂孟旅娴姆椒ń鉀Q。2009-06-06
這篇文章主要給大家總結(jié)介紹了關(guān)于在JS中如何輕松遍歷對(duì)象屬性的方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了標(biāo)準(zhǔn)的js無縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript在網(wǎng)頁中畫圓的函數(shù)arc使用方法
這篇文章主要介紹了JavaScript在網(wǎng)頁中畫圓的函數(shù)arc使用方法的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JavaScript獲取當(dāng)前cpu使用率的方法,涉及JavaScript針對(duì)系統(tǒng)硬件操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
24個(gè)實(shí)用JavaScript?開發(fā)技巧
這篇文章主要給大家分享了24個(gè)實(shí)用JavaScript?的開發(fā)技巧，文章圍繞JavaScript?的開發(fā)技巧講解展開全文，具有一定的參考價(jià)值,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-12-12
最近工作中element后臺(tái)管理使用Echarts圖表,在使用過程中也遇到了些問題,下面這篇文章主要給大家介紹了關(guān)于echart自適應(yīng)寬度的兩種方法,需要的朋友可以參考下2022-12-12
JS/HTML5游戲常用算法之路徑搜索算法 A*尋路算法完整實(shí)例
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 A*尋路算法,結(jié)合完整實(shí)例形式分析了A*尋路算法的具體實(shí)現(xiàn)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2018-12-12