您现在的位置是：网站首页 > ECharts 快速入门：安装与基本使用文章详情
ECharts 快速入门：安装与基本使用
陈川
【
ECharts
】
29874人已围观
要开始使用 ECharts，首先需要在你的项目中安装它。ECharts 是一个基于 JavaScript 的库，因此你需要将其添加到你的 HTML 文件中或者通过 CDN 方式引入。
通过 CDN 引入
在 HTML 文件的 <head> 部分，你可以直接链接到 ECharts 的 CDN 版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 基本示例</title>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
</head>
<body>
<!-- 你的图表将被放置在这里 -->
</body>
</html>使用 npm 或 yarn 安装
如果你的项目使用了 Node.js 环境（如使用 npm 或 yarn 进行模块管理），可以通过以下命令安装 ECharts：
npm install echarts --save或
yarn add echarts之后，你可以在 JavaScript 文件中引入 ECharts：
import * as echarts from 'echarts';基本使用示例
假设你已经完成安装步骤，现在我们来创建一个简单的柱状图示例。
创建 HTML 结构
在你的 HTML 文件中，创建一个容器用于放置图表：
<div id="chartContainer" style="width: 600px; height: 400px;"></div>编写 JavaScript 代码
在同一个 HTML 文件中，或者在单独的 JavaScript 文件中，编写如下代码：
// 初始化 ECharts 实例
function initChart() {
const chartDom = document.getElementById('chartContainer');
const myChart = echarts.init(chartDom);
// 设置配置项
const option = {
title: {
text: 'ECharts 基本示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 绑定配置项到图表实例
myChart.setOption(option);
}
// 调用初始化函数
initChart();这段代码首先获取了指定的 HTML 元素（chartContainer），然后通过 echarts.init 方法初始化了一个 ECharts 实例。接着设置了图表的基本配置，包括标题、数据和系列（柱状图）。最后，将配置项绑定到图表实例上，显示了图表。
查看结果
保存并运行你的 HTML 文件，你将看到一个包含标题的柱状图，展示了不同商品的销量。
通过这个基本示例，你已经熟悉了如何安装 ECharts 并在网页中使用它来创建图表。你可以根据实际需求调整配置项，添加更多功能，如交互、动画、数据集等，以满足各种可视化需求。
站点信息
- 建站时间：2017-10-06
- 网站程序：Koa+Vue
- 本站运行：
- 文章数量：
- 总访问量：
- 微信公众号：扫描二维码，关注我
