Element UI中常用的数据可视化组件介绍

# 1. 引言

## 1.1 介绍数据可视化在Web应用中的重要性

数据可视化是将数据通过图表、图像和其他可视化方式呈现出来，以便帮助人们更好地理解和分析数据。在Web应用中，数据可视化扮演着重要的角色。通过可视化数据，用户可以更直观地了解数据的趋势、关联性和变化。这有助于决策者更好地理解业务情况、发现问题和优化策略。

## 1.2 Element UI简介和概述

Element UI是一套基于Vue.js框架的UI组件库，它提供了丰富的UI组件和交互效果，方便开发者快速构建出美观、易用的Web应用。Element UI具有良好的可定制性和扩展性，可以满足不同项目的需求。

在数据可视化方面，Element UI提供了一系列适用于图表、表格、对话框以及其他常见组件的功能和样式。通过使用Element UI的组件，开发者可以轻松地将数据可视化功能集成到自己的Web应用中，并通过丰富的配置选项来实现自定义的需求。下面我们将介绍一些Element UI常用的数据可视化组件和功能。

# 2. 图表组件

数据可视化在Web应用中起着至关重要的作用，能够直观地展示数据，帮助用户快速理解和分析信息。Element UI作为一套基于Vue.js的组件库，提供了丰富的图表组件，可以帮助开发者快速构建具有吸引力和可交互性的数据可视化界面。

### 2.1 折线图(Line Chart)

折线图是一种常见的图表类型，用于展示数据随时间或其他连续变量的变化趋势。在Element UI中，可以使用`<el-chart>`组件来创建折线图，通过提供数据和配置项，即可实现一个简单而直观的折线图展示。

# Python 示例
import matplotlib.pyplot as plt

x = [1, 2, 3, 4, 5]
y = [5, 7, 3, 8, 4]

plt.plot(x, y)
plt.xlabel('X轴标签')
plt.ylabel('Y轴标签')
plt.title('折线图示例')
plt.show()

上述代码使用Python中的matplotlib库绘制了一个简单的折线图，通过传入数据x和y，并设置标签和标题，最终展示了一个基本的折线图。

### 2.2 饼图(Pie Chart)

饼图是用于展示数据占比情况的图表类型，通常用于展示各部分占总体的比例。在Element UI中，可以使用`<el-chart>`组件创建饼图，只需提供数据和相应的配置项，即可实现饼图的展示。

// Java 示例
import org.knowm.xchart.PieChart;
import org.knowm.xchart.SwingWrapper;

public class PieChartExample {
    public static void main(String[] args) {
        PieChart chart = new PieChart();

        chart.addSeries("A", 40);
        chart.addSeries("B", 30);
        chart.addSeries("C", 20);
        chart.addSeries("D", 10);

        new SwingWrapper<>(chart).displayChart();
    }
}

上述Java示例使用XChart库创建了一个简单的饼图，通过添加不同系列的数据，即可实现各部分占比的展示。

### 2.3 柱状图(Bar Chart)

柱状图常用于比较不同类别数据的大小或变化趋势，是一种常见且直观的数据可视化形式。在Element UI中，可以利用`<el-chart>`组件创建柱状图，通过传入数据和设定相应配置，即可实现柱状图的展示。

// JavaScript 示例
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    this.renderChart({
      labels: ['A', 'B', 'C', 'D'],
      datasets: [
        {
          label: '数据集',
          backgroundColor: '#f87979',
          data: [40, 30, 20, 10]
        }
      ]
    }, { responsive: true, maintainAspectRatio: false })
  }
}

上述JavaScript示例使用了Vue Chart.js库创建了一个简单的柱状图，通过传入标签和数据集的方式，即可展示柱状图的视觉效果。

### 2.4 散点图(Scatter Chart)

散点图通常用于展示两个变量之间的关系或趋势，可帮助分析数据的相关性。在Element UI中，可以利用`<el-chart>`组件创建散点图，通过传入数据和相应的配置，即可展示数据的分布情况。

// Go 示例
import (
	"github.com/go-echarts/go-echarts/v2/charts"
	"log"
)

func main() {
	scatter := charts.NewScatter()
	scatter.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
		Title:    "散点图示例",
		Subtitle: "展示数据分布",
	}))

	scatter.AddXAxis(xData).
		AddYAxis("A", yData)

	f, err := os.Create("scatter.html")
	if err != nil {
		log.Println(err)
	}
	scatter.Render(f)
}

以上Go示例使用Go-ECharts库创建了一个简单的散点图，通过传入x轴和y轴的数据，并设置相应的标题，即可生成一个散点图的展示界面。

