| | |
| | | @change="(val) => handleQueryChange(val, item)" |
| | | :disabled="chartLoading" |
| | | ></component> |
| | | <YRange v-model="yRange" @input="yRangeInput" /> |
| | | <el-checkbox class="m-1" v-model="isMultiCompare" label="多日对比" @change="multiCompareChange"></el-checkbox> |
| | | </div> |
| | | <div class="h-[20rem]" v-resize="chartContainerResize" v-loading="chartLoading"> |
| | | <div ref="chartRef"></div> |
| | |
| | | <script setup lang="ts"> |
| | | import type * as echarts from 'echarts'; |
| | | import _ from 'lodash'; |
| | | import moment from 'moment'; |
| | | import type { PropType } from 'vue'; |
| | | import { computed, ref, watch } from 'vue'; |
| | | import { SCATTER_SYMBOL_SIZE, chatComProps, getChatChartOption } from '../../../common'; |
| | | import { computed, ref } from 'vue'; |
| | | import { SCATTER_SYMBOL_SIZE, getChatChartOption } from '../../../common'; |
| | | import { useDrawChatChart } from '../../../hooks/useDrawChatChart'; |
| | | import YRange from './components/YRange.vue'; |
| | | import type { RecordSet, RecordSetParamsItem } from './types'; |
| | | import { recordSetMapCom } from './types'; |
| | | import { filterQuery } from '/@/api/ai/chat'; |
| | | import { deepClone } from '/@/utils/other'; |
| | | import { debounce } from '/@/utils/util'; |
| | | |
| | | const chartRef = ref<HTMLDivElement>(null); |
| | | const defaultDisplayType = 'line'; |
| | | |
| | | const yRange = ref({ |
| | | min: null as number, |
| | | max: null as number, |
| | | }); |
| | | // const props = defineProps({ |
| | | // data: { |
| | | // type: Object as PropType<RecordSet>, |
| | |
| | | let groupedValues = null; |
| | | let timeIndex = undefined; |
| | | let valueIndex = undefined; |
| | | let nameIndex = undefined; |
| | | |
| | | let timeCol = null; |
| | | let valueCol = null; |
| | | |
| | | let preData = null; |
| | | |
| | | const setNewOption = (series?: any[], extraOption: echarts.EChartsOption = {}) => { |
| | | const isEmpty = !series || series.length === 0; |
| | | if (isEmpty) { |
| | | series = Object.keys(groupedValues).map((item) => { |
| | | const values = groupedValues[item]; |
| | | return { |
| | | name: item === 'default' ? '' : item, |
| | | data: values.map((item) => [item[timeIndex], item[valueIndex]]), |
| | | type: defaultDisplayType, |
| | | symbol: 'none', |
| | | smooth: true, |
| | | }; |
| | | }); |
| | | } |
| | | const combineOption = _.defaultsDeep(extraOption, getChatChartOption(), { |
| | | grid: { |
| | | bottom: 20, |
| | | }, |
| | | legend: { |
| | | top: 19, |
| | | show: series?.length > 1, |
| | | type: 'scroll', |
| | | }, |
| | | toolbox: { |
| | | show: true, |
| | | feature: { |
| | | myBar: { |
| | | onclick: () => { |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | type: 'bar', |
| | | symbol: 'none', |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | |
| | | myScatter: { |
| | | onclick: () => { |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | type: 'scatter', |
| | | symbol: 'circle', |
| | | symbolSize: SCATTER_SYMBOL_SIZE, |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | myLine: { |
| | | onclick: () => { |
| | | chartInstance.value.setOption({ |
| | | series: series.map((item) => ({ |
| | | ...item, |
| | | type: 'line', |
| | | symbol: 'none', |
| | | smooth: true, |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | }, |
| | | }, |
| | | |
| | | title: { |
| | | text: preData?.title, |
| | | }, |
| | | xAxis: { |
| | | name: timeCol?.title, |
| | | }, |
| | | yAxis: { |
| | | name: valueCol?.title, |
| | | /** @description 不强制保留0 */ |
| | | scale: true, |
| | | }, |
| | | series: series, |
| | | } as echarts.EChartsOption); |
| | | chartInstance.value.setOption(combineOption, { |
| | | notMerge: true, |
| | | }); |
| | | }; |
| | | |
| | | const drawChart = () => { |
| | | const data = props.data; |
| | | preData = data; |
| | | const xType = 'time'; |
| | | timeIndex = data.cols.findIndex((item) => item.type === 'time'); |
| | | if (timeIndex === -1) { |
| | | timeIndex = 0; |
| | | } |
| | | const timeCol = data.cols[timeIndex]; |
| | | timeCol = data.cols[timeIndex]; |
| | | |
| | | valueIndex = data.cols.findIndex((item) => item.type === 'value'); |
| | | if (valueIndex === -1) { |
| | | valueIndex = 2; |
| | | } |
| | | const valueCol = data.cols[valueIndex]; |
| | | valueCol = data.cols[valueIndex]; |
| | | |
| | | let nameCol = null; |
| | | groupedValues = null; |
| | | if (data.chart === 'muli_line') { |
| | | let nameIndex = data.cols.findIndex((item) => item.type === 'name'); |
| | | nameIndex = data.cols.findIndex((item) => item.type === 'name'); |
| | | if (nameIndex === -1) { |
| | | nameIndex = 1; |
| | | } |
| | |
| | | groupedValues = _.groupBy(data.values, (item) => item[nameIndex]); |
| | | } |
| | | |
| | | const seriesData = Object.keys(groupedValues).map((item) => { |
| | | const values = groupedValues[item]; |
| | | return { |
| | | name: item === 'default' ? '' : item, |
| | | data: values.map((item) => [item[timeIndex], item[valueIndex]]), |
| | | type: defaultDisplayType, |
| | | symbol: 'none', |
| | | smooth: true, |
| | | }; |
| | | }); |
| | | const combineOption = _.defaultsDeep(getChatChartOption(), { |
| | | grid: { |
| | | bottom: 20, |
| | | }, |
| | | toolbox: { |
| | | show: true, |
| | | feature: { |
| | | myBar: { |
| | | onclick: () => { |
| | | chartInstance.value.setOption({ |
| | | series: seriesData.map((item) => ({ |
| | | ...item, |
| | | type: 'bar', |
| | | symbol: 'none', |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | |
| | | myScatter: { |
| | | onclick: () => { |
| | | chartInstance.value.setOption({ |
| | | series: seriesData.map((item) => ({ |
| | | ...item, |
| | | type: 'scatter', |
| | | symbol: 'circle', |
| | | symbolSize: SCATTER_SYMBOL_SIZE, |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | myLine: { |
| | | onclick: () => { |
| | | chartInstance.value.setOption({ |
| | | series: seriesData.map((item) => ({ |
| | | ...item, |
| | | type: 'line', |
| | | symbol: 'none', |
| | | smooth: true, |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | }, |
| | | }, |
| | | |
| | | title: { |
| | | text: data?.title, |
| | | }, |
| | | xAxis: { |
| | | name: timeCol?.title, |
| | | }, |
| | | yAxis: { |
| | | name: valueCol?.title, |
| | | }, |
| | | series: seriesData, |
| | | } as echarts.EChartsOption); |
| | | chartInstance.value.setOption(combineOption); |
| | | setNewOption(); |
| | | }; |
| | | const { chartContainerResize, chartInstance } = useDrawChatChart({ chartRef, drawChart }); |
| | | |
| | |
| | | |
| | | const title = res?.values?.title; |
| | | const values = res?.values?.values ?? []; |
| | | groupedValues = _.groupBy(values, (item) => item[nameIndex]); |
| | | |
| | | if (isMultiCompare.value) { |
| | | handleMultiCompare(); |
| | | } else { |
| | | chartInstance.value.setOption({ |
| | | title: { |
| | | text: title, |
| | | }, |
| | | series: |
| | | groupedValues && |
| | | Object.keys(groupedValues).map(() => { |
| | | Object.keys(groupedValues).map((item) => { |
| | | const values = groupedValues[item]; |
| | | return { |
| | | data: values.map((item) => [item[timeIndex], item[valueIndex]]), |
| | | }; |
| | | }), |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | //#region ====================== 设置Y范围 ====================== |
| | | const debounceSetYRange = debounce((val) => { |
| | | chartInstance.value.setOption({ |
| | | yAxis: { |
| | | min: val.min, |
| | | max: val.max, |
| | | }, |
| | | }); |
| | | }); |
| | | |
| | | const yRangeInput = (val) => { |
| | | debounceSetYRange(val); |
| | | }; |
| | | |
| | | //#endregion |
| | | |
| | | //#region ====================== 多日对比 ====================== |
| | | // 多日对比基准时间 |
| | | const COMMON_DAY = '2024-07-26'; |
| | | |
| | | const isMultiCompare = ref(false); |
| | | const handleMultiCompare = () => { |
| | | if (!isMultiCompare.value) return; |
| | | const cloneData = deepClone(groupedValues); |
| | | const seriesData = Object.keys(cloneData).reduce((preVal, curVal, curIndex, arr) => { |
| | | const values = cloneData[curVal]; |
| | | const isMulti = arr.length > 1; |
| | | const groupByDateValues = _.groupBy(values, (item) => moment(item[timeIndex]).format('YYYY-MM-DD')); |
| | | for (const key in groupByDateValues) { |
| | | if (Object.prototype.hasOwnProperty.call(groupByDateValues, key)) { |
| | | const val = groupByDateValues[key]; |
| | | |
| | | const newVal = val.map((item) => { |
| | | // 新名称 |
| | | item[nameIndex] = isMulti ? `${curVal}_${key}` : `${key}`; |
| | | item[timeIndex] = COMMON_DAY + ' ' + moment(item[timeIndex]).format('HH:mm:ss'); |
| | | return item; |
| | | }); |
| | | |
| | | preVal.push(newVal); |
| | | } |
| | | } |
| | | return preVal; |
| | | }, []); |
| | | const series = seriesData.map<echarts.SeriesOption>((item) => ({ |
| | | name: item[0]?.[nameIndex], |
| | | data: item.map((item) => [item[timeIndex], item[valueIndex]]), |
| | | type: defaultDisplayType, |
| | | symbol: 'none', |
| | | smooth: true, |
| | | })); |
| | | setNewOption(series, { |
| | | 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> |
| | | <div style="clear: both"></div> |
| | | </div> |
| | | <div style="clear: both"></div> |
| | | </div>`; |
| | | }); |
| | | |
| | | 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"> |
| | | ${itemList.join('')} |
| | | <div style="clear: both"></div> |
| | | </div> |
| | | <div style="clear: both"></div> |
| | | </div> |
| | | <div style="clear: both"></div> |
| | | </div>`; |
| | | return result; |
| | | }, |
| | | }, |
| | | xAxis: { |
| | | min: COMMON_DAY + ' 00:00:00', |
| | | max: COMMON_DAY + ' 23:59:59', |
| | | splitNumber: 10, |
| | | axisLabel: { |
| | | formatter: (val) => { |
| | | const newVal = moment(val).format('HH:mm'); |
| | | return newVal; |
| | | }, |
| | | showMaxLabel: true, |
| | | }, |
| | | }, |
| | | }); |
| | | }; |
| | | const multiCompareChange = (val) => { |
| | | if (!groupedValues) return; |
| | | if (val) { |
| | | handleMultiCompare(); |
| | | } else { |
| | | setNewOption(); |
| | | } |
| | | }; |
| | | //#endregion |
| | | </script> |
| | | <style scoped lang="scss"></style> |