echart 注意事项-初始化和销毁
时间: 2023-11-11 10:10:55 浏览: 37
在使用 ECharts 前,需要先进行初始化。一般情况下,初始化的步骤如下:
1. 引入 echarts.js 文件。可以从官网下载或使用 CDN 引入。
2. 准备一个具有宽高的 DOM 容器。
3. 在 JS 中创建 ECharts 实例,并将其与 DOM 容器关联起来。
以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</title>
<!-- 引入 echarts.js 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个具有宽高的 DOM 容器 -->
<div id="myChart" style="width: 600px; height: 400px;"></div>
<script>
// 在 JS 中创建 ECharts 实例,并将其与 DOM 容器关联起来
var myChart = echarts.init(document.getElementById('myChart'));
// 在这里可以开始配置图表
// ...
</script>
</body>
</html>
```
在不需要使用 ECharts 时,需要销毁实例,以释放资源,避免内存泄漏。可以使用 `dispose()` 方法进行销毁。
以下是一个示例:
```javascript
// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 在这里可以开始配置图表
// ...
// 销毁实例
myChart.dispose();
```