From 06c2bddafdbfa89f253c065136e4b9a77d048a4e Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 23 十月 2024 16:45:47 +0800
Subject: [PATCH] activeChartType
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue | 261 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 163 insertions(+), 98 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
index b39432e..f7b6056 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
+++ b/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) => {
--
Gitblit v1.9.3