V-chart数据统计展示

最新推荐文章于 2023-10-25 11:11:13 发布

原创最新推荐文章于 2023-10-25 11:11:13 发布 · 974 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中使用V-Charts库创建柱状图和环形图，包括数据配置和样式设置。同时展示了日期选择控件的实现，该控件限制了选择范围为最近30天且不超过当前日期，提供了默认值和自定义选项。

V-chart数据统计

1、柱状图

在这里插入图片描述

   <ve-histogram
          style="margin:0 auto;"
          width="60%"
          :data="statisticsChartData"
          :settings="chartSettings"
        />



  data(){
            this.chartSettings = {
                axisSite: { right: ['proportion'] },
                yAxisName: ['个数', '比例'],
                yAxisType: ['normal', 'percent'],
                labelMap: {
                    'count': "个数",
                    'proportion': "比例"
                }
            };
            return {
            	 statisticsChartData: {
                    columns: ['type', 'count', 'proportion'],
                    rows: [
                        { 'type': '常规测试', 'count': 0, 'proportion': 0,'title':"routine" }
                    ]
                }
           }
      }

2、环形图

在这里插入图片描述

<template>
  <div class="ringPanel">
    <lk-row>
      <div class="margin-bottom-20">
        {{ title }}
      </div>
      <div class="dataTable">
        <ve-ring
          :data="chartData"
          :settings="chartSettings"
          :extend="chartExtend"
        />
      </div>
    </lk-row>
  </div>
</template>

<script>

    const  defaultChartData = {
        columns: ['title', 'count'],
        rows: [
            { 'title': '带StoryID', 'count': 13 ,'proportion': 10}]
    };

    export default {
        props:{
            title: {
                type: String,
                default: '用例分析'
            },
            chartData: {
                type: Object,
                default: defaultChartData
            },
            centerText: {
                type: String,
                default: '当前总用例数'
            },
            centerData: {
                type: String,
                default: '0'
            }
        },
        data(){
            this.chartSettings = {
                label: { show: false },
                hoverAnimation: false,
                offsetY: 200,
            };
            return {
                chartExtend: {
                    legend: {
                        show: true,
                        right: '50%',
                        orient: 'vertical',
                        align:'left',
                        y: 'center',
                        formatter: (name) => {
                            const param = this.chartData.rows.find(item => {
                                return item[`title`] === name;
                            });
                            return '{label|' + name + '}' +
                                '{proportion|' + param.proportion + '%' + '}'+
                                '{count|' + param.count + '}';
                        },
                        textStyle: {
                            rich: {
                                label: {
                                    fontSize:14,
                                    align:'left',
                                    padding:[0,0,0,10]
                                },
                                count: {
                                    fontSize:14,
                                    align:'right',
                                    padding:[0,0,0,15],
                                },
                                proportion: {
                                    fontSize:14,
                                    align:'right',
                                    padding:[0,0,0,10],
                                }
                            }
                        }
                    },
                    series: {
                        center: ['30.5%', '50%']
                    },
                    graphic: [{
                        type: 'text',
                        left: '28%',
                        top: '45%',
                        style: {
                            text: this.centerText,
                            textAlign: 'center',
                            fill: '#000',
                            fontSize: 16,
                        }
                    }, {
                        type: 'text',
                        left: '30%',
                        top: '55%',
                        style: {
                            text: this.centerData,
                            textAlign: 'center',
                            fill: '#999999',
                            fontSize: 16,
                        }
                    }],
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .ringPanel {
        padding: 20px;
        .margin-bottom-20{
            padding-left: 8%;
            font-size: 17px;
            color: #666;
            font-weight: bold;
        }
        .dataTable {
            margin-top: 40px;
            margin-bottom: 40px;
        }
    }
</style>

3、日期选择控件（限制30天，且不超过今天）

在这里插入图片描述

   <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd"
          align="right"
          style="width: 100%"
          :clearable="false"
          :picker-options="pickerOptions"
        />

data:{
      	 timeRange: [],
         pickerMinDate: '',
         pickerOptions: {
                    disabledDate: (time) => {
                        if (this.pickerMinDate) {
                            const day1 = 31 * 24 * 3600 * 1000;
                            let maxTime = this.pickerMinDate + day1;
                            let minTime = this.pickerMinDate - day1;
                            if (maxTime > new Date()){
                                maxTime = new Date();
                            }
                            return time.getTime() > maxTime || time.getTime() < minTime;
                        }
                        return time.getTime() > Date.now();
                    },
                    onPick: ({ maxDate, minDate }) => {
                        this.pickerMinDate = minDate.getTime();
                        if (maxDate){
                            this.pickerMinDate = '';
                        }
                    }
}
 methods:  resetDate(){
                // 设置默认时间
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                this.timeRange = [start,end];
            }