devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

一、基础折线图详解《手把手教你 ECharts 数据可视化详解》_echarts折线图数据

作者：不正经 | 2024-03-08 02:44:35

赞

踩

echarts折线图数据

注：本系列教程需要对应 JavaScript 、html、css 基础，否则将会导致阅读时困难，本教程将会从 ECharts 的官方示例出发，详解每一个示例实现，从中学习 ECharts 。

ECharts 官方示例：https://echarts.apache.org/examples/zh/index.html

一、折线图

我们打开 ECharts 的示例界面，找到折线图中的基础折线图：

在这里插入图片描述
打开折线图后，左侧则是对应的代码，右侧则是对应的折线图演示：

在这里插入图片描述

本系列文字将会以 JavaScript 代码为讲解代码。

二、 基础折线图

我们先从基础折线图开始了解，再逐步深入学习多种不同的数据可视化的方式。我们此时找到完整代码：

在这里插入图片描述
此时忽略 import 代码，直接查看初始化代码：

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

  • 1
  • 2
  • 3

以上代码中 var chartDom = document.getElementById('main'); 为通过 js 的 document 获取 id 为 main 的元素作为图标显示的区域（节点），此时我们还无法查看 html，这个不用在意，等下我们逐步开始讲解。

找到对应的节点元素后，我们通过 echarts.init() 初始化这个节点，这一步是必要的，初始化完毕后就得到一个 echarts 数据可视化的对象，这个对象，最后创建一个配置项 var option; 。

以上所述的这一部分是一个 echarts 可视化的基础 JavaScript 代码，这一部分代码是通用的。在使用 echarts 进行可视化数据开发时，重要的是其 option 的编写，通过给与 option 不同的配置，可以使我们的可视化数据展现得更加丰富。

那么接下来我们开始 option 的配置解析。

三、ECharts 可视化数据的配置项

在官方示例中，option 的代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

我们直接查看 option 中的内容；其中 xAxis 是表示直角坐标系上的 x 轴，在此处是放置在 option 中，那么则表示 xAxis 在此处配置 x 轴的配置项。其实 ECharts 已经提供了配置项文档给我们查阅，地址是 https://echarts.apache.org/zh/option.html，有兴趣不怕麻烦的可以去自行学习。

type

此时我们已经知道了对应的配置项文档，我们可以直接通过配置项文档查看在官方示例中 xAxis 下的 type 是指什么类型。我们打开文档后，找到 xAxis 列：

在这里插入图片描述

在其中我们查看到了 type 配置项：

在这里插入图片描述
再次我们可以看到 type 指的就是坐标轴类型。在示例代码中，我们使用的配置是 type: 'category', 此时就表示当前的坐标轴类型是 类目轴。

data

接着我们继续查找 data 配置项，在 data 配置项中后面的值是 data 所拥有的值，在手册中我们可以看到相关的解释：

在这里插入图片描述

在文档中有指出：

类目数据，在类目轴（type: 'category'）中有效。
如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。

简单点来说，文档中所述指你没设置类目轴（type: 'category'）那么只要设置了 axis.data 则默认当前设置是类目轴，若设置类目轴，但没设置数据（axis.data）那么数据就是 series.data 所设置的数据（series.data 接下来会讲）。

yAxis

yAxis 表示当前折线图在 y 轴上的设置，可以在配置文档中找到对应的说明：

在这里插入图片描述
一般来说 y 轴在垂直方向上最多只能放两个，也就是左右两边，并不允许同个位置的多个 y 轴产生重叠。

在配置 y 轴时，type 表示配置坐标轴的类型：
在这里插入图片描述

期值若等于 value 则表示事数值值，也就是当前图标所显示的数值进行自动适配后产生 y 轴的标注，最终效果可以查看本片最下部分的示例截图。

series 系列

在 ECharts 中，series 表示由数据形成的图标，也就是最终我们所呈现的可视化数据。

在官方示例中，series 中 data 给予了如下数值：

data: [150, 230, 224, 218, 135, 147, 260]

  • 1

这些数值就是即将要生成的可视化数据，而 type: 'line' 则表示这个数据所呈现的可视化图标是折线图。

四、应用

基本上我们已经了解了 ECharts 官方示例中的 JavaScript 代码，那么此时我们可以打开 ECharts 的官方入门手册：https://echarts.apache.org/handbook/zh/get-started/，在其中我们可以看到快速入门下有一个示例：

在这里插入图片描述

完整代码为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

把代码复制到自己新建的 html 文件之中，我们可以将本地引入的 echarts.js 文件 <script src="echarts.js"></script> 改成 cdn 引入（当然你下载了直接引入都可以）： <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

在这里插入图片描述

最后我们可以看到示例之中 body 下有一个 div 作为了显示图标的容器：<div id="main" style="width: 600px;height:400px;"></div>

在这里插入图片描述

这个容器的 id 为 main，那么在通过 js 初始化的时候，就需要获取当前元素进行初始化，则示例代码写成了：var myChart = echarts.init(document.getElementById('main'));

在这里插入图片描述

接着我们可以把配置项换成我们理解的基础折线图的配置项：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

最后查看一句 JavaScript 代码：

myChart.setOption(option);

  • 1

在这里插入图片描述

这段代码则是表示 ECharts 对象使用 option 配置项生成数据。

打开网页，显示如下：

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/208762
推荐阅读