用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]);};

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

用Vue和ECharts绘制问卷统计结果相关推荐

vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
vue使用echarts绘制地图
由于vue-echarts网上能找到的资源太少了,鼓捣了好久地图也没出来,最后还是放弃了,还是用echarts吧.直接贴代码 <template><div class="& ...
vue集成echarts 绘制中国地图
最近项目遇见了需要以中国地图展示的需求了解到 echarts 是一个很好用的图表展示工具 ,但发现官网没有关于中国地图的组件,经过了解,echarts 5.0以上将中国地图去掉了,需要用到chi ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...

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

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

用Vue和ECharts绘制问卷统计结果相关推荐

最新文章

热门文章