Apache EChart前端图表

Alphamilk

已于 2024-08-04 14:35:58 修改

阅读量1.1k

点赞数 14

CC 4.0 BY-SA版权

分类专栏：项目文章标签：前端

于 2024-08-04 14:35:38 首次发布

本文链接：https://blog.youkuaiyun.com/dogxixi/article/details/140847615

3.4 散点图(type:'scatter')

--基本散点图

一、了解Apache EChart

1.1 什么是Apache Echart

1.2 为什么要使用图表

可视化效果：图表将数据转换为图形，使复杂的数据变得直观易懂。

提高用户体验：图表简化了数据解读过程，提升了用户对信息的理解速度。

简化数据解读：通过图形化展示，用户可以快速识别数据的关键趋势和模式。

促进沟通：图表有助于在团队成员间进行更有效的沟通，易于分享和理解数据。

1.3 常见的图表以及特点

柱状图：

特点：

柱状图使用垂直或水平的矩形条（柱子）来表示不同类别之间的数值比较。

每个柱子的高度或长度代表其对应的数值大小。

柱状图清晰地展示了不同分类之间的差异，使得数据对比更加直观。

折线图：

特点：

折线图使用一系列数据点连接成线段，用于显示数据随时间变化的趋势。

它能够有效地展示数据的趋势和模式，特别是在一段时间内的变化趋势。

折线图中的每个点代表一个数据值，线段则表示这些数据值之间的连续性。

饼图：

特点：

饼图通过将圆形分割成不同的扇形区域来表示各个部分占总体的比例。

每个扇形的面积与它所代表的部分在总和中的比例相对应。

饼图适合于展示各个组成部分在整体中的占比情况。

散点图：

特点：

散点图使用二维坐标系中的点来表示数据集中的每一对数值。

点的位置反映了两个变量之间的关系，通常用于探索变量之间的相关性。

如果数据点聚集在一起，则表明变量之间可能存在某种关系；如果数据点分布广泛，则表明变量之间没有明显的关系。

二、Apache EChart的基本使用

2.1 下载echarts.js

通过官网进行下载或者npm下载

npm install echarts

2.2 echart基本使用案例

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }
}
</script>

效果展示：

基本参数选项的解释

title

text: 设置图表标题的文字。在这里，标题为“ECharts 入门示例”。

tooltip

空对象 {} 表示采用默认的提示框样式和行为。如果需要自定义提示框的内容、样式等，可以通过向 tooltip 对象中添加属性来实现。

xAxis

data: 设置 X 轴的数据，即条形图的分类标签。在这里，数据为 ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']。

默认情况下，ECharts 会自动创建一个类目轴（category axis）用于显示这些分类。

yAxis

空对象 {} 表示采用默认的 Y 轴设置。如果需要自定义 Y 轴的刻度范围、标签等，可以通过向 yAxis 对象中添加属性来实现。

series

series 是一个数组，其中的每个对象代表一个数据系列。

name: 数据系列的名称，在图例中显示。在这里，系列名称为“销量”。

type: 图表类型。在这里，类型为 bar，表示条形图。

data: 数据系列的数据值。在这里，数据为 [5, 20, 36, 10, 10, 20]，对应 X 轴上的六个分类。