Vue.js中如何保存调查问卷用户输入并生成饼图

需求概述 #

通过Vue.js搭建滑块式情绪问卷，收集用户情绪状态数据，将数据持久化存储（localStorage），并基于存储的数据生成饼图进行可视化分析。

组件代码实现 #

1. App.vue（主入口与导航） #

<template>
  <div id="app" class="container">
    <h1>欢迎使用情绪问卷</h1>
    <h2>请选择操作：</h2>

    <div class="buttons">
      <button class="positive" @click="PositiveQuestions">填写情绪问卷</button>
      <button class="feedback" @click="SurveyResults">查看分析饼图</button>
    </div>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'VueApp',
  methods: {
    PositiveQuestions() {
      this.$router.push('/positive-survey')
    },

    SurveyResults() {
      this.$router.push('/feedback')
    },
  },
}
</script>

注：移除未实现的SaveData按钮，将数据存储逻辑整合到问卷提交环节

2. PositiveSurvey.vue（问卷页面） #

<template>
  <div>
    <button @click="goBack">返回首页</button>
  </div>
  <div id="app" class="positive-survey">
    <h1>情绪状态问卷</h1>
    <form @submit.prevent="submitSurvey">
      <div v-for="(question, index) in questions" :key="index" class="question">
        <label :for="'question-' + index">{{ question.text }}</label>
        <input
          type="range"
          :id="'question-' + index"
          v-model="question.answer"
          min="0"
          max="5"
          step="1"
        />
        <span class="slider-value">{{ question.answer }}</span>
      </div>
      <button type="submit">提交问卷</button>
    </form>
    <div v-if="submittedData.length" class="results">
      <h2>已提交记录</h2>
      <ul>
        <li v-for="(data, index) in submittedData" :key="index">
          <strong>第{{ index + 1 }}次响应：</strong>
          <ul>
            <li v-for="(value, idx) in data" :key="idx">
              {{ questions[idx].text }}: {{ value }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        { text: '你感到开心的程度？', answer: 0 },
        { text: '你今天的状态如何？', answer: 0 },
        { text: '你今天微笑的频率？', answer: 0 },
      ],
      submittedData: [],
    }
  },
  mounted() {
    // 页面加载时从localStorage读取历史数据
    const savedData = localStorage.getItem('surveyResponses')
    if (savedData) {
      this.submittedData = JSON.parse(savedData)
    }
  },
  methods: {
    submitSurvey() {
      const response = this.questions.map((question) => question.answer)
      this.submittedData.push(response)
      // 将数据持久化到localStorage
      localStorage.setItem('surveyResponses', JSON.stringify(this.submittedData))
      alert('感谢提交问卷！')
      // 重置滑块值
      this.questions.forEach(q => q.answer = 0)
    },
    goBack() {
      this.$router.push('/')
    },
  },
}
</script>

修改说明：

• 新增mounted钩子，实现页面刷新后数据不丢失
• 优化提交逻辑，写入localStorage并重置滑块
• 移除冗余空表单标签，简化页面结构

3. Results.vue（饼图分析页面） #

<template>
  <button @click="goBack">返回首页</button>
  <div>
    <h2>情绪状态分析饼图</h2>
    <PieChart :data="chartData" />
  </div>
</template>

<script>
import { Pie } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
} from 'chart.js'

// 注册饼图所需Chart.js组件
ChartJS.register(Title, Tooltip, Legend, ArcElement)

export default {
  name: 'EmotionPieChart',
  components: {
    PieChart: Pie,
  },
  data() {
    return {
      chartData: {
        labels: ['积极', '消极', '中性'],
        datasets: [
          {
            data: [0, 0, 0],
            backgroundColor: ['#4CAF50', '#F44336', '#FFEB3B'],
            borderColor: ['#388E3C', '#D32F2F', '#FBC02D'],
            borderWidth: 1,
          },
        ],
      },
    }
  },
  mounted() {
    this.updateChartData()
  },
  methods: {
    goBack() {
      this.$router.push('/')
    },
    updateChartData() {
      // 从localStorage读取问卷数据
      const savedData = localStorage.getItem('surveyResponses')
      if (!savedData) return

      const responses = JSON.parse(savedData)
      let positive = 0, negative = 0, neutral = 0

      // 按得分划分情绪：0-1=消极，2-3=中性，4-5=积极
      responses.forEach(response => {
        response.forEach(score => {
          if (score >= 4) positive++
          else if (score <= 1) negative++
          else neutral++
        })
      })

      const total = positive + negative + neutral
      if (total === 0) return

      // 转换为百分比并更新饼图数据
      this.chartData.datasets[0].data = [
        Math.round((positive / total) * 100),
        Math.round((negative / total) * 100),
        Math.round((neutral / total) * 100)
      ]
    },
  },
}
</script>

修改说明：

• 移除无效的弹窗方法和错误组件导入
• 新增数据计算逻辑，基于存储的问卷数据生成饼图
• 简化Chart.js组件注册，适配饼图需求
• 替换为中文标签，贴合国内用户习惯

问卷界面展示 #

内容的提问来源于stack exchange，提问作者Abdullah