ECharts 数据的视觉映射学习笔记
一、什么是数据的视觉映射
数据的视觉映射是将数据值映射到可视化元素的视觉属性上，例如颜色、大小、形状等，从而使数据更加生动直观、易于理解。
在ECharts中，我们可以通过配置系列（series）的visualMap选项，来实现对数据的视觉映射。
二、常见的数据的视觉映射方式
1. 颜色映射
颜色映射是最常见的一种数据的视觉映射方式，即将不同的数据值映射到不同的颜色上，使得颜色的不同来表达数据的不同。
ECharts提供了多种颜色映射方式，例如线性映射（piecewise）、对数映射（log）等。
下面是一个线性颜色映射的例子：
javascriptCopy Codeoption = {
visualMap: {
type: 'piecewise', // 显示为分段型
min: 0,
max: 100,
pieces: [
{min: 0, max: 50, color: '#50a3ba'},
{min: 50, max: 80, color: '#eac763'},
{min: 80, max: 100, color: '#d94e5d'}
]
},
series: [{
type: 'heatmap',
data: [
[10, 20, 30],
[20, 30, 40],
[30, 40, 50],
[40, 50, 60],
[50, 60, 70],
[60, 70, 80],
[70, 80, 90],
[80, 90, 100]
]
}]
};
2. 大小映射
大小映射是将不同的数据值映射到不同的大小上，从而通过元素的大小来表达数据的不同。
下面是一个基于气泡图（scatter）的大小映射的例子：
javascriptCopy Codeoption = {
visualMap: {
type: 'continuous', // 显示为连续型
min: 0,
max: 100,
calculable: true,
orient: 'vertical',
top: 'center',
left: 'left',
inRange: {
color: ['#87aa66', '#eba438', '#d94e5d']
}
},
series: [{
type: 'scatter',
symbolSize: function (val) {
return val[2] * 10;
},
data: [
[10, 20, 30],
[20, 30, 40],
[30, 40, 50],
[40, 50, 60],
[50, 60, 70],
[60, 70, 80],
[70, 80, 90],
[80, 90, 100]
]
}]
};
三、实例
下面是一个基于ECharts的数据的视觉映射实例，它展示了美国不同地区的人口密度。
javascriptCopy Codeoption = {
title: {
text: '美国人口密度分布图（2010年）',
subtext: '数据来自 Wikipedia'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (人/km2)'
},
visualMap: {
type: 'piecewise',
min: 0,
max: 600,
left: 'left',
top: 'bottom',
pieces: [
{min: 400, label: '> 400 人/km²', color: '#d94e5d'},
{min: 200, max: 400, label: '200 - 400 人/km²', color: '#eac763'},
{min: 100, max: 200, label: '100 - 200 人/km²', color: '#50a3ba'},
{max: 100, label: '< 100 人/km²', color: '#ffffff'}
]
},
series: [{
name: '美国人口密度',
type: 'map',
mapType: 'usa',
roam: false,
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
areaColor: '#ccc'
}
},
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: 'Alabama', value: 94.65},
{name: 'Alaska', value: 1.264},
{name: 'Arizona', value: 57.10},
{name: 'Arkansas', value: 56.43},
{name: 'California', value: 241.7},
{name: 'Colorado', value: 49.33},
{name: 'Connecticut', value: 739.1},
{name: 'Delaware', value: 464.3},
{name: 'District of Columbia', value: 9904},
{name: 'Florida', value: 353.4},
{name: 'Georgia', value: 140.2},
{name: 'Hawaii', value: 211.8},
{name: 'Idaho', value: 19.15},
{name: 'Illinois', value: 219.1},
{name: 'Indiana', value: 183.5},
{name: 'Iowa', value: 54.81},
{name: 'Kansas', value: 34.28},
{name: 'Kentucky', value: 110.0},
{name: 'Louisiana', value: 104.9},
{name: 'Maine', value: 43.04},
{name: 'Maryland', value: 627.7},
{name: 'Massachusetts', value: 852.1},
{name: 'Michigan', value: 172.0},
{name: 'Minnesota', value: 61.96},
{name: 'Mississippi', value: 63.50},
{name: 'Missouri', value: 87.26},
{name: 'Montana', value: 6.858},
{name: 'Nebraska', value: 23.97},
{name: 'Nevada', value: 24.8},
{name: 'New Hampshire', value: 147.0},
{name: 'New Jersey', value: 1205},
{name: 'New Mexico', value: 17.16},
{name: 'New York', value: 416.4},
{name: 'North Carolina', value: 188.1},
{name: 'North Dakota', value: 9.916},
{name: 'Ohio', value: 281.9},
{name: 'Oklahoma', value: 54.59},
{name: 'Oregon', value: 39.94},
{name: 'Pennsylvania', value: 283.9},
{name: 'Rhode Island', value: 1006},
{name: 'South Carolina', value: 133.3},
{name: 'South Dakota', value: 10.86},
{name: 'Tennessee', value: 153.9},
{name: 'Texas', value: 98.07},
{name: 'Utah', value: 32.01},
{name: 'Vermont', value: 67.73},
{name: 'Virginia', value: 202.6},
{name: 'Washington', value: 34.61},
{name: 'West Virginia', value: 77.06},
{name: 'Wisconsin', value: 65.50},
{name: 'Wyoming', value: 5.851}
]
}]
};
该实例中，我们使用了颜色映射，将不同的人口密度映射到了不同的颜色上，并且通过地图（map）的形式，展示了美国不同地区的人口密度情况。