通过以上图表组件的介绍，我们可以看到Element UI提供了丰富而强大的图表组件，开发者可根据实际需求选择合适的图表类型，快速构建出具有可视化魅力的数据展示界面。

# 3. 表格组件
数据可视化不仅局限于图表展示，表格也是非常重要的一种数据展示方式，在Web应用中，使用表格组件可以直观地展示大量的数据，使用户快速浏览和理解数据信息。Element UI提供了丰富的表格组件，包括基本表格、表格分页、表格排序、表头固定等功能，下面我们将逐一介绍这些表格组件的使用方法。

#### 3.1 基本表格(Table)
基本表格是表格组件中最常用的一种，它可以展示简单的数据列表，并且支持自定义表头和行内容。以下是基本表格的使用示例：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2019-06-01',
          name: '张三',
          address: '北京市'
        }, {
          date: '2019-06-02',
          name: '李四',
          address: '上海市'
        }]
      };
    }
  };
</script>

在上面的示例中，我们使用了`<el-table>`和`<el-table-column>`来创建了一个简单的基本表格，`:data`绑定了表格的数据源，`prop`指定了数据源中对应的字段，`label`设置了表头的显示文本。

#### 3.2 表格分页(Pagination)
当需要展示大量数据时，通常会使用分页功能来提高用户体验。Element UI的表格组件提供了内置的分页功能，只需简单配置即可实现分页效果。

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <!-- 表格列配置 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [], // 表格数据
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示条数
      };
    },
    methods: {
      // 页码改变时的回调
      handleCurrentChange(val) {
        this.currentPage = val;
        // 请求对应页数的数据
        this.fetchData();
      },
      // 每页条数改变时的回调
      handleSizeChange(val) {
        this.pageSize = val;
        // 请求对应页数的数据
        this.fetchData();
      },
      // 根据当前页数和每页条数获取数据
      fetchData() {
        // 发送请求获取数据
        // 模拟请求
        setTimeout(() => {
          // 更新表格数据
          this.tableData = Array.from({ length: this.pageSize }, (_, i) => ({
            id: (this.currentPage - 1) * this.pageSize + i + 1,
            name: `数据${(this.currentPage - 1) * this.pageSize + i + 1}`,
            other: `其他信息${(this.currentPage - 1) * this.pageSize + i + 1}`
          }));
        }, 500);
      }
    },
    mounted() {
      // 初始化时获取第一页数据
      this.fetchData();
    }
  };
</script>

在以上示例中，我们使用了`<el-pagination>`组件来实现分页功能，通过绑定对应的事件和配置项，实现了数据分页的交互效果。

#### 3.3 表格排序(Sorting)
表格排序是展示数据时常用的功能之一，通过点击表头可以实现升序和降序的排序。Element UI的表格组件提供了内置的排序功能，只需要配置相应的属性即可实现表格排序。

<template>
  <div>
    <el-table
      :data="tableData"
      :default-sort="{prop: 'date', order: 'ascending'}"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        sortable>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        sortable>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [] // 表格数据
      };
    },
    created() {
      // 请求初始数据
      this.fetchData();
    },
    methods: {
      fetchData() {
        // 发送请求获取数据
        // 模拟请求
        setTimeout(() => {
          this.tableData = [{
            date: '2019-06-01',
            name: '张三',
            address: '北京市'
          }, {
            date: '2019-06-02',
            name: '李四',
            address: '上海市'
          }];
        }, 500);
      }
    }
  };
</script>

在上面的示例中，我们使用了`sortable`属性来设置列是否可排序，通过设置`default-sort`属性来指定默认的排序字段和顺序。

#### 3.4 表头固定(Sticky Header)
当表格数据较多时，为了方便用户浏览，往往会将表格的表头固定在顶部，Element UI的表格组件也提供了表头固定的功能。

<template>
  <div>
    <el-table
      :data="tableData"
      height="300"
      :header-cell-style="{position: 'sticky', top: '0'}"
      style="width: 100%">
      <!-- 表格列配置 -->
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [] // 表格数据
      };
    },
    created() {
      // 请求初始数据
      this.fetchData();
    },
    methods: {
      fetchData() {
        // 发送请求获取数据
        // 模拟请求
        setTimeout(() => {
          this.tableData = [...]; // 设置表格数据
        }, 500);
      }
    }
  };
</script>

在上面的示例中，我们通过设置表格的高度和`header-cell-style`来实现表头固定在顶部的效果，用户可以在滚动表格时保持表头的可见性。

# 4. 确定组件

