uniapp 安装使用echarts
时间: 2023-09-02 15:15:51 浏览: 43
要在 UniApp 中使用 ECharts,需要进行以下步骤:
1. 安装 ECharts
可以通过 npm 安装 ECharts,在终端中执行以下命令即可:
```
npm install echarts --save
```
2. 引入 ECharts
在需要使用 ECharts 的页面或组件中,通过 `import` 引入 ECharts:
```javascript
import * as echarts from 'echarts';
```
3. 在页面或组件中使用 ECharts
在模板中创建一个 div 元素,设置宽度和高度,并指定一个 id,用于创建图表:
```html
<template>
<div style="width: 100%; height: 400px;" id="chart"></div>
</template>
```
在组件的 `mounted` 生命周期钩子中,使用 ECharts 的 `init` 方法创建图表,并通过 `setOption` 方法设置图表的数据和配置:
```javascript
mounted() {
// 创建图表
const chart = echarts.init(document.getElementById('chart'))
// 设置图表数据和配置
chart.setOption({
title: {
text: 'ECharts 示例'
},
tooltip: {},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 5]
}]
})
}
```
这样就可以在页面或组件中使用 ECharts 创建图表了。