uniapp 条状图
时间: 2023-09-02 14:05:34 浏览: 55
要在 Uniapp 中制作条状图,可以使用 ECharts 插件。以下是一个简单的示例:
1. 安装 ECharts 插件
在项目根目录下打开终端,运行以下命令:
```
npm install echarts --save
```
2. 在页面中引入 ECharts
在需要使用条状图的页面中,引入 ECharts 的脚本:
```html
<script src="../../static/echarts.min.js"></script>
```
3. 创建一个容器
在页面中创建一个容器,用于显示条状图:
```html
<view id="chart" style="height: 400rpx;"></view>
```
4. 编写 JavaScript 代码
在页面中编写 JavaScript 代码,使用 ECharts 绘制条状图:
```javascript
import * as echarts from '../../static/echarts.min.js';
export default {
onReady() {
const chart = echarts.init(this.$refs.chart);
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
chart.setOption(option);
}
};
```
以上代码将在页面加载完成后,使用 ECharts 绘制一个简单的条状图。你需要根据实际需求,调整代码中的数据和样式。