ECharts 创建图表

经过前面的学习,相信大家已经在自己的项目中绘制了一个基本的 ECharts 图表,但是前面学习只是为了让我们更好的了解安装的流程。所以该小节,我们将会去更加详细的了解到 ECharts 的 创建更新,也会通过一个案例去跟踪分析整个过程,所谓 万事开头难,在这个过程中也会有许许多多需要同学们注意的地方,希望大家在学习的时候也能静下心来完成这重要的一步。

1. 简介

ECharts 用法非常简单,定义图表的基本流程是实例化 echarts 后,调用 setOption 传入配置对象,ECharts 根据配置对象的描述渲染各类图表、组件。本节主要讲解初始配置图表的基本流程,以及实例化后动态更新图表内容的方法。

2. 创建图表

2.1 创建图表的步骤

通常,创建一个 ECharts 图表需要执行如下步骤:

  1. 定义 DOM 节点作为图表的容器;
  2. 调用 echarts.init 方法实例化 ECharts 对象;
  3. 调用 echartInstance.setOption 方法传入图表配置。

例如:

实例演示
预览 复制