vue 实现一个图文统计
时间: 2023-07-07 16:08:26 浏览: 59
要实现一个图文统计,可以用 Vue.js 和一些图表库,比如 ECharts 或者 Chart.js。
首先,需要将数据传递给组件。可以使用 Vue.js 的 props 属性来实现。在父组件中定义好数据,然后在子组件中通过 props 接收即可。
然后,根据数据使用图表库生成图表。以 ECharts 为例,可以在组件的 mounted 钩子函数中初始化 ECharts 实例,然后将数据传递给实例进行绘制。
最后,将生成的图表和文字信息结合起来展示。可以使用 flex 布局将图表和文字分别放在不同的 div 中,并设置好样式。
下面是一个简单的例子:
```html
<template>
<div class="container">
<div class="chart-container">
<div ref="chart" class="chart"></div>
</div>
<div class="text-container">
<p>总数:{{ total }}</p>
<p>男性:{{ male }}</p>
<p>女性:{{ female }}</p>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
data: {
type: Object,
required: true,
},
},
data() {
return {
chartInstance: null,
total: 0,
male: 0,
female: 0,
};
},
mounted() {
this.chartInstance = echarts.init(this.$refs.chart);
this.updateChart();
},
methods: {
updateChart() {
const { total, male, female } = this.data;
this.total = total;
this.male = male;
this.female = female;
const option = {
tooltip: {},
series: [
{
type: 'pie',
data: [
{ value: male, name: '男性' },
{ value: female, name: '女性' },
],
},
],
};
this.chartInstance.setOption(option);
},
},
};
</script>
<style scoped>
.container {
display: flex;
}
.chart-container {
flex: 1;
margin-right: 20px;
}
.chart {
width: 100%;
height: 300px;
}
.text-container {
flex: 1;
}
</style>
```
在父组件中,可以将数据传递给子组件:
```html
<template>
<div>
<my-chart :data="chartData"></my-chart>
</div>
</template>
<script>
import MyChart from './MyChart.vue';
export default {
components: {
MyChart,
},
data() {
return {
chartData: {
total: 100,
male: 60,
female: 40,
},
};
},
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)