| | |
| | | <template> |
| | | <div class="min-w-[100ch]"> |
| | | <div class="ml-10" v-for="(item, idx) in summaryList" :key="idx"> |
| | | <h3>{{ item.title }}</h3> |
| | | <el-table class="mt-2" :data="item.values" :style="{ width: `${columnsWidth * (item.values?.length ?? 1)}px` }"> |
| | | <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> |
| | | <div class="flex-column w-full"> |
| | | <template v-if="summaryList && summaryList.length > 0"> |
| | | <div class="ml-10" v-for="(item, idx) in summaryList" :key="idx"> |
| | | <h3>{{ item.title }}</h3> |
| | | <el-table class="mt-2" :data="item.values" :style="{ width: `${columnsWidth * (item.values?.length ?? 1)}px` }"> |
| | | <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" 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)" |
| | |
| | | :label="chartTypeMapName[item]" |
| | | ></el-option> |
| | | </el-select> |
| | | <div class="min-h-[48rem] flex-auto w-full" 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> |
| | |
| | | return refList; |
| | | }); |
| | | |
| | | const recordSetList = props.data.filter((item) => item.type === 'recordset'); |
| | | const summaryList = props.data.filter((item) => item.type === 'summary'); |
| | | |
| | | const recordSetList = computed(() => props.data.filter((item) => item.type === 'recordset')); |
| | | const summaryList = computed(() => props.data.filter((item) => item.type === 'summary')); |
| | | const drawAllChart = () => { |
| | | chartInstanceList.map((item, index) => { |
| | | drawChart(item, recordSetList[index]); |
| | | drawChart(item, recordSetList.value[index]); |
| | | }); |
| | | }; |
| | | |
| | |
| | | |
| | | const drawChart = (instance, data) => { |
| | | const xType = 'time'; |
| | | |
| | | let timeIndex = data.cols.findIndex((item) => item.type === 'time'); |
| | | if (timeIndex === -1) { |
| | | timeIndex = 0; |
| | |
| | | show: true, |
| | | }, |
| | | title: { |
| | | text: data.title, |
| | | text: data?.title, |
| | | left: 'center', |
| | | }, |
| | | xAxis: { |
| | | name: timeCol.title, |
| | | name: timeCol?.title, |
| | | type: xType, |
| | | }, |
| | | yAxis: { |
| | | name: valueCol.title, |
| | | name: valueCol?.title, |
| | | type: 'value', |
| | | axisLabel: { |
| | | formatter: axisLabelFormatter, |
| | |
| | | let chartInstanceList: echarts.ECharts[] = null; |
| | | onMounted(() => { |
| | | setTimeout(() => { |
| | | const parent = chartRefList.value[0].parentElement; |
| | | const parent = chartRefList.value[0]?.parentElement; |
| | | const data = props.data; |
| | | |
| | | if (!parent) { |
| | | return; |
| | | } else { |
| | | } |
| | | |
| | | const parentBound = parent.getBoundingClientRect(); |
| | | let divideCount = 1; |
| | | // if(chartRefList.value.length>=2){ |
| | | // divideCount = 2; |
| | | // } |
| | | |
| | | const width = parentBound.width / divideCount; |
| | | chartInstanceList = chartRefList.value.map((item) => { |
| | | return echarts.init(item, undefined, { |
| | |
| | | }); |
| | | }); |
| | | drawAllChart(); |
| | | }, 300); |
| | | }, 1000); |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"></style> |