ECharts基本使用
获取 Apache ECharts
Apache ECharts
支持多种下载方式,可以在下一篇教程安装中查看所有方式。这里,我们以从 [jsDelivr]
(https://www.jsdelivr.com/package/npm/echarts) `CDN 上获取为例,介绍如何快速安装。
在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js
,点击并保存为 echarts.js
文件。
引入Apache ECharts
在刚才保存 echarts.js
的目录新建一个 index.html
文件,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图表</title>
<script src="./echarts.js"></script>
</head>
<body>
</body>
</html>
打开这个 index.html
,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。
绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head>
之后,添加:
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="widt