大数据可视化相关定义及技术总结
·
目录
文章借鉴声明：该文章借鉴自科大讯飞产教融合部，为本人在课堂上根据教师授课内容及PPT整理的个人笔记。
大数据可视化方法概览
大数据可视化理论基础
大数据可视化是什么？
大数据是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。
可视化是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。本质上是信息的传递。
数据可视化是将数据通过图形、图表、地图或其他视觉元素展示出来的过程，其目的是使数据更易于理解、分析和解释，帮助人们更直观地理解和分析数据背后的信息。
大数据可视化可以理解为数据量更加庞大、结构更加复杂的数据可视化
描述数据可视化的作用。
-
数据可视化让数据更容易被消化：与纯粹的数据对比，更方便来理清数据间的关系。
-
数据可视化让数据动起来：数据可视化可以通过折线图、柱形图等展开动态趋势的变化，让信息展现更加直观。
-
数据可视化让数据可以监测：分析人员通过数据可视化监测数据在某段时间内的变化，对其进行分析、预测和复盘。
-
数据可视化让数据展现深层信息。分析人员可以通过丰富的图表类型和联动、钻取等复杂功能，在数据分析的基础上进行复杂分析。
数据可视化的流程。
数据可视化的流程以数据流向为主线，主要包括数据采集、数据处理和变换、可视化映射以及用户感知四大步骤。
其中数据采集包括用埋点进行APP或Web的内部数据采集和使用网络爬虫的外部数据采集。
数据处理和变换是进行数据可视化的前提条件，主要包括数据处理和数据挖掘，原因是前期采集的数据可能存在离群点、空值重复值、数据不一致（矛盾）等问题。
可视化映射是整个数据可视化流程的核心，是指将处理后的数据信息映射成可视化元素的过程，主要目的是让用户通过可视化结果理解数据及其背后隐含的规律。
用户从数据的可视化结果中进行信息融合和提炼、总结知识及获得灵感。
数据可视化的设计过程。
标准的可视化设计过程，可以分为四个步骤：明确目的、选择图标、视觉设计、突出重点。
明确目的：第一步先问：谁来用、什么场景下用、用来说明什么问题，选什么样的数据比较合适？
视觉设计：需要有合理的布局、合适的配色、好的素材。
突出重点：简明有效的传达数据价值，将想要被关注、应该被关注的内容重点突出。
时间数据可视化
时间数据的分类
-
连续型时间数据：连续性时间数据是在时间轴上两个时间点之间可以细分出多个数值，例如温度变化、股市价格等。可视化方法：折线图、面积图等。
-
离散型时间数据：离散型时间数据是在特定时间点上有数值的，例如每月销售额、年度统计数据等。可视化方法：柱形图、散点图等。
连续型核心代码示例
普通折线图核心代码
<body>
<!--为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width:800px;hight:600px"><div>
<script type="text/javascript">
//基于准备好的DOM初始化ECharts图表
var myChart=echarts.init(document.getElementById("main"));
//指定图标的配置项和数据
var option={
title:{ //配置标题组件
text:"超市销售周营收情况",//设置主标题
textStyle:{ //设置主标题文字样式
color:'green',
},
left:15, //适当调整标题的left位置
top:0 //适当调整标题的topt位置
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:{
type:'category',
data:['Mon','Tue','Wen','Thu','Fri','Sat','Sun']
},
yAxis:{
type:'value'
},
seris:[
{
data:[8200, 9320, 9010, 9340, 12900, 13300, 13200],
type:'line',
smooth:true,
lineStyle:{
color:'red',
}
}
]
};
//使用刚指定的配置项和数据展示图表
myChart.setOption(option);
</script>
</body>
面积图核心代码
<script type="text/javascript">
//基于准备好的DOM初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图标的配置项和数据
var option={
xAxis:{
type:'category',
boundaryGap:false, //设置false使折线图从坐标轴开始
data:['Mon','Tue','Wen','Thu', 'Fri', 'Sat', 'Sun']
},
yAxis:{
type:'value'
},
series:[
{
data:[820, 932, 901, 934, 1290, 1330, 1320],
type:'line',
areaStyle:{} //启用面积图样式
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
阶梯图核心代码
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: { //配置标题组件
text: "风景名胜区门票价格", //设置主标题
textStyle: { //设置主标题文字样式
color: 'red',
},
left: 15, //适当调整标题的lef位置
top: 0 //适当调整标题的topt位置
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['景区A', '景区B', '景区C'],
left: 260, //适当调整工具框的left位置
top: 3 //适当调整工具框的top位置
},
grid: { //配置网格组件
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: { //配置工具箱组件
feature: {
saveAsImage: {}
}
},
xAxis: { //配置X轴坐标系
type: 'category',
data: ['2017年', '2018年', '2019年','2020年', '2021年', '2022年','2023年' ]
},
yAxis: { //配置Y轴坐标系
type: 'value'
},
series: [ //配置数据系列
{
name: '景区A',
type: 'line', //设置指定显示为折线
step: 'start', //设置指定折线的显示样式
data: [120, 140, 120, 160, 250, 280, 240]
},
{
name: '景区B',
type: 'line', //设置指定显示为折线
step: 'middle', //设置指定折线的显示样式
data: [220, 280, 300, 350, 320, 380, 350]
},
{
name: '景区C',
type: 'line', //设置指定显示为折线
step: 'end', //设置指定折线的显示样式
data: [400, 480, 540, 450, 580, 750, 650]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
离散型核心代码示例
普通柱形图核心代码
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: { //配置标题组件
text: "柱状图", //设置主标题
textStyle: { //设置主标题文字样式
color: 'red',
},
left: 45, //适当调整标题的lef位置
top: 0 //适当调整标题的topt位置
},
tooltip: { //配置提示框组件
trigger:'item'
},
toolbox: { //配置工具箱组件
feature: {
saveAsImage: {},
dataView: {
readOnly: false
},
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
普通条形图核心代码
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
title: {
text: '条形图示例',
subtext: '数据展示'
},
tooltip: {
trigger: 'item' // 触发方式为项
},
legend: {
data: ['系列1']
},
xAxis: {
type: 'value' // X 轴为数值轴
},
yAxis: {
type: 'category', // Y 轴为类目轴
data: ['类别1', '类别2', '类别3', '类别4', '类别5'] // 类目数据
},
series: [
{
name: '系列1',
type: 'bar', // 类型为条形图
data: [10, 20, 30, 40, 50], // 条形图数据
itemStyle: {
color: '#3398DB' // 条形颜色
}
}
]
};
// 使用配置项填充图表
myChart.setOption(option);
散点图核心代码
<script type="text/javascript">
//基于准备好的DOM初始化ECharts图表
var myChart=echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option={
title:{ //配置标题组件
text:"散点图",
link:"https://www.baidu.com/",
//target:'self',
textStyle: { //设置主标题文字样式
color: 'blue',
},
left: 15, //适当调整标题的lef位置
top: 0 //适当调整标题的topt位置
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:{},
yAxis:{},
series:[
symbolSize:20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
type:'scatter'
]
};
//使用刚指定的配置项和数据展示图表
myChart.setOption(option);
</script>
比例数据可视化
饼图与环形图
饼图与环形图的区别：
饼图是最常见的一种表示比例数据的方法：一个圆被分割成若干个扇形区域，每个扇形的大小（即圆心角的度数）与其所表示的数据成比例。这些扇形区域通常用不同的颜色来区分，可以直接看出各个部分对于整体的贡献大小。
环形图可以看作饼图的一种变体：饼图中间区域挖空。
应用场景：展现数据的分类和占比情况。相比饼图可以通过不同的环来展示多个层次的数据。此外空间利用率高，可以把重要数据放在中间。
饼图核心代码示例
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: {
text: '网站推荐',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
toolbox: { //配置工具箱组件
feature: {
saveAsImage: {}
}
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
环形图核心代码示例
环形图相比饼图要尤其注意type，数据，以及半径（内外半径）的配置（series中的radius配置）
var option = {
title: {
text: '环形图',
left: 'left', // 标题位置
textStyle: {
color: '#333',
fontSize: 16,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'item', // 触发类型，item表示数据项触发
formatter: '{b} {c} {d}%' // 格式化显示内容
},
legend: {
orient: 'horizontal', // 图例的排列方向，横向排列
top: 'top', // 图例位置
data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads'] // 图例数据
},
series: [
{
name: '访问来源', // 系列名称，用于 tooltip 的显示
type: 'pie', // 图表类型为饼图
radius: ['30%', '70%'], // 内半径和外半径，形成环形图
avoidLabelOverlap: false, // 防止标签重叠
itemStyle: {
borderRadius: 10, // 边角圆角半径
borderColor: '#fff', // 边框颜色
borderWidth: 2 // 边框宽度
},
label: {
show: false, // 不显示标签
position: 'center' // 标签显示在中心位置
},
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold'
}
},
labelLine: {
show: false // 不显示标签的视觉引导线
},
data: [
{ value: 1048, name: 'Search Engine' }, // 数据项，表示各部分的数值和名称
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
玫瑰图核心代码示例⭐
玫瑰图有2种，在代码中关键在于roseType的配置
如果不配置roseType就是饼图
roseType: 'radius'时，就是按半径的玫瑰图，每个扇形圆心角和半径都不同，以半径表示占比
roseType: 'area'时，圆心角相同，半径和面积不同，以面积表示占比
<body>
<!-- 三个展示图表的容器 -->
<div id="chart-default" style="width: 400px; height: 300px; display: inline-block;"></div>
<div id="chart-radius" style="width: 400px; height: 300px; display: inline-block;"></div>
<div id="chart-area" style="width: 400px; height: 300px; display: inline-block;"></div>
<script>
// 数据配置
var data = [
{ value: 10, name: '类别1' },
{ value: 20, name: '类别2' },
{ value: 30, name: '类别3' },
{ value: 40, name: '类别4' },
{ value: 50, name: '类别5' }
];
// 默认饼图配置
var optionDefault = {
title: {
text: '默认饼图',
left: 'center'
},
series: [
{
type: 'pie',
data: data
}
]
};
// 按半径大小的玫瑰图
var optionRadius = {
title: {
text: '玫瑰图 (半径)',
left: 'center'
},
series: [
{
type: 'pie',
roseType: 'radius',
data: data
}
]
};
// 按面积大小的玫瑰图
var optionArea = {
title: {
text: '玫瑰图 (面积)',
left: 'center'
},
series: [
{
type: 'pie',
roseType: 'area',
data: data
}
]
};
// 初始化 ECharts 实例
var chartDefault = echarts.init(document.getElementById('chart-default'));
var chartRadius = echarts.init(document.getElementById('chart-radius'));
var chartArea = echarts.init(document.getElementById('chart-area'));
// 设置配置项
chartDefault.setOption(optionDefault);
chartRadius.setOption(optionRadius);
chartArea.setOption(optionArea);
</script>
</body>
矩形树图核心代码示例
// 矩形树图的数据
var data = [
{
name: '分类A',
value: 10,
children: [
{ name: '子分类A1', value: 4 },
{ name: '子分类A2', value: 6 }
]
},
{
name: '分类B',
value: 20,
children: [
{ name: '子分类B1', value: 8 },
{ name: '子分类B2', value: 12 }
]
},
{
name: '分类C',
value: 30,
children: [
{ name: '子分类C1', value: 14 },
{ name: '子分类C2', value: 16 }
]
}
]
// 计算总数
var total = data.reduce(function (sum, item) {
return sum + item.value;
}, 0)
// 配置项
var option = {
title: {
text: '矩形树图示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: function(params) {
var percentage = ((params.value / total) * 100).toFixed(2); // 计算占比
return `${params.name}<br/>数值: ${params.value}<br/>占比: ${percentage}%`;
}
},
series: [
{
type: 'treemap',
data: data,
label: {
show: true,
formatter: function(params) {
var percentage = ((params.value / total) * 100).toFixed(2); // 计算占比
return `${params.name}\n数值: ${params.value}\n占比: ${percentage}%`;
},
textStyle: {
fontSize: 14,
fontWeight: 'bold'
}
},
itemStyle: {
borderColor: '#fff', // 设置矩形边框颜色
borderWidth: 2
},
levels: [
{
itemStyle: {
borderWidth: 2,
gapWidth: 2
}
}
]
}
]
};
百分比堆积条形图
时空比例数据
其实就是加了一个时间维度
关系数据可视化
数据的关联性
散点图核心代码示例
// 配置图表的选项
var option = {
title: {
text: 'Scatter Plot - Data Correlation' // 图表标题
},
tooltip: {
trigger: 'item', // 鼠标悬浮时触发提示框
formatter: function (params) {
// 自定义提示框内容，显示数据点的X和Y值
return `x: ${params.value[0]}<br>y: ${params.value[1]}`;
}
},
xAxis: {
name: 'X Axis', // X轴的名称
type: 'value' // 轴类型为数值型
},
yAxis: {
name: 'Y Axis', // Y轴的名称
type: 'value' // 轴类型为数值型
},
series: [{
name: 'Scatter Points', // 系列名称
type: 'scatter', // 图表类型为散点图
data: [
// 数据点，每个点是一个[x, y]形式的数组
[10, 8], [15, 20], [30, 24], [50, 30], [60, 40],
[70, 50], [80, 55], [90, 60], [100, 70], [110, 80]
],
symbolSize: 20, // 数据点的大小
itemStyle: {
color: '#3498db' // 数据点的颜色（浅蓝色）
}
}]
};
气泡图核心代码示例
气泡图的data前两个是x,y
后面是value是体现气泡大小的
<script>
// 初始化ECharts实例
var chart = echarts.init(document.getElementById('bubble-chart'));
// 模拟数据集，每个数据点为 [x, y, z]，其中 z 决定气泡的大小
var data = [
[10, 10, 15], // x = 10, y = 10, z = 15 (气泡大小)
[20, 30, 20],
[30, 40, 25],
[40, 20, 10],
[50, 50, 30],
[60, 70, 40],
[70, 80, 20],
[80, 60, 35],
[90, 90, 45]
];
// 配置选项
var option = {
title: {
text: 'Bubble Chart - Data Visualization',
left: 'center'
},
tooltip: {
trigger: 'item', // 鼠标悬浮时显示提示框
formatter: function (params) {
return `X: ${params.value[0]}<br>Y: ${params.value[1]}<br>Size: ${params.value[2]}`;
}
},
xAxis: {
name: 'X Axis',
type: 'value', // 轴类型为数值型
min: 0, // X轴的最小值
max: 100 // X轴的最大值
},
yAxis: {
name: 'Y Axis',
type: 'value', // 轴类型为数值型
min: 0, // Y轴的最小值
max: 100 // Y轴的最大值
},
series: [{
name: 'Bubble Data',
type: 'scatter', // 使用scatter类型绘制气泡图
data: data,
symbolSize: function (data) {
return data[2]; // 使用z值作为气泡大小
},
itemStyle: {
opacity: 0.8, // 设置气泡透明度
color: '#3498db' // 设置气泡的颜色
}
}]
};
// 使用配置项和数据展示图表
chart.setOption(option);
</script>
散点矩阵
相比散点图多出来的就是
xAxis[{grid:,type:name:}]
data:data.map(item=>[item[0],item[1]])
grid:[{x:,y:,width:,height}]数据的分布性
直方图：
形状类似柱状图。首先要对数据进行分组，然后统计每个分组内数据的数量。
直方图不等于柱状图，不能对分类的数据进行比较。
密度图：
又称密度曲线图，显示数据的连续分布，可以看成是直方图的变体，使用平滑曲线绘制数据。相比直方图，不受所使用分组数量的影响，能更好的界定分布情况。
箱型图：
又称盒须图、盒式图或箱线图，是一种用于显示一组连续型数据分布情况的统计图。使用箱型图分析各科成绩分布：
热力图：
通过色块颜色深浅变化来显示数据的分布。适合用于查看总体的分布情况、发现异常值、显示多个变量之间的差异，以及检测它们之间是否存在任何相关性。
文本数据可视化
词云与文档散
词云也叫标签云，是对文本中出现频率较高的"关键词"予以视觉化的展现，词云图可以过滤掉大量的低频低质的文本信息。常用于产品排名、热点问题或舆情监测等等。
词云的特点：
1.自动提取高频词
2.呈现高频词
3.字体大小体现单词出现的次数
文档散是一种基于树状结构的可视化方法，用于展示文本中词汇的语义关系和层次结构。使用词汇库中的结构关系和词语关系网中具有上下语义关系的词语来布局关键词，从而揭示文本内容。
文档散特点：
1.将一个单词作为中心点（可由用户指定），选择不同的中心点词汇呈现出的可视化结果不同。
2.将整个文章的词语呈现在一个放射式层次圆环中，外层词是内层词的下义词。这样可以直观的展示文档的中心词在词语关系网中如何被呈现。
与词云的区别：
引入了语义信息，用于展现文本中词汇的语义关系和层次结构，是文本内容呈现更具逻辑性。
时序文本与主题河流图
在表示各地区人员流动情况时，可以用主题河流图进行清晰的展示。
词云核心代码示例
<div id="wordcloud"></div>
<script>
// 初始化ECharts实例
var chart = echarts.init(document.getElementById('wordcloud'));
// 准备词云图的数据
var data = [
{name: 'Big Data', value: 10000},
{name: 'Machine Learning', value: 6181},
{name: 'AI', value: 4386},
{name: 'Python', value: 4055},
{name: 'Java', value: 2467},
{name: 'Cloud Computing', value: 2244},
{name: 'Deep Learning', value: 1898},
{name: 'Data Science', value: 1484},
{name: 'ECharts', value: 1112},
{name: 'Visualization', value: 965},
{name: 'JavaScript', value: 847},
{name: 'Neural Networks', value: 582},
{name: 'Hadoop', value: 555},
{name: 'Spark', value: 550},
{name: 'TensorFlow', value: 462},
{name: 'Analytics', value: 366},
{name: 'IoT', value: 360},
{name: '5G', value: 282},
{name: 'Blockchain', value: 273}
];
// 配置词云图选项
var option = {
title: {
text: 'Tech Buzzwords Word Cloud',
left: 'center'
},
tooltip: {
show: true
},
series: [{
type: 'wordCloud',
sizeRange: [10, 100], // 文字大小范围
rotationRange: [-90, 90], // 文字旋转范围
shape: 'circle', // 词云的形状, diamond, triangle
textStyle: {
normal: {
color: function() {
// 随机颜色
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
}
},
data: data // 使用的数据
}]
};
// 设置配置项并显示词云图
chart.setOption(option);
</script>
主题河流图核心代码示例
<div id="themeriver"></div>
<script>
var chart = echarts.init(document.getElementById('themeriver'));
var data = [
['2015/11/08', 10, 'DQ'],
['2015/11/09', 15, 'DQ'],
['2015/11/10', 35, 'DQ'],
['2015/11/14', 7, 'DQ'],
['2015/11/15', 2, 'DQ'],
['2015/11/16', 17, 'DQ'],
['2015/11/08', 10, 'TY'],
['2015/11/09', 10, 'TY'],
['2015/11/10', 31, 'TY'],
['2015/11/14', 4, 'TY'],
['2015/11/15', 4, 'TY'],
['2015/11/16', 6, 'TY'],
['2015/11/08', 10, 'SS'],
['2015/11/09', 15, 'SS'],
['2015/11/10', 20, 'SS'],
['2015/11/14', 5, 'SS'],
['2015/11/15', 4, 'SS'],
['2015/11/16', 7, 'SS'],
['2015/11/08', 10, 'QG'],
['2015/11/09', 25, 'QG'],
['2015/11/10', 23, 'QG'],
['2015/11/14', 12, 'QG'],
['2015/11/15', 6, 'QG'],
['2015/11/16', 23, 'QG']
];
var option = {
title: {
text: 'ThemeRiver Example'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['DQ', 'TY', 'SS', 'QG']
},
singleAxis: {
top: 50,
bottom: 50,
axisPointer: {
animation: true,
label: {
show: true
}
},
type: 'time',
axisLabel: {
formatter: function (value) {
return echarts.format.formatTime('yyyy-MM-dd', value);
}
}
},
series: [
{
type: 'themeRiver',
data: data,
label: {
show: false
}
}
]
};
chart.setOption(option);
</script>
复杂数据可视化
高维多元数据
空间映射法
散点图
对于二维和三维数据可以采用常规的可视化方法：
将各属性的值映射到不同的坐标轴，并确定数据点在坐标系中的位置，这样的可视化设计通常被称为散点图。
当数据超过三维后，除x,y轴外，还可以通过视觉编码表示其他维度的数据，如气泡大小、气泡颜色、气泡透明度、气泡形状等。需要注意可读性和清晰性。
三维以上的数据可视化示例：
平行坐标核心代码示例
<script>
// 数据
const data = [
[1.0, 0.1, 0.5, 0.2],
[0.8, 0.3, 0.4, 0.4],
[0.7, 0.5, 0.6, 0.5],
[0.5, 0.4, 0.7, 0.3],
[0.4, 0.6, 0.8, 0.4],
[0.3, 0.9, 0.1, 0.7]
];
// ECharts 实例
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
title: {
text: '平行坐标图示例'
},
parallelAxis: [
{ dim: 0, name: '维度1' },
{ dim: 1, name: '维度2' },
{ dim: 2, name: '维度3' },
{ dim: 3, name: '维度4' }
],
visualMap: {
type: 'continuous',
dimension: 0,
min: 0,
max: 1,
inRange: {
color: ['#d94e5d', '#eac736', '#50a3ba']
},
outOfRange: {
color: ['#ccc']
}
},
series: [
{
type: 'parallel',
data: data,
lineStyle: {
width: 2,
opacity: 0.5
}
}
]
};
myChart.setOption(option);
</script>
图标法
雷达图
图标法是一种降维的方法，其典型代表是星型图，也称雷达图。
-
优点：适合展现某个数据集的多个属性或多个属性对比，适合比较多条数据在多个维度上的取值。
-
缺点：雷达图包含的多边形数量有限，比较的数据条数不宜太多；虽然有网格线的参考，但径向的距离还是很难判断，难以直观的比较图标内具体的值。
雷达图核心代码示例：
各个数据＋对应的名字，都要表现出来，多了一个配置项。
const data在雷达图中起到数据分离的作用
<script>
// ECharts 实例
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
// 数据
const data = {
indicators: [
{ name: '销售', max: 100 },
{ name: '管理', max: 100 },
{ name: '技术', max: 100 },
{ name: '客户服务', max: 100 },
{ name: '市场', max: 100 }
],
series: [
{
name: '团队A',
value: [90, 80, 70, 85, 95]
},
{
name: '团队B',
value: [60, 70, 80, 75, 65]
}
]
};
const option = {
title: {
text: '雷达图示例'
},
tooltip: {
trigger: 'item'
},
legend: {
data: data.series.map(item => item.name)
},
radar: {
indicator: data.indicators,
shape: 'circle',
splitNumber: 5,
name: {
textStyle: {
color: '#333',
backgroundColor: '#fff',
borderRadius: 3,
padding: [3, 5]
}
},
splitLine: {
lineStyle: {
width: 1,
color: ['#ddd']
}
},
splitArea: {
areaStyle: {
color: ['rgba(255, 255, 255, 0.5)', 'rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.1)']
}
}
},
series: [
{
type: 'radar',
data: data.series,
areaStyle: {
normal: {}
},
itemStyle: {
normal: {
lineStyle: {
width: 2
}
}
}
}
]
};
myChart.setOption(option);
</script>
非结构化数据
复杂数据并不只有高维数据，还有异构数据。
异构数据是指在同一个数据集中存在的如结构或者属性不同的数据。存在多个不同种类节点和连接的网络被称为异构网络。异构数据通常可采用网络结构进行表达。
产生异构数据的主要原因是因为数据源的获取方式不同。这些来自不同数据源的数据通常具有不同的数据模型、数据类型和命名方法等。
异构数据可视化设计是指将来自不同源头、格式和结构的数据，经过整合和转换，以图形化的方式呈现出来，以便于用户理解和分析。其核心在于数据整合、数据清洗、数据转换、图形化展示。
其中数据整合是关键，它涉及从多个异构数据源提取数据，并将其统一到一个兼容的格式。通过这种方式可以克服数据孤岛问题，实现数据的统一管理和分析。
地图代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>香港人口密度可视化</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#main {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
$(document).ready(function() {
// ECharts 实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 加载本地的 HK.json 文件
$.getJSON('geo/HK.json', function(geoJson) {
echarts.registerMap('HK', geoJson); // 注册地图
myChart.setOption({
title: {
text: '香港人口密度',
subtext: '数据来源: Wikipedia',
sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (人 / km²)'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 800,
max: 50000,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{
name: '香港18区人口密度',
type: 'map',
map: 'HK', // 使用注册的地图
label: {
show: true
},
data: [
{ name: '中西区', value: 20057.34 },
{ name: '湾仔', value: 15477.48 },
{ name: '东区', value: 31686.1 },
{ name: '南区', value: 6992.6 },
{ name: '油尖旺', value: 44045.49 },
{ name: '深水埗', value: 40689.64 },
{ name: '九龙城', value: 37659.78 },
{ name: '黄大仙', value: 45180.97 },
{ name: '观塘', value: 55204.26 },
{ name: '葵青', value: 21900.9 },
{ name: '荃湾', value: 4918.26 },
{ name: '屯门', value: 5881.84 },
{ name: '元朗', value: 4178.01 },
{ name: '北区', value: 2227.92 },
{ name: '大埔', value: 2180.98 },
{ name: '沙田', value: 9172.94 },
{ name: '西贡', value: 3368 },
{ name: '离岛', value: 806.98 }
],
nameMap: {
'Central and Western': '中西区',
Eastern: '东区',
Islands: '离岛',
'Kowloon City': '九龙城',
'Kwai Tsing': '葵青',
'Kwun Tong': '观塘',
North: '北区',
'Sai Kung': '西贡',
'Sha Tin': '沙田',
'Sham Shui Po': '深水埗',
Southern: '南区',
'Tai Po': '大埔',
'Tsuen Wan': '荃湾',
'Tuen Mun': '屯门',
'Wan Chai': '湾仔',
'Wong Tai Sin': '黄大仙',
'Yau Tsim Mong': '油尖旺',
'Yuen Long': '元朗'
}
}
]
});
}).fail(function() {
console.error('Error loading the HK.json data.');
});
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国地图人口可视化</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> -->
<script src="js/china.js"></script>
<style>
#main {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
// ECharts 实例
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
// 人口数据（省份：人口）
const populationData = [
{ name: '北京', value: 2154 },
{ name: '天津', value: 1560 },
{ name: '上海', value: 2418 },
{ name: '重庆', value: 3102 },
{ name: '河北', value: 7556 },
{ name: '河南', value: 9605 },
{ name: '云南', value: 4830 },
{ name: '辽宁', value: 4359 },
{ name: '吉林', value: 2700 },
{ name: '黑龙江', value: 3800 },
{ name: '江苏', value: 8050 },
{ name: '浙江', value: 5737 },
{ name: '安徽', value: 6300 },
{ name: '福建', value: 3941 },
{ name: '湖北', value: 5917 },
{ name: '湖南', value: 6899 },
{ name: '广东', value: 12676 },
{ name: '海南', value: 934 },
{ name: '四川', value: 8303 },
{ name: '贵州', value: 3600 },
{ name: '陕西', value: 3860 },
{ name: '甘肃', value: 2625 },
{ name: '青海', value: 603 },
{ name: '宁夏', value: 688 },
{ name: '新疆', value: 2486 },
{ name: '西藏', value: 370 },
{ name: '内蒙古', value: 2534 },
{ name: '广西', value: 4900 },
{ name: '澳门', value: 68 },
{ name: '香港', value: 748 },
{ name: '台湾', value: 2360 }
];
const option = {
title: {
text: '中国各省人口分布',
subtext: '数据来源: 国家统计局',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}万人'
},
visualMap: {
min: 0,
max: 13000, // 根据最大人口设置范围
left: 'right',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#e0f3ff', '#2ca25f']
}
},
series: [
{
name: '人口',
type: 'map',
map: 'china',
roam: false,
label: {
show: true // 显示省份名称
},
data: populationData
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
更多推荐
19
0- 0
已为社区贡献3条内容
所有评论(0)