一起学可视化：Echarts入门基础 「更新」

张鱼Plus
1,720 阅读8分钟

前言

网上时常流传着一句话：如果百度还有什么良心产品，那就是ECharts了。当然3月16日发布的文心一言还是值得期待一下的。

功能强大，开源且免费，不得不说Echarts确实是个好产品，这么好的东西放着不学那就有点可惜了，加之目前现在市面上很多的前端岗位JD都要求掌握ECharts，如果你不卷，就要被别人卷被市场卷，所以开卷吧！

上号！冲.gif

这个系列的第一篇已经发布，有兴趣的铁汁可以看看： 一起学可视化：基础入门（canvas，svg）

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。它也是目前国内使用最为广泛的图表开源库。本篇我们将从一个基础入门案例开始系统学习ECharts，过程中我会通过多个案例带大家一起学习ECharts的基础使用和在官网查找对应的文档和配置。

⭐注意：为了快速入门，很多语言表达我都写在代码里，所以一定要看码上掘金里面的代码

1. 入门案例

要使用ECharts需要先引入ECharts，大家可以在官网选择一种引入方式，我这里选择的是cdn的方式。ok，我们看代码：

接下来，我们将对以上代码做一些修改以进一步学习。

2. 自定义主题

官方只提供了light和dark两种内置主题，其他 自定义主题可以在官网配置后下载使用。有js和json两种导出格式，这里选用的是js方式。

使用方法：

  1. 导入主题配置后，找到主题配置的echarts.registerTheme('chalk')的第一参数就是我们的主题名称。
  2. echarts.init(chartDom, 'chalk'); init方法的第二个参数是设置主题，将第一步的主题名称放入即可。
const chart = echarts.init(chartDom,'chalk');

image.png

3. 系列

在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。一个 系列 包含的要素至少有：一组数值（series.data）、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。我们在上面案例的基础上加上饼图和折线图两个系列。

const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom);
+ const data_pie = [{
+    name: '安卓',
+    value: 50
+  },
+  {
+    name: 'ios',
+    value: 50
+  },
+  {
+    name: '小程序',
+    value: 50
+  },
+  {
+    name: '直播间',
+    value: 50
+  },
+  {
+    name: 'web',
+    value: 50
+  },
+ ]
+ const data_line = [99, 78, 130, 89, 65]
+ const data_bar = [90, 88, 45, 98, 77]

chart.setOption({
  title: {
    text: 'ECharts 多系列案例',
    subtext: '每天进步一点点'
  },
  //x轴
  xAxis: {
    data: ['食品', '数码', '服饰', '箱包', '家具']
  },
  // y轴
  yAxis: {},
  grid: {
    top: 100,
    left: '10%',
    right: '10%',
    bottom: 100
  },
- series: {
-         type: 'bar', // 图表类型
-         data: genDataArr()
-       } 
+  series: [{
+      name: '饼图',
+      type: 'pie',
+      center: ['65%', 80], // 圆心坐标，支持数值和百分比
+      radius: 35, // 半径
+      data: data_pie
+    },
+    {
+      name: '折线图',
+      type: 'line',
+      data: data_line
+
+    }, {
+      name: '柱状图',
+      type: 'bar',
+      data: data_bar
+
+    }
+  ]
});

这样就完成了在同一坐标系里面显示不同的图表，看一下完整demo：

4. dataset

数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。

系列 上面的图表示的是如何将dataset的数据映射到坐标系中，通常可以使用 series.encode 来做映射，现在我们将上面例子的数据从series.data移到用dataset：

const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom);
- const data_pie = [{
-    name: '安卓',
-    value: 50
-  },
-  {
-    name: 'ios',
-    value: 50
-  },
-  {
-    name: '小程序',
-    value: 50
-  },
-  {
-    name: '直播间',
-    value: 50
-  },
-  {
-    name: 'web',
-    value: 50
-  },
- ]
- const data_line = [99, 78, 130, 89, 65]
- const data_bar = [90, 88, 45, 98, 77]

