1. 引言
随着互联网的发展，调查问卷已成为一种常见的数据采集工具。在Vue框架中，通过利用第三方库echarts可以方便地生成统计图表，对调查问卷结果进行可视化展示。本文将介绍如何在Vue框架下，利用echarts实现在线调查的统计图表。
2. 准备工作
2.1 安装echarts库
首先需要安装echarts库。在命令行中输入以下命令：
npm install echarts --save
安装成功后，在Vue项目中需要引入echarts：
import echarts from 'echarts'
2.2 调查问卷数据结构
在实现在线调查统计的过程中，需要对调查问卷结果进行处理。以下为一个示例调查问卷的数据结构：
{
id: 1,
question: "您最近一个月使用哪种牌子的洗发水？",
type: "single",
options: [
{label: "A品牌", value: "A"},
{label: "B品牌", value: "B"},
{label: "C品牌", value: "C"},
{label: "D品牌", value: "D"},
{label: "E品牌", value: "E"},
],
result: {
A: 15,
B: 30,
C: 20,
D: 35,
E: 10
}
}
其中，id表示题目的唯一标识，question表示问题内容，type表示题目类型（单选、多选、填空等），options则是问题的选项。result保存了该题的调查结果，其结构为选项值与出现次数的键值对。
3. 实现过程
3.1 单选题统计图表
对于单选题，直接使用echarts中的饼图可以很方便地生成统计图表。
template:
<div class="chart-container">
<div class="chart" ref="chart"></div>
</div>
data() {
return {
chartData: []
}
},
created() {
// 获取数据
this.chartData = question.result
// 渲染图表
this.renderChart()
},
methods: {
// 渲染饼图
renderChart() {
let chart = echarts.init(this.$refs.chart)
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/> {b} : {c} ({d}%)"
},
series: [
{
name: '选择结果',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: Object.keys(this.chartData).map(key => {
return {
name: this.getOptionLabel(key),
value: this.chartData[key]
}
}),
label: {
formatter: '{b} : {c} ({d}%) '
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
chart.setOption(option)
},
// 获取选项label
getOptionLabel(value) {
let option = question.options.find(item => {
return item.value == value
})
if (option) {
return option.label
} else {
return ''
}
}
}
在上述代码中，chartData是在created钩子函数中从题目数据中处理出来的统计结果（键值对），renderChart()方法用于渲染饼图，getOptionLabel()方法用于获取选项的label值。
最终的图表渲染效果如下：
3.2 多选题统计图表
对于多选题，使用echarts中的柱状图可以展示每个选项的选择次数。
template:
<div class="chart-container">
<div class="chart" ref="chart"></div>
</div>
data() {
return {
chartData: []
}
},
created() {
// 获取数据
this.chartData = question.result
// 渲染图表
this.renderChart()
},
methods: {
// 渲染柱状图
renderChart() {
let chart = echarts.init(this.$refs.chart)
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: Object.keys(this.chartData).map(key => this.getOptionLabel(key))
},
series: [
{
type: 'bar',
data: Object.values(this.chartData),
itemStyle: {
color: '#36a2eb'
}
}
]
}
chart.setOption(option)
},
// 获取选项label
getOptionLabel(value) {
let option = question.options.find(item => {
return item.value == value
})
if (option) {
return option.label
} else {
return ''
}
}
}
在上述代码中，chartData是在created钩子函数中从题目数据中处理出来的统计结果（键值对），renderChart()方法用于渲染柱状图，getOptionLabel()方法用于获取选项的label值。
最终的图表渲染效果如下：
4. 总结
本文介绍了如何利用Vue框架下的echarts库实现在线调查的统计图表。通过以上的方法，可以方便地对调查问卷结果进行可视化展示，提高数据分析的效率。