echarts怎么安装与配置(echarts,开发技术)

我们可以在直接下载 echarts.min.js 并用<script>标签引入。

echarts.min.js(4.7.0)

另外，开发环境下可以使用源代码版本 echarts.js 并用<script>标签引入，源码版本包含了常见的错误提示和警告。

echarts.js(4.7.0)

这些构建好的 echarts 提供了下面这几种定制：

完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。

常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。

精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。

本章节我们将为大家介绍使用 ECharts 生成图表的一些配置。

创建一个 HTML 页面，引入 echarts.min.js：

实例中 id 为 main 的 div 用于包含 ECharts 绘制的图表:

ECharts 库使用 json 格式来配置。

这里 option 表示使用 json 数据格式的配置来绘制图表。步骤如下：

标题

为图表配置标题：

提示信息

配置提示信息：

图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

X 轴

配置要在 X 轴显示的项:

Y 轴

配置要在 Y 轴显示的项。

系列列表

每个系列通过 type 决定自己的图表类型:

每个系列通过 type 决定自己的图表类型：

type: 'bar'：柱状/条形图

type: 'line'：折线/面积图

type: 'pie'：饼图

type: 'scatter'：散点（气泡）图

type: 'effectScatter'：带有涟漪特效动画的散点（气泡）

type: 'radar'：雷达图

type: 'tree'：树型图

type: 'treemap'：树型图

type: 'sunburst'：旭日图

type: 'boxplot'：箱形图

type: 'candlestick'：K线图

type: 'heatmap'：热力图

type: 'map'：地图

type: 'parallel'：平行坐标系的系列

type: 'lines'：线图

type: 'graph'：关系图

type: 'sankey'：桑基图

type: 'funnel'：漏斗图

type: 'gauge'：仪表盘

type: 'pictorialBar'：象形柱图

type: 'themeRiver'：主题河流

type: 'custom'：自定义系列

以下为完整的实例：