目录
Echarts概述
Echarts是一个使用JS实现的开源可视化库，可以流程的运行在PC和移动端，兼容大部分的浏览器，底层依赖矢量图库ZRender。中文官网
Echarts能满足绝大数可视化图表，方便使用，功能强大。
Echarts基本使用步骤
1.下载echarts.js文件
下载地址：github地址
要是下载速度慢：在此提供：百度网盘下载（提取码:9hyz） 里面有单个文件和整个压缩包。
此连接的版本为5.4.0，进入连接下载压缩包。
我们的目标文件存在于dist目录中
要想下载其他版本：
找到自己想要的版本，点击Assets，window系统选择zip压缩包。
如图为两个版本，操作一样的。
2.创建html文件，引用echarts.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>3.准备一个容器（带有高宽）用于承装图表。
<body>
<div id="container" style="width: 400px; height: 400px" ></div>
</body>4.初始化容器， 初始化了才可以承装图表。
<body>
<div id="container" style="width: 400px; height: 400px" ></div>
<script>
//初始化容器
let eContainer = echarts.init(document.getElementById("container"));
</script>
</body>5.去echarts官网选择想要的图表，配置好图表。
我们选择一个最基本的折线图
配置好参数后，左边配置代码都复制下来，打开我们html文件。
将复制的代码复制到文件中，给容器设置配置项即可。
<body>
<div id="container" style="width: 400px; height: 400px" ></div>
<script>
//初始化容器
let eContainer = echarts.init(document.getElementById("container"));
//粘贴官网配置好的选项
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
//给初始化好的容器添加配置项
eContainer.setOption(option);
</script>
</body>就可以看到效果：
本文含有隐藏内容，请 开通VIP 后查看