frame/parts/statistics/quest-chart.vue

<template>
  <div id="quest-chart">
    <el-row type="flex" align="middle" justify="start" class="btn_bar">
      <el-col :span="10"> {{ data.topic }} [{{ data.type | topicType }}] </el-col>
    </el-row>
    <template v-if="data.type != 2">
      <el-row type="flex" align="middle" justify="center" v-if="btnModel.table">
        <el-col :span="16">
          <el-table :data="data.option" size="mini" border stripe>
            <el-table-column align="center" label="选项" prop="opname"></el-table-column>
            <el-table-column align="center" label="小计" prop="value"></el-table-column>
            <el-table-column align="center" label="比例">
              <template v-slot="{ row, $index }">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="getPercent(row.value)" :color="getPS(getPercent(row.value))"></el-progress>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" justify="center" class="btn_bar" :gutter="10" v-if="!nodata">
        <el-col :span="3" v-for="(i, index) in btnList" :key="index">
          <el-button :type="btnModel[i.model] ? 'primary' : ''" size="mini" @click="changeModel(i.model)">
            {{ i.text }}
          </el-button>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" justify="center">
        <el-col :span="16" v-if="btnModel.column">
          <g2column :data="data.option" :axis="axis" :gid="data._id"></g2column>
        </el-col>
        <el-col :span="16" v-if="btnModel.pie">
          <g2pie :data="data.option" :axis="axis" :gid="data._id"></g2pie>
        </el-col>
        <el-col :span="16" v-if="btnModel.donut">
          <g2donut :data="data.option" :axis="axis" :gid="data._id"></g2donut>
        </el-col>
        <el-col :span="16" v-if="btnModel.bar">
          <g2bar :data="data.option" :axis="axis" :gid="data._id"></g2bar>
        </el-col>
      </el-row>
    </template>
    <template v-else>
      <div style="margin:10px">见详情</div>
    </template>
  </div>
</template>

<script>
import _ from 'lodash';
import g2column from '@frame/parts/statistics/column.vue';
import g2pie from '@frame/parts/statistics/pie.vue';
import g2donut from '@frame/parts/statistics/donut.vue';
import g2bar from '@frame/parts/statistics/bar.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'quest-chart',
  props: {
    data: { type: [Object, Array], default: () => [] },
    nodata: { type: Boolean, default: false },
  },
  components: { g2column, g2pie, g2donut, g2bar },
  data: function() {
    return {
      axis: {
        x: 'opname',
        xAlias: '选项',
        y: 'value',
        yAlias: '数量',
      },
      btnModel: {
        table: true,
        pie: false,
        dount: false,
        column: false,
        bar: false,
      },
      btnList: [
        { text: '表格', model: 'table' },
        { text: '饼状图', model: 'pie' },
        { text: '圆环图', model: 'donut' },
        { text: '柱状图', model: 'column' },
        { text: '条形图', model: 'bar' },
      ],
    };
  },
  created() {},
  methods: {
    changeModel(model) {
      if (model !== 'table') {
        let keys = Object.keys(this.btnModel);
        for (const key of keys) {
          if (key != 'table' && key != model) {
            this.btnModel[key] = false;
          }
        }
      }
      this.btnModel[model] = !this.btnModel[model];
      this.$forceUpdate();
    },
    getPercent(num) {
      let all = this.data.option.reduce((prev, next) => prev + next.value * 1 || 0, 0);
      if (all == 0) return 0;
      let percent = _.round(_.divide(num * 1, all), 4);
      percent = _.round(_.round(percent, 4) * 100, 2);
      return percent;
    },
    getPS(percent) {
      if (percent >= 70) return 'red';
      if (_.inRange(percent, 30, 70)) return 'blue';
      if (percent <= 30) return 'gray';
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  filters: {
    topicType(val) {
      if (val == 0) return '单选题';
      if (val == 1) return '多选题';
      if (val == 2) return '简答题';
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>