在el-card中画柱状图
时间: 2023-12-03 10:05:45 浏览: 35
要在 el-card 中画柱状图,你可以使用 ECharts 图表库来绘制。以下是一个简单的例子,可以帮助你开始:
首先,你需要在你的项目中引入 ECharts 库:
```
npm install echarts --save
```
然后在你的组件中,你需要引入 ECharts 和一个基础的柱状图组件:
```html
<template>
<el-card>
<div ref="chart" style="height: 300px;"></div>
</el-card>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted() {
this.drawChart()
},
methods: {
drawChart() {
const chart = echarts.init(this.$refs.chart)
const options = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
}
chart.setOption(options)
}
}
}
</script>
```
在这个例子中,我们在 el-card 组件中创建了一个 div 元素,用于渲染图表。我们使用了 ECharts 的 `init()` 方法来初始化图表,并使用 `setOption()` 方法来设置图表的数据和样式。在这个例子中,我们创建了一个基础的柱状图,其中 x 轴表示星期几,y 轴表示某个数量的值。
你可以根据你的需求调整这个例子中的数据和样式,以创建你自己的柱状图。