CostumingPlatform/ant-design-vue-jeecg/src/views/teamstatistics/TeamStatisticsList.vue

<template>
  <a-card :bordered="false">
  <div>
    <div style="font-size:30px;text-align:center">2021-11-2</div>
    <v-chart :forceFit="true" :height="height" :data="data">
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-bar position="月份*月均降雨量" color="name" :adjust="adjust" />
    </v-chart>

    <v-chart :forceFit="true" :height="height" :data="data2">
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-bar position="月份*月均降雨量" color="name" :adjust="adjust" />
    </v-chart>

  </div>
  </a-card>
</template>


<script>




  const DataSet = require('@antv/data-set');

  const sourceData = [
    { name: '一班组日产件数', '一车间': 310, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },
    { name: '二班组日产件数', '一车间': 296, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },
    { name: '三班组日产件数', '一车间': 298, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },
    { name: '四班组日产件数', '一车间': 305, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },
    { name: '五班组日产件数', '一车间': 304, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },

  ];

  const dv = new DataSet.View().source(sourceData);
  dv.transform({
    type: 'fold',
    fields: ['一车间', '二车间', '三车间', '四车间', '五车间'],
    key: '月份',
    value: '月均降雨量',
  });
  const data = dv.rows;


  const DataSet2 = require('@antv/data-set');

  const sourceData2 = [
    { name: '一班组生产效率（%）', '一车间': 69.68, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },
    { name: '二班组生产效率（%）', '一车间': 72.97, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },
    { name: '三班组生产效率（%）', '一车间': 72.48, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },
    { name: '四班组生产效率（%）', '一车间': 70.82, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },
    { name: '五班组生产效率（%）', '一车间': 71.05, '二车间': 0, '三车间': 0, '四车间': 0, '五车间': 0 },

  ];

  const dv2 = new DataSet2.View().source(sourceData2);
  dv2.transform({
    type: 'fold',
    fields: ['一车间', '二车间', '三车间', '四车间', '五车间'],
    key: '月份',
    value: '月均降雨量',
  });
  const data2 = dv2.rows;

  export default {
    data() {
      return {
        data,
        data2,
        height: 400,
        adjust: [{
          type: 'dodge',
          marginRatio: 1 / 32,
        }],
      };
    },
  };
</script>