diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index d3a6e194..842a2687 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -718,6 +718,7 @@ export default { time:'Time', exportSure:'Confirm whether to export all statistical data', exportEmpty: "Export data is empty", + showChartSelected: "Show All", } }, traceManage: { diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index e59d6ced..2a27a2a2 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -718,6 +718,7 @@ export default { time:'时间', exportSure:'确认是否导出全部统计数据', exportEmpty: "导出数据为空", + showChartSelected: "显示全部", } }, traceManage: { diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue index 9b70aea5..c35a4dea 100644 --- a/src/views/perfManage/goldTarget/index.vue +++ b/src/views/perfManage/goldTarget/index.vue @@ -161,6 +161,8 @@ type StateType = { /**网元类型 */ neType: string[]; /**图表标签选择 */ + chartLegendSelectedFlag: boolean; + /**图表标签选择 */ chartLegendSelected: Record; /**图表配置数据 */ chartOption: EChartsOption; @@ -169,6 +171,7 @@ type StateType = { /**对象信息状态 */ let state: StateType = reactive({ neType: [], + chartLegendSelectedFlag: false, chartLegendSelected: {}, chartOption: { tooltip: { @@ -197,12 +200,7 @@ let state: StateType = reactive({ color: '#646A73', }, icon: 'circle', - selected: { - // 选中'系列1' - 系列1: true, - // 不选中'系列2' - 系列2: false, - }, + selected: {}, }, grid: { left: '10%', @@ -224,10 +222,6 @@ let state: StateType = reactive({ }, }); -function fnChangShowType() { - tableState.showTable = !tableState.showTable; -} - /** * 数据列表导出 */ @@ -368,6 +362,11 @@ function fnGetList() { }); } +/**切换显示类型 图或表格 */ +function fnChangShowType() { + tableState.showTable = !tableState.showTable; +} + /**绘制图表 */ function fnRanderChart() { const container: HTMLElement | undefined = kpiChartDom.value; @@ -429,7 +428,7 @@ function fnRanderChartData() { data: [], }); tableColumnsKeyArr.push(`${columns.key}`); - chartLegendSelected[`${columns.title}`] = false; + chartLegendSelected[`${columns.title}`] = state.chartLegendSelectedFlag; } // 用降序就反转 @@ -449,6 +448,7 @@ function fnRanderChartData() { } } // console.log(queryParams.sortOrder, xDatas, yDatas); + // 图标签选择状态标记 state.chartLegendSelected = chartLegendSelected; kpiChart.value.setOption({ @@ -462,6 +462,21 @@ function fnRanderChartData() { }); } +/**图表折线显示全部 */ +function fnLegendSelected(bool: any) { + const chartLegendSelected: Record = {}; + for (const key of Object.keys(state.chartLegendSelected)) { + chartLegendSelected[key] = bool; + } + // 图标签选择状态标记 + state.chartLegendSelected = chartLegendSelected; + kpiChart.value.setOption({ + legend: { + selected: chartLegendSelected, + }, + }); +} + onMounted(() => { // 获取网元网元列表 neInfoStore.fnNelist().then(res => { @@ -662,6 +677,20 @@ onMounted(() => { + + + + + +