数据可视化学习总结

数据可视化学习总结

引用

CSDN

1.

https://m.blog.csdn.net/lzzy_wrd_7097/article/details/144648891

1. 数据可视化的重要性

数据可视化技术在当今数字化时代发挥着日益重要的作用。它不仅帮助我们更高效地理解数据背后的信息，还能在决策制定、信息传达以及问题发现与解决等方面提供有力支持。人类大脑对视觉信息的处理速度远远快于对文本或数字的处理。数据可视化能够将海量的数据转化为直观的图形元素，如柱状图、折线图、饼图等，使数据的分布、趋势、关系等特征一目了然。

2. 数据可视化的应用案例

数据可视化技术已经在多个行业中展现了其强大的应用潜力。例如，在医疗行业，通过可视化技术，将复杂的病历数据和检查结果转化为直观的图表，使医生能够轻松识别患者的健康趋势，从而提供更及时和有效的治疗方案。在金融行业，数据可视化被用于分析市场趋势，通过图形化的方式展示股票价格变化、交易量及其他关键指标，帮助投资者做出明智决策。在零售行业，企业利用可视化工具追踪销售数据与消费者行为，形成数据驱动的营销策略，提高客户满意度与销售业绩。

3. 使用ECharts及其配置项绘图

3.1 使用ECharts及其配置项绘图

以下是一个简单的ECharts绘制代码案例：

可以看到需要分两步完成ECharts的图形绘制代码：

（1）创建一个div标记用来充当存放图形的盒子

（2）编写js代码在盒子中生成图形对象，通过配置项传递参数给图形。

3.2 ECharts配置项

上述例子中js代码的变量“option”中设计的一些代码模块我们统称为“配置项”。可以看到每个配置项中还有子配置项，配置项通过这样的树状结构来将各类图形的配置需求整合到各个参数中，我们通过向各个配置项中传递参数来实现各种功能配置。ECharts的配置项非常丰富，涵盖了从图表的基本结构到复杂交互的各个方面。

配置项及其功能：

4. 绘制ECharts基础图形

我们已经了解ECharts绘制图形的基本方法以及ECharts的核心——配置项的使用方法，我们还学习了多种快速学习并上手使用各种配置项的方法。接下来我们将练习并完成各种图形的绘制任务，本节的任务是柱形图、折线图、散点图、饼图等常见图形的绘制及其一些特殊配置的设置。

4.1 柱形图

代码示例

option = {
    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',
        barWidth: '60%', // 指定柱子的宽度
        barCategoryGap: '15%', // 控制柱子之间的默认间隙
        emphasis:{
            focus:'self' // 只聚焦（不淡出）当前高亮的数据的图形。
        }
    }]
};

图片：

4.2 折线图

代码演示：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line',
        smooth: true, // 线条平滑处理
        areaStyle: {} // 开启面积填充
    }]
};

图片效果：

4.3 饼图

基本配置项 基本配置项指定义图形类型、图形数据相关的配置项，具体定义要求如下：

• series.type: 设置为 'pie'。
• series.data: 一个对象数组，每个对象包含两个键值对，name表示分类名称，value表示数值。例如：

特殊配置项 特殊配置项即该图形特有的一些配置选项，我们选择一些常用的进行讲解。

• series.radius: 通过数组来设定控制饼图的内外半径范围，实现环形饼图。
• series.label: 配置标签的显示方式。
• series.label.formatter: 配置标签显示的文字格式，其中{a}代表系列名，{b}代表数据项名称，{c}代表数据值，{d}代表百分比。

代码演示：

option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '70%'], // 设置内外半径，实现环形饼图
        label: {
            formatter: '数量：{c}\n占比：{d}%' // 设置标签的文本格式
        },
        data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
        ]
    }],
    legend: {
        top: '5%',
        left: 'center'
    },
};

图片演示：

4.4 散点图

基本配置项

基本配置项指定义图形类型、图形数据相关的配置项，具体定义要求如下：

• series.type: 设置为 'scatter'。
• series.data: 一个二维数组，每个子数组包含 x 轴和 y 轴的数值。
• xAxis: 不接收数据，只用作坐标轴样式设置，不设置样式时设置为空，即{}。
• yAxis: 不接收数据，只用作坐标轴样式设置，不设置样式时设置为空，即{}。

4.2 特殊配置项

特殊配置项即该图形特有的一些配置选项，我们选择一些常用的进行讲解。

• series.symbolSize: 控制点的大小，可以是固定数值或根据数据动态设置的函数。

代码演示：

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        type: 'scatter',
        symbolSize: 20,
        data: [
            [10, 8],
            [12, 15],
            [15, 12],
            [20, 18]
        ],
    }]
};

图片：

5. 理解数据是前提

在进行数据可视化之前，必须对数据有深入的理解。这包括数据的来源、结构、含义以及可能的偏差。只有充分理解数据，才能设计出准确传达信息的可视化图表。

6. 简洁性与清晰性

一个好的数据可视化图表应该是简洁且清晰的。它应该能够快速传达核心信息，避免过多的装饰性元素干扰观众的注意力。

7. 色彩的使用

色彩是数据可视化中的一个重要元素。合理使用色彩可以帮助区分不同的数据系列，突出重点，但过度使用或不当使用色彩可能会导致信息混淆。

10. 数据隐私和安全性

在进行数据可视化时，尤其是涉及到敏感数据时，必须确保遵守相关的数据隐私和安全法规，保护个人和企业的数据安全。

总结

数据可视化是一门跨学科的技能，它结合了设计、认知心理学、计算机科学等多个领域的知识。通过数据可视化，我们能够更深入地探索数据，发现数据的内在价值，并将其转化为可操作的洞察。随着大数据和人工智能技术的发展，数据可视化的重要性将进一步增加。