在Web应用中，除了图表和表格组件外，确定组件也是非常重要的一部分，它们可以帮助用户更好地理解信息和进行交互操作。Element UI提供了丰富多样的确定组件，下面我们来逐一介绍它们。

#### 4.1 提示框(Tooltip)

提示框组件可以在鼠标悬停或点击某个元素时显示相应的提示信息，帮助用户理解元素的含义或提供进一步的说明。

<template>
  <div>
    <el-tooltip content="这是一个提示" placement="top">
      <el-button>上方提示</el-button>
    </el-tooltip>
    <el-tooltip content="这是一个提示" placement="right">
      <el-button>右侧提示</el-button>
    </el-tooltip>
    <el-tooltip content="这是一个提示" placement="bottom">
      <el-button>下方提示</el-button>
    </el-tooltip>
    <el-tooltip content="这是一个提示" placement="left">
      <el-button>左侧提示</el-button>
    </el-tooltip>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        content: '这是一个提示'
      };
    }
  }
</script>

**代码解释：** 上面的代码是一个基本的提示框示例，通过`el-tooltip`组件和`content`属性设置提示内容，`placement`属性设置提示框出现的位置。

**结果说明：** 当鼠标悬停或点击相应按钮时，会弹出对应位置的提示框，显示设置的提示内容。

#### 4.2 气泡框(Popover)

气泡框组件类似于提示框，但能够显示更复杂的内容，如文字、图片、链接等，能够提供更丰富的信息展示。

<template>
  <div>
    <el-popover
      title="气泡框标题"
      width="200"
      trigger="hover"
      content="这是一个气泡框，可以显示更多的内容，支持文字、图片、链接等。"
    >
      <el-button>悬停触发</el-button>
    </el-popover>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '气泡框标题',
        content: '这是一个气泡框，可以显示更多的内容，支持文字、图片、链接等。'
      };
    }
  }
</script>

**代码解释：** 上面的代码是一个基本的气泡框示例，通过`el-popover`组件设置气泡框的标题、宽度、触发方式以及内容。

**结果说明：** 当鼠标悬停在按钮上时，会弹出一个气泡框，显示设置的标题和内容。

#### 4.3 弹出框(Dialog)

弹出框组件可以在需要时弹出一个模态对话框，常用于确认操作、表单填写、消息提示等。

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <p>这是一个弹出框</p>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确定关闭弹出框吗？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

**代码解释：** 上面的代码演示了如何使用`el-dialog`组件创建一个弹出框，通过`visible.sync`实现对话框的显示与隐藏控制，并且可以在关闭对话框前进行确认操作。

**结果说明：** 点击“打开对话框”按钮时，会弹出一个包含提示信息的对话框，点击关闭按钮或遮罩层以外的区域，会触发确认关闭操作。

#### 4.4 消息框(Message Box)

消息框组件可以在页面中弹出消息提示，包括成功、警告、错误等不同类型的消息。

this.$alert('这是一条消息提示', '标题', {
  confirmButtonText: '确定',
  callback: action => {}
});

**代码解释：** 上面的代码演示了如何使用`this.$alert`方法创建一条消息提示框，设置了消息内容、标题和确认按钮的文字，以及确认后的回调函数。

**结果说明：** 当调用`this.$alert`方法时，会弹出一个包含设置内容和标题的消息提示框，用户点击确认按钮后会执行回调函数。

以上就是Element UI中的确定组件介绍，它们可以帮助我们在Web应用中实现丰富的提示、交互和消息提示功能。

# 5. 进度组件

在Web应用中，进度组件可以用于展示任务的完成进度或者操作的执行状态。Element UI提供了多种进度组件，方便开发人员根据实际需求进行选择和使用。

### 5.1 进度条(Progress)

进度条组件可以展示任务的完成进度，适用于展示单个任务或操作的完成状态。

<template>
  <div>
    <el-progress :percentage="50"></el-progress>
  </div>
</template>

public class ProgressDemo {
  public static void main(String[] args) {
    System.out.println("Progress Demo");
    System.out.println("------------------------");
    System.out.println("Progress: 50%");
  }
}

percentage = 50
print(f"Progress: {percentage}%")

package main

import "fmt"

func main() {
	percentage := 50
	fmt.Printf("Progress: %d%%\n", percentage)
}

代码解释：
- 通过设置`percentage`属性的值来指定进度条的百分比，可以是一个整数或者平分数。
- 代码中展示了使用Vue、Java、Python和Go语言分别实现进度条组件的例子。

代码总结：
进度条组件可以用于展示进度的完成状态，提供了简单的API用于设置进度的百分比。

