可视化大屏

Student Wang

于 2025-03-11 13:39:55 发布

阅读量869

点赞数 5

文章标签：信息可视化

本文链接：https://blog.youkuaiyun.com/w20041213/article/details/146176927

版权

以下分别以专业软件 Tableau 和代码开发中常用的 ECharts 为例，更详细地介绍创建可视化大屏的步骤：

使用 Tableau 创建

数据连接
- 打开 Tableau 软件，在初始界面或 “数据” 菜单中选择 “连接到数据”，会弹出各种数据来源选项，如文件（Excel、CSV 等）、数据库（MySQL、SQL Server、Oracle 等）、云服务（Salesforce、Google Analytics 等）。
- 若连接文件，直接找到文件路径选中即可；若连接数据库，需输入服务器地址、端口号、数据库名称、用户名、密码等信息来建立连接。连接成功后可在数据源界面查看数据结构和预览数据。
数据处理与清洗
- 在数据预览界面，可通过右键菜单等方式对列进行重命名、删除不需要的列。
- 对于缺失值，可选择删除包含缺失值的行或填充默认值等操作。若数据存在格式问题，如日期格式不正确，可使用 “数据” 菜单中的 “转换数据类型” 功能进行调整。
- 若有多张表，可通过 “数据” 菜单中的 “编辑关系” 功能，根据表之间的关联字段建立关系，如一对一、一对多等关系。
创建图表
- 将维度字段拖放到 “行” 功能区，度量字段拖放到 “列” 功能区，Tableau 会智能生成初步图表，如柱状图、折线图等。
- 若要改变图表类型，可点击 “智能显示” 按钮，选择适合数据展示的图表类型，如散点图、饼图、地图等。
- 将某些字段拖放到 “颜色” 标记卡可根据该字段的值为图表元素上色，拖放到 “大小” 标记卡可调整图表元素大小，拖放到 “形状” 标记卡可改变图表元素形状，从而增加数据展示维度。
布局设计
- 点击 “工作表” 选项卡中的 “新建仪表板” 进入仪表板编辑界面。
- 在仪表板界面，从左侧 “对象” 窗格将创建好的工作表（图表）拖放到仪表板中，可通过鼠标拖拽调整位置和大小。
- 利用 “容器” 功能将相关图表组合在一起，使用 “文本框” 添加标题、注释等说明信息，还可添加 “图像” 来丰富界面。通过 “格式” 菜单对仪表板的字体、颜色、背景等进行统一设置，使界面风格一致。
交互设置
- 点击 “仪表板” 菜单中的 “操作”，选择 “添加操作”，再选择 “筛选器” 操作。
- 选中一个图表作为触发筛选的源图表，设置筛选的字段和条件，然后选择要应用筛选的目标图表。这样当点击源图表中的某个数据点或区域时，目标图表会根据筛选条件更新数据展示。
- 还可设置 “突出显示” 操作，当鼠标悬停在某个图表元素上时，其他相关图表中的对应数据会突出显示，方便用户对比分析。
发布与分享
- 若使用 Tableau Server 或 Tableau Online，点击 “服务器” 菜单中的 “发布工作簿”，按照提示填写发布的相关信息，如工作簿名称、项目名称等，将可视化大屏发布到服务器上。
- 在服务器端设置用户和用户组的访问权限，如只读、可编辑等权限。用户可通过浏览器输入服务器地址和相应路径，登录后访问和查看可视化大屏。若想分享给外部用户，可将可视化大屏导出为 PDF、图片等格式进行分享，但会失去交互功能。

使用 ECharts 和代码创建

创建 HTML 页面
- 在文本编辑器中新建 HTML 文件，输入基本结构代码：

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可视化大屏</title>
</head>

<body>

</body>

</html>

在<head>标签内可添加自定义的 CSS 样式表链接，用于页面整体样式设计。

引入 ECharts 库
- 前往 ECharts 官方网站下载最新版本的 ECharts 库文件，将其放在项目目录下，然后在 HTML 文件的<head>标签或<body>标签结束前添加<script>标签引入：

html

<script src="echarts.min.js"></script>

若使用 CDN 链接引入，可使用以下代码：

html

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

准备数据
- 在 HTML 页面的<script>标签中，使用 JavaScript 定义数据：

javascript

const data = {
    labels: ['苹果', '香蕉', '橙子', '葡萄'],
    values: [120, 80, 150, 100]
};

若从后端获取数据，可使用fetch函数：

javascript

fetch('api/data')
    .then(response => response.json())
    .then(data => {
        // 处理获取到的数据
    });

创建图表容器
- 在 HTML 页面的<body>标签中添加<div>元素：

html

<div id="chartContainer" style="width: 800px; height: 600px;"></div>

可在 CSS 样式表中为该<div>设置更复杂的样式和布局属性，如margin、padding等。

编写 JavaScript 代码创建图表

javascript

// 获取图表容器元素
const chartContainer = document.getElementById('chartContainer');
// 创建ECharts实例
const myChart = echarts.init(chartContainer);
// 定义图表配置项
const option = {
    title: {
        text: '水果销量统计'
    },
    tooltip: {},
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: data.labels
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: data.values
        }
    ]
};
// 设置图表配置项
myChart.setOption(option);

布局与样式调整
- 使用 CSS Flexbox 布局来排列多个图表：

css

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.chart-item {
    width: 45%;
    margin-bottom: 20px;
}

在 HTML 中为每个图表容器添加相应的类名：

html

<div class="container">
    <div class="chart-item">
        <div id="chart1"></div>
    </div>
    <div class="chart-item">
        <div id="chart2"></div>
    </div>
</div>

添加交互功能

javascript

// 为图表添加点击事件
myChart.on('click', function (params) {
    console.log('点击了' + params.name + '，值为' + params.value);
    // 可在此根据点击的内容更新其他图表或执行其他操作
});
// 为图表添加鼠标悬停事件
myChart.on('mouseover', function (params) {
    // 改变图表元素样式等操作
});
myChart.on('mouseout', function (params) {
    // 恢复图表元素样式等操作
});