| | |
| | | import { computed, ref } from 'vue'; |
| | | import { SCATTER_SYMBOL_SIZE, getChatChartOption } from '../../../common'; |
| | | import { useDrawChatChart } from '../../../hooks/useDrawChatChart'; |
| | | import { ChartTypeEnum } from '../../../types'; |
| | | import YRange from './components/YRange.vue'; |
| | | import type { RecordSet, RecordSetParamsItem } from './types'; |
| | | import { RecordSetParamsType, recordSetMapCom } from './types'; |
| | | import { RecordSetParamsType, recordSetMapCom, scoreMap } from './types'; |
| | | import { filterQuery } from '/@/api/ai/chat'; |
| | | import { deepClone } from '/@/utils/other'; |
| | | import { debounce } from '/@/utils/util'; |
| | | import { ChartTypeEnum } from '../../../types'; |
| | | import { axisLabelFormatter } from '/@/utils/chart'; |
| | | |
| | | const chartRef = ref<HTMLDivElement>(null); |
| | | const yRange = ref({ |
| | |
| | | |
| | | let preData = null; |
| | | |
| | | let activeChartType: ChartTypeEnum = props.data.chart_type ?? ChartTypeEnum.Line; |
| | | |
| | | let activeChartType: ChartTypeEnum = props.data?.chart_type ?? ChartTypeEnum.Line; |
| | | const originChartType = activeChartType; |
| | | |
| | | const getChartTypeSeriesOption = (type: ChartTypeEnum) => { |
| | | let result = {}; |
| | | switch (type) { |
| | |
| | | }; |
| | | |
| | | break; |
| | | case ChartTypeEnum.Score: |
| | | result = { |
| | | type: 'bar', |
| | | symbol: 'none', |
| | | }; |
| | | |
| | | break; |
| | | |
| | | default: |
| | | break; |
| | | } |
| | |
| | | return { |
| | | name: item === 'default' ? '' : item, |
| | | data: values.map((item) => [item[timeIndex], item[valueIndex]]), |
| | | ...getChartTypeSeriesOption(activeChartType) |
| | | ...getChartTypeSeriesOption(activeChartType), |
| | | }; |
| | | }); |
| | | } |
| | | const combineOption = _.defaultsDeep(extraOption, getChatChartOption(), { |
| | | grid: { |
| | | bottom: 20, |
| | | }, |
| | | legend: { |
| | | top: 19, |
| | | show: series?.length > 1, |
| | | type: 'scroll', |
| | | }, |
| | | toolbox: { |
| | | show: true, |
| | | feature: { |
| | | myBar: { |
| | | onclick: () => { |
| | | activeChartType = ChartTypeEnum.Bar; |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | ...getChartTypeSeriesOption(activeChartType), |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | const yAxisFormatter = |
| | | originChartType === ChartTypeEnum.Score |
| | | ? (value) => { |
| | | return scoreMap[value]; |
| | | } |
| | | : axisLabelFormatter; |
| | | |
| | | myScatter: { |
| | | onclick: () => { |
| | | activeChartType = ChartTypeEnum.Scatter; |
| | | const tooltipValueFormatter = |
| | | originChartType === ChartTypeEnum.Score |
| | | ? (value) => { |
| | | return scoreMap[value]; |
| | | } |
| | | : undefined; |
| | | |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | ...getChartTypeSeriesOption(activeChartType), |
| | | })), |
| | | }); |
| | | const scoreYAxisOption: echarts.YAXisComponentOption = { |
| | | min: 0, |
| | | max: 4, |
| | | interval: 1, |
| | | axisLabel: { |
| | | formatter: yAxisFormatter, |
| | | }, |
| | | }; |
| | | const combineOption = _.defaultsDeep( |
| | | { |
| | | grid: { |
| | | bottom: 20, |
| | | }, |
| | | legend: { |
| | | top: 19, |
| | | show: true, |
| | | type: 'scroll', |
| | | }, |
| | | tooltip: { |
| | | valueFormatter: tooltipValueFormatter, |
| | | }, |
| | | toolbox: { |
| | | show: true, |
| | | feature: { |
| | | myBar: { |
| | | onclick: () => { |
| | | activeChartType = originChartType === ChartTypeEnum.Score ? ChartTypeEnum.Score : ChartTypeEnum.Bar; |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | ...getChartTypeSeriesOption(activeChartType), |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | }, |
| | | myLine: { |
| | | onclick: () => { |
| | | activeChartType = ChartTypeEnum.Line; |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | ...getChartTypeSeriesOption(activeChartType), |
| | | })), |
| | | }); |
| | | |
| | | myScatter: { |
| | | onclick: () => { |
| | | activeChartType = ChartTypeEnum.Scatter; |
| | | |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | ...getChartTypeSeriesOption(activeChartType), |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | myLine: { |
| | | onclick: () => { |
| | | activeChartType = ChartTypeEnum.Line; |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | ...getChartTypeSeriesOption(activeChartType), |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | }, |
| | | }, |
| | | }, |
| | | |
| | | title: { |
| | | text: preData?.title, |
| | | }, |
| | | xAxis: { |
| | | name: timeCol?.title, |
| | | }, |
| | | yAxis: { |
| | | name: valueCol?.title, |
| | | /** @description 不强制保留0 */ |
| | | scale: true, |
| | | }, |
| | | series: series, |
| | | } as echarts.EChartsOption); |
| | | title: { |
| | | text: preData?.title, |
| | | }, |
| | | xAxis: { |
| | | name: timeCol?.title, |
| | | }, |
| | | yAxis: { |
| | | name: valueCol?.title, |
| | | /** @description 不强制保留 */ |
| | | scale: true, |
| | | ...(originChartType === ChartTypeEnum.Score ? scoreYAxisOption : {}), |
| | | }, |
| | | series: series, |
| | | } as echarts.EChartsOption, |
| | | extraOption, |
| | | getChatChartOption() |
| | | ); |
| | | chartInstance.value.setOption(combineOption, { |
| | | notMerge: true, |
| | | }); |
| | |
| | | } |
| | | }; |
| | | |
| | | const getSingleDayOption = (day=COMMON_DAY) => ({ |
| | | tooltip: { |
| | | show: true, |
| | | trigger: 'axis', |
| | | formatter(params) { |
| | | const itemList = params.map((item, index) => { |
| | | return `<div style="margin: ${index === 0 ? 0 : 10}px 0 0; line-height: 1"> |
| | | const getSingleDayOption = (day = COMMON_DAY) => |
| | | ({ |
| | | tooltip: { |
| | | show: true, |
| | | trigger: 'axis', |
| | | formatter(params) { |
| | | const itemList = params.map((item, index) => { |
| | | return `<div style="margin: ${index === 0 ? 0 : 10}px 0 0; line-height: 1"> |
| | | <div style="margin: 0px 0 0; line-height: 1"> |
| | | ${item.marker}<span style="font-size: 14px; color: #666; font-weight: 400; margin-left: 2px" |
| | | >${item.seriesName}</span |
| | | ><span style="float: right; margin-left: 20px; font-size: 14px; color: #666; font-weight: 900">${item.data[1]}</span> |
| | | ><span style="float: right; margin-left: 20px; font-size: 14px; color: #666; font-weight: 900">${ |
| | | originChartType === ChartTypeEnum.Score ? scoreMap[item.data[1]] : item.data[1] |
| | | }</span> |
| | | <div style="clear: both"></div> |
| | | </div> |
| | | <div style="clear: both"></div> |
| | | </div>`; |
| | | }); |
| | | }); |
| | | |
| | | const result = `<div style="margin: 0px 0 0; line-height: 1"> |
| | | const result = `<div style="margin: 0px 0 0; line-height: 1"> |
| | | <div style="margin: 0px 0 0; line-height: 1"> |
| | | <div style="font-size: 14px; color: #666; font-weight: 400; line-height: 1">${params?.[0]?.data[0]?.slice(10, 16)}</div> |
| | | <div style="margin: 10px 0 0; line-height: 1"> |
| | |
| | | </div> |
| | | <div style="clear: both"></div> |
| | | </div>`; |
| | | return result; |
| | | }, |
| | | }, |
| | | xAxis: { |
| | | min: day + ' 00:00:00', |
| | | max: day + ' 23:59:59', |
| | | splitNumber: 10, |
| | | axisLabel: { |
| | | formatter: (val) => { |
| | | const newVal = moment(val).format('HH:mm'); |
| | | return newVal; |
| | | return result; |
| | | }, |
| | | showMaxLabel: true, |
| | | }, |
| | | }, |
| | | } as echarts.EChartsOption); |
| | | xAxis: { |
| | | min: day + ' 00:00:00', |
| | | max: day + ' 23:59:59', |
| | | splitNumber: 10, |
| | | axisLabel: { |
| | | formatter: (val) => { |
| | | const newVal = moment(val).format('HH:mm'); |
| | | return newVal; |
| | | }, |
| | | showMaxLabel: true, |
| | | }, |
| | | }, |
| | | } as echarts.EChartsOption); |
| | | //#region ====================== 设置Y范围 ====================== |
| | | const debounceSetYRange = debounce((val) => { |
| | | chartInstance.value.setOption({ |