用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>\
      <div class="chart"></div>\
    </div>\
  ',
  props: ['id', 'topic', 'type']
})

三个属性’id’, ‘topic’, 'type’分别表示id、题目和类型，<div class="chart"></div>则是用来绘制结果的div

Vue中写好问题的数据，questions数组中包含所有的问题，每个问题都包括id、问题、问题类型、题目、答案5个属性

var tongji = new Vue({
  el: '#results',
  data: {
    title : "问卷test",
    questions: [
      {
        id: 1,
        topic: 'Do the dishes',
        type: '单选',
        options: ['选项1', '选项2', '选项3'],
        answers: [10, 20, 30]
      },
      {
        id: 2,
        topic: 'Take out the trash',
        type: '多选',
        options: ['选项3', '选项3', '选项2'],
        answers: [10, 20, 30]
      },
      {
        id: 3,
        topic: 'Mow the lawn',
        type: '文本',
        options: [],
        answers: ['aaaaaaaaaaa', 'bbbbbbbbb', 'cccccccccc']
      }
    ],
    deadline: '2019.6.12'
  },
  mounted(){

  }
  
})

接着开始使用ECharts了，下载echarts.min.js然后在html中引入
<script src="../js/echarts.min.js"></script>

使用一个drawChart函数，根据问题的下标和内容，将结果在网页上绘制出来

function drawChart(index, question)

如果是单选题，绘制饼图，设置type:‘pie’，以及其它option所需要的数据，然后根据index获取到网页的第index个div，使用echarts.init()初始化，再传入option绘制图表

if(question.type == '单选'){
    var res = [];
    for (var i = 0; i < question.options.length; i++) {
      res.push({value:question.answers[i], name:question.options[i]});
    }
    
    var option = {
      legend: {
          orient : 'vertical',
          x : 'left',
          data: question.options
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      calculable : true,
      series : [
          {
              name:'单选统计',
              type:'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data: res
          }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    var myChart = echarts.init($(".chart")[index]);
    myChart.setOption(option);
  }

如果是多选题，绘制条形图，设置type: ‘bar’，以及其它option所需要的数据，然后根据index获取到网页的第index个div，使用echarts.init()初始化，再传入option绘制图表

else if(question.type == '多选'){
    option = {
      tooltip : {
          trigger: 'axis'
      },
      legend: {
        data:['选择次数']
      },
      calculable : true,
      xAxis : [
        {
          type : 'value',
          boundaryGap : [0, 0.01]
        }
      ],
      yAxis : [
          {
              type : 'category',
              data: question.options
          }
      ],
      series: [{
        name: '选择次数',
        type: 'bar',
        data: question.answers
      }]
  };

如果是文本题，直接显示回答内容

else if(question.type == '文本'){
    var myChart = $(".chart")[index];
    for(var i = 0; i < question.answers.length; i++){
      var text = "<div class='ui green message'>回答" + (i+1) + ":   " + question.answers[i] + "</div>"; 
      myChart.innerHTML += text;
    }
    $(".chart:eq("+ index + ")").css("height","auto");
  }

在Vue的mounted()函数中传入每个问题给drawChart函数。这个mounted()会在页面加载完成后自动调用

    for(var i = 0; i < this.questions.length; i++){
      drawChart(i, this.questions[i]);
    };

最后测试三种问题的显示效果，如图