vue3.0 使用echarts

按需引入

echarts官网

使用过的chart

• 检测左侧列表栏展开收起，会重新绘制

1. bar
2. line
3. pie
4. gauge-circle

gitee地址

配合hooks使用，在没有不统计api情况下，可以根据列表数据生成echart数据

import { ComputedRef, ref, Ref } from "@vue/reactivity";

import { computed } from "@vue/runtime-core";

import { AnyObject } from "element-plus/lib/el-table/src/table.type";

import { parseTime } from "..";

// 统计


// 折线图


export const chartData: Ref<Array<AnyObject>> = ref([]);

export const chartDataObj: Ref<AnyObject> = ref({

    xData: [],

    data: [],

    title: ''

})

export const filterChartLineData = (data: Array<AnyObject>, key='createTime') => {

        chartData.value = data.slice(0, 100);

        chartDataObj.value.title = '近' + chartData.value.length + '条数据统计';

        chartDataObj.value.xData = [];

        chartDataObj.value.data = [];

        chartData.value.map((item) => {

        const dateItem = parseTime(item[key], '{y}-{m}-{d}');

        const index = chartDataObj.value.xData.findIndex((item: string) => item === dateItem);

        if (index === -1) {

        chartDataObj.value.xData.unshift(dateItem);

        chartDataObj.value.data.unshift(1);

        } else {

        chartDataObj.value.data[index]++;

    }

})

}


// 柱状图

export const chartDateLineObj: Ref<AnyObject> = ref({
    xData: [],
    data: [],
    title: '',
    name: '数量'
})

export const chartPieObj: ComputedRef<AnyObject> = computed(() => {

const data = chartDateLineObj.value.xData.map((item: string, index: number) => {

    return {

        name: item,

        value: chartDateLineObj.value.data[index]

    }

});

return {

    data,

    title: chartDateLineObj.value.title

}

})


// 时间统计

export const filterDates: Ref<Array<AnyObject>> = ref([{

label: '今天',

value: 0

},{

label: '近三天',

value: 2

},{

label: '近一周',

value: 6

},{

label: '近一月',

value: 30

}])

export const filterDateLineData = (data: Array<AnyObject>, dateNumber = 0, key='createTime', filterKey='userId') => {

    const doDay = new Date(new Date().toDateString()).getTime();

    const lastTime = doDay - (dateNumber*24*60*60*1000);

    const chartData = data.filter((item) => new Date(item[key]).getTime() >= lastTime);

    chartDateLineObj.value.title = dateNumber ? '近' + (dateNumber + 1) + '天数据统计' : '今日数据统计';

    chartDateLineObj.value.xData = [];

    chartDateLineObj.value.data = [];

    chartData.map((item) => {

    let xDataItem = '';

    if (filterKey.indexOf('.')) {

    const keyItems = filterKey.split('.')

    let newItem = item

    keyItems.forEach((kI) => {

    newItem = newItem[kI]

    });

    xDataItem = newItem ? newItem.toString(): '';

} else {

    xDataItem = item[filterKey]

}

if (xDataItem.length > 10) {

    xDataItem = xDataItem.slice(0, 5);

}

const index = chartDateLineObj.value.xData.findIndex((itm: string) => itm === xDataItem);

    if (index === -1) {

        chartDateLineObj.value.xData.unshift(xDataItem);

        chartDateLineObj.value.data.unshift(1);

    } else {

        chartDateLineObj.value.data[index]++;

    }

})

}

// 数目统计 - pie

export const filterCountData = (data: Array<AnyObject>, key = '', title = '', add = false) => {

    let styleData: Array<string> = [];

    styleData = data.map((item: AnyObject) => {

        if (key.indexOf('.')) {

            const keyItems = key.split('.')

            let newItem = item

            keyItems.forEach((kI) => {

            newItem = newItem[kI]

        })

        return newItem

    }

    return item[key];

    });



const rData: Array<AnyObject> = [];

styleData.map((itm) => {

    const index = rData.map((item) => item.name).findIndex((item: string) => item === itm);

    if (index === -1) {

        rData.push({

            name: itm,

            value: 1

        })

    } else {

        if (add) {

            rData[index].value++;

        }

    }

    });

    return {

        data: rData,

        title

    }

}


// gauge-circle


// data为filterCountData中data格式{name: '', value: 0}

export const getGaugeCircle = (data: Array<AnyObject>, space = 15) => {

    const total = data.reduce((total, item) => {return total += item.value}, 0);

    const centerIndex = (data.length - 1) / 2;

    const center = -10;

    const items = data.map((item, index) => {{

        const count = index - centerIndex;

        return {

            value: +((item.value * 100 / total).toFixed(2)),

            name: item.name,

            title: {

                offsetCenter: ['0%', (center + 2*count*space) + '%']

            },

            detail: {

                valueAnimation: true,

                offsetCenter: ['0%', (center + (2*count + 1)*space) + '%']

            }

        }

    }});

    return items

}