创建ECharts图表

前提：

在创建一个ECharts图表之前，需要进行开发前的准备工作，包括获取ECharts、新建项目和配置VS Code。

创建ECharts图表

获取 ECharts库文件后，创建ECharts图表只需如下五个步骤。

(1)在.html文件中，引入echarts.js 库文件。ECharts 的引入方式像JavaScript库文件一样，使用script标签引入即可，如代码所示，此处需要注意 echarts.js库文件的存放路径，如果找不到存放路径那么将无法显示图表。

（2）准备容器：

（3）使用init( )方法初始化实例：

（4）指定图表的配置项和数据:

（5）显示图表:

绘制标准柱形图

坐标轴：

 xAxis：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

可跳转ECharts官网查看 xAxis具体代码：

Documentation - Apache ECharts

yAxis：直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

可跳转ECharts官网查看 yAxis具体代码：

Documentation - Apache ECharts

动态触发

tooltip提示框组件

提示框组件的通用介绍：

提示框组件可以设置在多种地方：

• 可以设置在全局，即 tooltip

• 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip

• 可以设置在系列中，即 series.tooltip

• 可以设置在系列的每个数据项中，即 series.data.tooltip

trigger

触发类型。

可选：

• 'item'

  数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

• 'axis'

  坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

  在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。

• 'none'

  什么都不触发。

axisPointer

坐标轴指示器配置项。

tooltip.axisPointer 是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成（例如 xAxis.axisPointer 或 angleAxis.axisPointer）。但是使用 tooltip.axisPointer 在简单场景下会更方便一些。

注意： tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。

坐标轴指示器是指示坐标轴当前刻度的工具。

 实操（绘制折线图，条形图）:

如代码所示，此处需要注意 echarts.js库文件的存放路径，如果找不到存放路径那么将无法显示图表。

title

标题组件，包含主标题和副标题。

在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

text主标题文本，支持使用 \n 换行。

求X,Y的最大/小值