用Vue和ECharts绘制问卷统计结果

最新推荐文章于 2024-03-04 13:18:44 发布

峰信子

最新推荐文章于 2024-03-04 13:18:44 发布

阅读量1.1k

点赞数 1

文章标签： vue echarts

本文链接：https://blog.youkuaiyun.com/sinat_36332694/article/details/94323199

版权

本文介绍了如何使用Vue和ECharts来绘制问卷调查的统计结果。通过创建模板、设置问题数据、引入ECharts库，针对单选题、多选题和文本题，分别利用饼图、条形图和文本框展示不同类型的答案。在Vue组件中，通过mounted生命周期钩子调用drawChart函数，根据问题类型动态生成图表，实现了问卷统计结果的动态可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用Vue和ECharts绘制问卷统计结果

问卷设置了单选题、多选题以及文本题三中类型，分别使用了饼图、条形图、文本框来显示结果。

首先在html文件中，给div绑定一个“question-item”的模板

<div id="results" class="ui aligned center">
				
    <h1 class="header">{
  { title }}</h1>
    <div 
        is="question-item"
        v-for="(question, index) in questions"
        v-bind:id="question.id"
        v-bind:topic="question.topic"
        v-bind:type="question.type"
    ></div>

    <p class="ui yellow message">问卷截止日期：{
  { deadline }}</p>
</div>

.js中模板内容如下

Vue.component('question-item', {
  template: '\
    <div class="ui message">\
      <h3 class="header"> {
  { id }}. {
  { type }}题： {
  { topic }}</h3>\
      &l