ECharts 安装
ECharts是一款开源的可视化图表库，使用JavaScript语言编写，并提供了丰富的图表类型和交互方式。下面将为大家介绍ECharts的安装方法。
1. 下载ECharts
ECharts官网提供了多种下载方式，包括源码和编译好的文件，我们可以根据自己的需要选择适合的。
- 源码：在Github上下载ECharts的源码，地址为：https://github.com/apache/echarts
- 发行版：ECharts在官网上提供了各种版本的发行版，包括全量版、精简版和CDN版等，我们可以选择相应的版本进行下载。ECharts官网地址为：https://echarts.apache.org/zh/download.html
2. 引入ECharts
引入ECharts可以使用CDN方式或本地引入方式。这里以本地引入为例。
将ECharts下载后得到的所有文件复制到项目中，并在HTML页面中引用echarts.min.js文件。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My ECharts Demo</title>
<script src="path/to/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 在这里编写ECharts代码
</script>
</body>
</html>
3. 创建图表
在HTML页面中添加一个空的div元素，用于渲染图表。然后在页面下面的script标签中编写ECharts代码，创建图表。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My ECharts Demo</title>
<script src="path/to/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 创建一个基于原生DOM的图表实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['苹果', '香蕉', '橘子', '芒果', '葡萄', '梨子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
4. 运行并预览
将代码复制到编辑器中，保存并运行，即可在浏览器中预览ECharts图表。如下图所示：
以上就是使用ECharts创建图表的基本方法，我们可以根据自己的需要进行修改和调整。