activeChartType

wujingjing

2024-10-23 06c2bddafdbfa89f253c065136e4b9a77d048a4e

activeChartType

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -111,6 +111,8 @@
import DisplayMode from '../recordSet/components/DisplayMode.vue';
import * as echarts from 'echarts';
import { PATH_ICON } from '../../../common';
import { ChartTypeEnum } from '../../../types';
import { axisLabelFormatter } from '/@/utils/chart';

const props = defineProps({
    data: {
@@ -754,6 +756,8 @@
});

let groupTitle;

let activeChartType: ChartTypeEnum = ChartTypeEnum.Bar;
const getChartData = (values: Array<any[]>) => {
    // 排除合计行；
    const groupValues = values.slice(0, values.length - 1);
@@ -775,14 +779,15 @@
    return data;
};

const getPieOption = (chartData: any[]) => {
    // const labelFormatter = chartData.length > 9 ? '{b}' : '{b}\n{c}/{d}%';
    const labelFormatter = '{b}: {c} / {d}%';
const getTooltip = () => {
    return {
        trigger: 'item',
        valueFormatter: (value) => `${value} / ${toPercent(sumValue === 0 ? 0 : (value as number) / sumValue, true, 2)}`,
    } as any;
};

    const option: echarts.EChartsOption = {
        // grid:{
        //     containLabel:true
        // },
const getCommonOption = () => {
    return {
        title: {
            text: props.data.title,
            left: 'center',
@@ -790,99 +795,20 @@
                fontSize: 14,
            },
        },
        tooltip: {
            trigger: 'item',
            valueFormatter: (value) => `${value}(${toPercent(sumValue === 0 ? 0 : (value as number) / sumValue, true, 2)})`,
        },

        legend: {
            type: 'scroll',
            // orient:'vertical',
            top: 33,
            left: 'center',
        },
        toolbox: {
            show: true,
            feature: {
                myBar: {
                    title: '转化为柱状图',
                    show: true,
                    icon: PATH_ICON.bar,
                    onclick: () => {
                        const barData = chartData.map((item) => item.value);
                        const right = groupTitle
                            ? {
                                    right: 60,
                              }
                            : {
                                    right: 30,
                              };
                        const xData = chartData.map((item) => item.name);
                        chartInstance.value.setOption({
                            grid: {
                                top: 65,
                                left: 30,
                                ...right,
                                bottom: 0,
                                containLabel: true,
                            },
                            xAxis: {
                                name: groupTitle,
                                type: 'category',
                                data: xData,
                                axisLabel: {
                                    fontSize: 12,
                                    formatter: function (value) {
                                        if (value.length > 6) {
                                            return value.substr(0, 6) + '...';
                                        } else {
                                            return value;
                                        }
                                    },
                                    rotate: 30,
                                },
                                nameTextStyle: {
                                    padding: [-15, 0, 0, -10],
                                    align: 'left',
                                    verticalAlign: 'top',
                                    // color: '#fff',
                                },
                                nameTruncate: {
                                    maxWidth: 52,
                                },
                            },
                            yAxis: {
                                name: tableCols.value[valueColIndex].title,
                                type: 'value',
                            },
                            series: {
                                type: 'bar',
                                data: barData,
                                label: {
                                    show: true,
                                    position: 'outside',
                                },
                            },
                            dataZoom: {
                                type: 'inside',
                            },
                        });
                    },
                },
    } as echarts.EChartsOption;
};

                myPie: {
                    title: '转化为饼状图',
                    show: true,
                    icon: PATH_ICON.pie,
                    onclick: () => {
                        chartInstance.value.setOption(getPieOption(chartData), {
                            notMerge: true,
                        });
                    },
                },

                saveAsImage: {},
            },
        },
const getPieOption = (chartData: any[]) => {
    // const labelFormatter = chartData.length > 9 ? '{b}' : '{b}\n{c}/{d}%';
    const labelFormatter = '{b}: {c} / {d}%';
    return {
        series: [
            {
                type: 'pie',
@@ -890,7 +816,7 @@
                center: ['50%', '55%'],
                label: {
                    show: true,
                    formatter: '{b}: {c}({d}%)', //自定义显示格式(b:name, c:value, d:百分比)
                    // formatter: '{b}: {c}({d}%)', //自定义显示格式(b:name, c:value, d:百分比)
                },
                bottom: 0,
                itemStyle: {
@@ -907,20 +833,159 @@
                data: chartData,
            },
        ],
    } as echarts.EChartsOption;
};

const getBarOption = (chartData: any[]) => {
    const barData = chartData.map((item) => item.value);
    const right = groupTitle
        ? {
                right: 60,
          }
        : {
                right: 30,
          };
    const xData = chartData.map((item) => item.name);
    return {
        grid: {
            top: 65,
            left: 30,
            ...right,
            bottom: 0,
            containLabel: true,
        },
        xAxis: {
            name: groupTitle,
            type: 'category',
            data: xData,
            axisLabel: {
                fontSize: 12,
                // formatter: function (value) {
                //     if (value.length > 6) {
                //         return value.substr(0, 6) + '...';
                //     } else {
                //         return value;
                //     }
                // },
                width:86,
                overflow:'truncate',
                // nameTruncate: {
                //     maxWidth: 52,
                // },
                rotate: 30,
            },
            nameTextStyle: {
                padding: [-15, 0, 0, -10],
                align: 'left',
                verticalAlign: 'top',
                // color: '#fff',
            },
            nameTruncate: {
                maxWidth: 52,
            },
        },
        yAxis: {
            name: tableCols.value[valueColIndex].title,
            type: 'value',
            axisLabel: {
                formatter: axisLabelFormatter,
            },
        },
        series: {
            type: 'bar',
            data: barData,
            label: {
                show: true,
                position: 'outside',
                formatter: (params) => {
                    const value = params.value;
                    return `${value} / ${toPercent(sumValue === 0 ? 0 : (value as number) / sumValue, true, 2)}`;
                },
                fontSize: 10,
            },
        },
        dataZoom: {
            type: 'inside',
        },
    } as echarts.EChartsOption;
};

const getChartOption = (chartData: any[]) => {
    let typeOption: echarts.EChartsOption = {};
    if (activeChartType === ChartTypeEnum.Pie) {
        typeOption = getPieOption(chartData);
    } else if (activeChartType === ChartTypeEnum.Bar) {
        typeOption = getBarOption(chartData);
    }

    const option: echarts.EChartsOption = {
        ...getCommonOption,
        tooltip: getTooltip(),
        toolbox: {
            show: true,
            feature: {
                myBar: {
                    title: '转化为柱状图',
                    show: true,
                    icon: PATH_ICON.bar,
                    onclick: () => {
                        activeChartType = ChartTypeEnum.Bar;
                        chartInstance.value.setOption(
                            {
                                ...getCommonOption,
                                tooltip: getTooltip(),

                                toolbox: option.toolbox,
                                ...getBarOption(chartData),
                            },
                            {
                                notMerge: true,
                            }
                        );
                    },
                },

                myPie: {
                    title: '转化为饼状图',
                    show: true,
                    icon: PATH_ICON.pie,
                    onclick: () => {
                        activeChartType = ChartTypeEnum.Pie;
                        chartInstance.value.setOption(
                            {
                                ...getCommonOption,
                                tooltip: getTooltip(),
                                toolbox: option.toolbox,
                                ...getPieOption(chartData),
                            },
                            {
                                notMerge: true,
                            }
                        );
                    },
                },

                saveAsImage: {},
            },
        },
        ...typeOption,
    };

    return option;
};

const updateChart = () => {
    const chartData = getChartData(tableValues.value);

    const option = getPieOption(chartData);
    const option = getChartOption(chartData);
    nextTick(() => {
        if(!chartInstance.value){
        if (!chartInstance.value) {
            chartInstance.value = echarts.init(chartRef.value);
        }
	
        chartInstance.value.setOption(option);

        chartInstance.value.setOption(option, {
            notMerge: true,
        });
    });
};
const displayModeChange = (val: DisplayModeType) => {

 src/components/chat/chatComponents/types.ts

@@ -2,14 +2,7 @@
    Scatter = 'scatter',
    Line = 'line',
    Bar = 'bar',
    Score = 'score'
    Score = 'score',
    Pie='pie'
}

export const chartTypeMapName = {
    [ChartTypeEnum.Line]: '折线图',
    [ChartTypeEnum.Scatter]: '散点图',
    [ChartTypeEnum.Bar]: '柱状图',
    [ChartTypeEnum.Score]: '',

};