activeChartType

wujingjing

2024-10-23 06c2bddafdbfa89f253c065136e4b9a77d048a4e

 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) => {