结果说明：
以上代码将展示一个进度条，进度为50%。

### 5.2 步骤条(Steps)

步骤条组件可以展示任务或操作的多个步骤，适用于展示多个步骤的执行状态。

<template>
  <div>
    <el-steps :active="2">
      <el-step title="Step 1"></el-step>
      <el-step title="Step 2"></el-step>
      <el-step title="Step 3"></el-step>
    </el-steps>
  </div>
</template>

public class StepsDemo {
  public static void main(String[] args) {
    System.out.println("Steps Demo");
    System.out.println("------------------------");
    System.out.println("Step 1");
    System.out.println("Step 2");
    System.out.println("Step 3");
  }
}

print("Steps Demo")
print("------------------------")
print("Step 1")
print("Step 2")
print("Step 3")

package main

import "fmt"

func main() {
	fmt.Println("Steps Demo")
	fmt.Println("------------------------")
	fmt.Println("Step 1")
	fmt.Println("Step 2")
	fmt.Println("Step 3")
}

代码解释：
- 使用`el-steps`组件包裹多个`el-step`组件来展示多个步骤。
- 通过设置`active`属性的值来指定当前正在进行的步骤，可以是一个整数。
- 代码中展示了使用Vue、Java、Python和Go语言分别实现步骤条组件的例子。

代码总结：
步骤条组件可以用于展示多个步骤的执行状态，提供了简单的API用于设置当前进行的步骤。

结果说明：
以上代码将展示一个步骤条，共有3个步骤，当前进行到第2个步骤。

### 5.3 轮播图(Carousel)

轮播图组件可以展示多个图片或内容的轮播效果，适用于展示多个内容的切换效果。

<template>
  <div>
    <el-carousel :interval="4000">
      <el-carousel-item>
        <img src="img1.jpg" alt="Image 1">
      </el-carousel-item>
      <el-carousel-item>
        <img src="img2.jpg" alt="Image 2">
      </el-carousel-item>
      <el-carousel-item>
        <img src="img3.jpg" alt="Image 3">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

public class CarouselDemo {
  public static void main(String[] args) {
    System.out.println("Carousel Demo");
    System.out.println("------------------------");
    System.out.println("Image 1");
    System.out.println("Image 2");
    System.out.println("Image 3");
  }
}

print("Carousel Demo")
print("------------------------")
print("Image 1")
print("Image 2")
print("Image 3")

package main

import "fmt"

func main() {
	fmt.Println("Carousel Demo")
	fmt.Println("------------------------")
	fmt.Println("Image 1")
	fmt.Println("Image 2")
	fmt.Println("Image 3")
}

代码解释：
- 使用`el-carousel`组件包裹多个`el-carousel-item`组件来展示多个内容。
- 设置`interval`属性的值来指定轮播的时间间隔，单位为毫秒。
- 代码中展示了使用Vue、Java、Python和Go语言分别实现轮播图组件的例子。

代码总结：
轮播图组件可以用于展示多个图片或内容的轮播效果，提供了简单的API用于设置轮播间隔。

结果说明：
以上代码将展示一个轮播图，包含3个图片或内容，每隔4秒自动切换一次。

### 5.4 折叠面板(Collapse)

折叠面板组件可以展示多个内容的折叠效果，适用于展示多个内容的收起和展开效果。

<template>
  <div>
    <el-collapse>
      <el-collapse-item title="Section 1">Content 1</el-collapse-item>
      <el-collapse-item title="Section 2">Content 2</el-collapse-item>
      <el-collapse-item title="Section 3">Content 3</el-collapse-item>
    </el-collapse>
  </div>
</template>

public class CollapseDemo {
  public static void main(String[] args) {
    System.out.println("Collapse Demo");
    System.out.println("------------------------");
    System.out.println("Section 1: Content 1");
    System.out.println("Section 2: Content 2");
    System.out.println("Section 3: Content 3");
  }
}

print("Collapse Demo")
print("------------------------")
print("Section 1: Content 1")
print("Section 2: Content 2")
print("Section 3: Content 3")

package main

import "fmt"

func main() {
	fmt.Println("Collapse Demo")
	fmt.Println("------------------------")
	fmt.Println("Section 1: Content 1")
	fmt.Println("Section 2: Content 2")
	fmt.Println("Section 3: Content 3")
}

代码解释：
- 使用`el-collapse`组件包裹多个`el-collapse-item`组件来展示多个折叠内容。
- 通过设置`title`属性的值来指定每个折叠内容的标题。
- 代码中展示了使用Vue、Java、Python和Go语言分别实现折叠面板组件的例子。