chart.setOption({
+ dataset: {
+         source: [
+           ['食品', 99, 90, '安卓', 50],
+           ['数码', 78, 88, 'ios', 50],
+           ['服饰', 130, 45, '小程序', 50],
+           ['箱包', 89, 98, '直播间', 50],
+           ['家具', 65, 77, 'web': 50], 
+ 
+         ]
+       },
  title: {
    text: 'ECharts 多系列案例',
    subtext: '每天进步一点点'
  },
  //x轴
  xAxis: {
    data: ['食品', '数码', '服饰', '箱包', '家具']
  },
  // y轴
  yAxis: {},
  grid: {
    top: 100,
    left: '10%',
    right: '10%',
    bottom: 100
  },
  series: [{
      name: '饼图',
      type: 'pie',
      center: ['65%', 80], // 圆心坐标，支持数值和百分比
      radius: 35, // 半径
-     data: data_pie
+     encode:{itemName: 3, value: 4}
    },
    {
      name: '折线图',
      type: 'line',
-     data: data_line
+     encode:{x: 0, y: 1}

    }, {
      name: '柱状图',
      type: 'bar',
-     data: data_bar
+     encode:{x: 0, y: 2}

    }
  ]
});

5. 组件

ECharts 中除了绘图之外其他部分，都可抽象为 「组件」。例如，ECharts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）等等。

image.png

5.1 图例

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例用legend对象来设置，并和series.name绑定。

// 图例
legend: {
        data: [{
          name: '来源',
          icon: 'circle',
          textStyle: {
            color: 'red'
          }
        }, '折线图', '柱状图'],
        left: 300,
      },

5.2 工具栏

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。


// 工具栏
      toolbox: {
        feature: {
          saveAsImage: {},
          dataZoom: {
            yAxisIndex: false // 默认是0
          },
          restore: {}
        }
      },

5.3 区域缩放

dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

 // 区域缩放
      dataZoom: [{
        show: true,
        start: 0, // 起始位置
        end: 50 // 结束位置
      }],

5.4 提示框

直接查看文档-->tooltip

// 提示框
      tooltip: {
      show: true
      },

5.5 定位

ECharts大多数组件都提供了定位属性，我们可以采用类似 CSS absolute 的定位属性来控制组件的位置--->grid

// 定位
   grid: {
      top: 150,
      left: '10%',
      right: '10%',
      bottom: 150
  },

ok，我们综合看一下

但是，在实际的项目中，UI给的设计图往往定制性很强，这就需要我们充分了解echarts中组件的属性设置，比如下图：

image.png

image.png

如上两图，不难看出第一张是由一个饼图变化而来的一个圆环，颜色是自定义的，中间有数量的显示，环还有一点点阴影；第二张的折线图与默认的相比变得平滑了，线上的圆点和图例的圆点都是实心的。现在我们就在上个例子的基础上做一些样式的定制改变：

  • 将饼图变为圆环并加上阴影，中间显示累加数量
  • 将折线图和其图例的空心圆点变为实心，折线平滑过渡

6. 坐标系

一个坐标系，可能由多个组件协作而成。比如直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。

ECharts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系 等。line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上，坐标系用于布局这些图，以及显示数据的刻度等等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。

6.1 案例：双坐标系

看下图，两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis： image.png

接下来我们自己动手敲一敲：

6.2 案例：多坐标系

再来看下图，一个 ECharts 实例中，有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系：

image.png

我们在刚刚的双坐标系案例的基础上再添加一个xAxis和一个yAxis，创建两个grid来区分两个坐标系

ECharts基础就暂时介绍到这了，本文只做了开发中常用的概念和组件介绍，后面我们会通过实战项目进行一个拔高的训练，see you~

💕看完两件事:

  1. 点赞 | 你可以点击——>收藏——>退出一气呵成，但别忘了点赞🤭
  2. 关注 | 点个关注，下次不迷路😘
avatar
文章
阅读
粉丝