| | |
| | | <template> |
| | | <div style="width: calc(100ch - 28px)"> |
| | | <template v-if="summaryList && summaryList.length > 0"> |
| | | <div class="w-full" v-for="(item, idx) in summaryList" :key="idx"> |
| | | <h3>{{ item.title }}</h3> |
| | | <el-table ref="tableRefList" class="w-full" :data="[{}]"> |
| | | <el-table-column v-for="(col, index) in item.values" :label="col.title" :key="index"> |
| | | <template #default="scope"> |
| | | {{ col?.value }} |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <template v-if="data && data.length > 0"> |
| | | <template v-if="summaryList && summaryList.length > 0"> |
| | | <div class="w-full" v-for="(item, idx) in summaryList" :key="idx"> |
| | | <h3>{{ item.title }}</h3> |
| | | <el-table ref="tableRefList" class="w-full" :data="[{}]"> |
| | | <el-table-column v-for="(col, index) in item.values" :label="col.title" :key="index"> |
| | | <template #default="scope"> |
| | | {{ col?.value }} |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </template> |
| | | |
| | | <div |
| | | class="flex-column w-full" |
| | | :class="{ 'mt-10': summaryList && summaryList.length > 0 }" |
| | | v-if="recordSetList && recordSetList.length > 0" |
| | | > |
| | | <div class="min-h-[48rem] flex-auto w-full"> |
| | | <div ref="chartRefList" v-for="(item, index) in recordSetList" :key="index"></div> |
| | | </div> |
| | | </div> |
| | | <div v-if="urlList && urlList.length > 0" class="w-full"> |
| | | <HTMLCom :data="item.url" v-for="(item, index) in urlList" :key="index"></HTMLCom> |
| | | </div> |
| | | </template> |
| | | |
| | | <div class="flex-column w-full mt-10" v-if="recordSetList && recordSetList.length > 0"> |
| | | <el-select class="flex-0 w-36 ml-auto mr-16" v-model="selectChartType" @change="selectChartTypeChange"> |
| | | <el-option |
| | | v-for="item in Object.keys(chartTypeMapName)" |
| | | :key="item" |
| | | :value="parseInt(item)" |
| | | :label="chartTypeMapName[item]" |
| | | ></el-option> |
| | | </el-select> |
| | | <div class="min-h-[48rem] flex-auto w-full"> |
| | | <div ref="chartRefList" v-for="(item, index) in recordSetList" :key="index"></div> |
| | | </div> |
| | | </div> |
| | | <div v-else class="text-red-500">{{ error }}</div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import type { TableInstance } from 'element-plus'; |
| | | import _ from 'lodash'; |
| | | import { computed, onMounted, ref } from 'vue'; |
| | | import { ChartTypeEnum, chartTypeMapEchart, chartTypeMapName } from '../types'; |
| | | import { AnswerType } from '../../model/types'; |
| | | import { PATH_ICON, SCATTER_SYMBOL_SIZE, timeDataOptionToContent } from '../common'; |
| | | import HTMLCom from '../htmlCom/HTMLCom.vue'; |
| | | import { ChartTypeEnum, chartTypeMapEchart } from '../types'; |
| | | import { axisLabelFormatter } from '/@/utils/chart'; |
| | | |
| | | const props = defineProps(['data']); |
| | | const props = defineProps(['data', 'error']); |
| | | |
| | | const selectChartType = ref<ChartTypeEnum>(ChartTypeEnum.Line); |
| | | |
| | |
| | | refList = [chartRef.value as unknown as HTMLDivElement]; |
| | | } |
| | | } |
| | | |
| | | return refList; |
| | | }); |
| | | |
| | | const recordSetList = computed(() => props.data.filter((item) => item.type === 'recordset')); |
| | | const summaryList = computed(() => props.data.filter((item) => item.type === 'summary')); |
| | | const recordSetList = computed(() => props.data.filter((item) => item.type === AnswerType.RecordSet)); |
| | | const summaryList = computed(() => props.data.filter((item) => item.type === AnswerType.Summary)); |
| | | const urlList = computed(() => props.data.filter((item) => item.type === AnswerType.Url)); |
| | | |
| | | const drawAllChart = () => { |
| | | chartInstanceList.map((item, index) => { |
| | | drawChart(item, recordSetList.value[index]); |
| | |
| | | name: item === 'default' ? '' : item, |
| | | data: values.map((item) => [item[timeIndex], item[valueIndex]]), |
| | | type: chartTypeMapEchart[selectChartType.value], |
| | | symbol: 'none', |
| | | smooth: true, |
| | | }; |
| | | }); |
| | | |
| | | instance.setOption({ |
| | | grid: { |
| | | // bottom: 120, |
| | | // right: '15%', |
| | | bottom: '15%', |
| | | bottom: '5%', |
| | | }, |
| | | toolbox: { |
| | | show: true, |
| | | feature: { |
| | | dataZoom: { |
| | | yAxisIndex: 'none', |
| | | }, |
| | | |
| | | myBar: { |
| | | title: '转化为柱状图', |
| | | show: true, |
| | | icon: PATH_ICON.bar, |
| | | onclick: () => { |
| | | instance.setOption({ |
| | | series: seriesData.map((item) => ({ |
| | | ...item, |
| | | type: 'bar', |
| | | symbol: 'none', |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | |
| | | myScatter: { |
| | | title: '转化为散点图', |
| | | show: true, |
| | | icon: PATH_ICON.scatter, |
| | | onclick: () => { |
| | | instance.setOption({ |
| | | series: seriesData.map((item) => ({ |
| | | ...item, |
| | | type: 'scatter', |
| | | symbol: 'circle', |
| | | symbolSize: SCATTER_SYMBOL_SIZE, |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | myLine: { |
| | | title: '转化为曲线图', |
| | | show: true, |
| | | icon: PATH_ICON.line, |
| | | onclick: () => { |
| | | instance.setOption({ |
| | | series: seriesData.map((item) => ({ |
| | | ...item, |
| | | type: 'line', |
| | | symbol: 'none', |
| | | smooth: true, |
| | | })), |
| | | }); |
| | | }, |
| | | }, |
| | | dataView: { |
| | | readOnly: true, |
| | | optionToContent: timeDataOptionToContent, |
| | | }, |
| | | saveAsImage: {}, |
| | | }, |
| | | }, |
| | | |
| | | tooltip: { |
| | | show: true, |
| | | trigger: 'axis', |
| | | }, |
| | | title: { |
| | | text: data?.title, |
| | |
| | | |
| | | if (!parent) { |
| | | return; |
| | | } else { |
| | | } |
| | | |
| | | const parentBound = parent.getBoundingClientRect(); |