代码总结：
折叠面板组件可以用于展示多个内容的折叠效果，提供了简单的API用于设置折叠内容的标题。

结果说明：
以上代码将展示一个折叠面板，包含3个折叠内容，点击标题可展开或收起内容。

# 6. 数据可视化实战案例

数据可视化是Web应用中一个非常重要的部分，通过图表、表格和确定组件等方式，可以直观地展示数据，帮助用户更好地理解和分析数据。Element UI作为一套基于Vue.js的组件库，提供了丰富的数据可视化组件，可以帮助开发者快速构建出美观、功能强大的数据可视化界面。接下来，我们将通过一些实际案例，演示如何使用Element UI的组件来展示数据。

### 6.1 使用折线图展示销售数据趋势

// 代码示例
<template>
  <div>
    <el-chart :data="salesData" type="line" height="400px"></el-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      salesData: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
        datasets: [
          {
            name: '销售额',
            data: [150, 200, 180, 250, 210, 300],
          },
        ],
      },
    };
  },
};
</script>

**代码说明：**
这段代码演示了如何使用Element UI的折线图组件来展示销售数据的趋势。通过传入相应的数据，可以在页面上绘制出直观的折线图，帮助用户了解销售情况的变化趋势。

**代码总结：**
- 使用`<el-chart>`组件来绘制折线图，通过`type="line"`指定图表类型为折线图。
- 通过`data`属性传入销售数据，其中`labels`为横轴标签，`datasets`为数据集。

**结果说明：**
页面上将会显示一个折线图，横轴为月份，纵轴为销售额，用户可以直观地看到销售数据的变化趋势。

### 6.2 使用饼图展示用户来源比例

// 代码示例
<template>
  <div>
    <el-chart :data="userData" type="pie" height="400px"></el-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: {
        labels: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        datasets: [335, 310, 234, 135, 154],
      },
    };
  },
};
</script>

**代码说明：**
这段代码演示了如何使用Element UI的饼图组件来展示用户来源的比例。通过传入相应的数据，可以在页面上绘制出直观的饼图，帮助用户了解用户来源的分布情况。

**代码总结：**
- 使用`<el-chart>`组件来绘制饼图，通过`type="pie"`指定图表类型为饼图。
- 通过`data`属性传入用户来源数据，其中`labels`为分类标签，`datasets`为数据集。

**结果说明：**
页面上将会显示一个饼图，展示了不同用户来源的比例情况，用户可以直观地了解不同渠道的用户贡献比例。

### 6.3 使用柱状图展示产品库存情况

// 代码示例
<template>
  <div>
    <el-chart :data="stockData" type="bar" height="400px"></el-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stockData: {
        labels: ['商品1', '商品2', '商品3', '商品4', '商品5'],
        datasets: [
          {
            name: '库存数量',
            data: [100, 150, 120, 200, 180],
          },
        ],
      },
    };
  },
};
</script>

**代码说明：**
这段代码演示了如何使用Element UI的柱状图组件来展示产品的库存情况。通过传入相应的数据，可以在页面上绘制出直观的柱状图，帮助用户了解产品的库存情况。

**代码总结：**
- 使用`<el-chart>`组件来绘制柱状图，通过`type="bar"`指定图表类型为柱状图。
- 通过`data`属性传入产品库存数据，其中`labels`为产品名称，`datasets`为数据集。

**结果说明：**
页面上将会显示一个柱状图，展示了不同产品的库存数量情况，用户可以直观地了解每种产品的库存情况。

### 6.4 使用散点图展示用户行为数据分布

// 代码示例
<template>
  <div>
    <el-chart :data="userData" type="scatter" height="400px"></el-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: {
        datasets: [
          {
            label: '用户行为数据',
            data: [
              { x: 10, y: 20 },
              { x: 30, y: 40 },
              { x: 50, y: 60 },
              { x: 70, y: 80 },
              { x: 90, y: 100 },
            ]
          },
        ],
      },
    };
  },
};
</script>

**代码说明：**
这段代码演示了如何使用Element UI的散点图组件来展示用户行为数据的分布情况。通过传入相应的数据，可以在页面上绘制出直观的散点图，帮助用户了解用户行为数据的分布情况。

**代码总结：**
- 使用`<el-chart>`组件来绘制散点图，通过`type="scatter"`指定图表类型为散点图。
- 通过`data`属性传入用户行为数据，其中`datasets`为数据集，每个数据点由`x`和`y`坐标组成。

**结果说明：**
页面上将会显示一个散点图，展示了用户行为数据的分布情况，用户可以直观地了解数据点的分布情况。