v3 echarts用法
时间: 2023-10-09 07:13:15 浏览: 39
v3 版本的 ECharts 是一个用于数据可视化的 JavaScript 图表库。下面是一些关于 v3 版本 ECharts 的基本用法:
1. 引入 ECharts 库:在 HTML 文件中引入 ECharts 库的 JavaScript 文件。
```html
<script src="echarts.js"></script>
```
2. 创建一个容器:在 HTML 文件中创建一个用于显示图表的容器。
```html
<div id="chart"></div>
```
3. 初始化图表实例:在 JavaScript 中创建一个 ECharts 实例,并指定要使用的容器。
```javascript
var chart = echarts.init(document.getElementById('chart'));
```
4. 配置图表选项:通过设置配置项,定义图表的样式、数据、交互等。
```javascript
var option = {
// 配置项...
};
```
5. 设置图表数据:根据需要,将数据填充到配置项中。
```javascript
option = {
// 配置项...
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50]
}]
};
```
6. 渲染图表:调用图表实例的 `setOption` 方法,传入配置项,渲染图表。
```javascript
chart.setOption(option);
```
7. 响应窗口变化:如果需要在窗口大小变化时自适应图表大小,可以调用 `resize` 方法。
```javascript
window.onresize = function() {
chart.resize();
};
```
以上是 v3 版本 ECharts 的基本用法。你可以根据自己的需求,参考官方文档和示例代码来进一步了解和使用 ECharts。