我需要一个嵌入在element的Table表格组件中的一个柱状统计图的代码
时间: 2024-05-12 13:21:19 浏览: 43
这是一个基于Vue.js的Table表格组件和ECharts柱状统计图的代码示例:
```html
<template>
<div class="table-container">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="统计图">
<template slot-scope="scope">
<div class="chart-container" ref="chart"></div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, values: [80, 70, 90, 60, 85] },
{ name: '李四', age: 20, values: [70, 85, 70, 75, 80] },
{ name: '王五', age: 22, values: [90, 80, 75, 85, 70] }
]
}
},
mounted() {
this.renderChart()
},
methods: {
renderChart() {
this.tableData.forEach((item, index) => {
const chart = echarts.init(this.$refs.chart[index])
const option = {
tooltip: {},
xAxis: {
type: 'category',
data: ['语文', '数学', '英语', '物理', '化学']
},
yAxis: {
type: 'value'
},
series: [{
data: item.values,
type: 'bar'
}]
}
chart.setOption(option)
})
}
}
}
</script>
<style scoped>
.chart-container {
width: 100%;
height: 200px;
}
</style>
```
在这个示例中,我们使用了Element UI的Table组件,其中包含了三列:姓名、年龄和统计图。在统计图列中,我们使用了一个插