修改type未定义bug，多坐标轴错乱，注释掉一些无用代码
This commit is contained in:
chen
leap
parent
533ba3333f
commit
96cbc32320
|
|
@ -1,183 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">选择实体列</span>
|
||||
<el-select v-model="selectedrow" placeholder="请选择实体列">
|
||||
<el-option
|
||||
v-for="row in rowOptions"
|
||||
:key="row.value"
|
||||
:label="row.label"
|
||||
:value="row.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">选择统计指标</span>
|
||||
<el-select v-model="selectedrow2" placeholder="统计指标">
|
||||
<el-option
|
||||
v-for="row in rowOptions2"
|
||||
:key="row.value"
|
||||
:label="row.label"
|
||||
:value="row.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">请选择起始日期列</span>
|
||||
<el-select v-model="selectedrow3" placeholder="日期列">
|
||||
<el-option
|
||||
v-for="row in rowOptions3"
|
||||
:key="row.value"
|
||||
:label="row.label"
|
||||
:value="row.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">图形样式</span>
|
||||
<el-select v-model="selectedChartType" placeholder="请选择图形样式">
|
||||
<el-option
|
||||
v-for="type in chartTypes"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineExpose, defineProps, defineEmits,watch } from 'vue';
|
||||
const selectedEntity = ref(null);
|
||||
const selectedChartType = ref(''); // 默认图表类型
|
||||
const selectedrow = ref(null);
|
||||
const selectedrow2 = ref(null);
|
||||
const selectedrow3= ref(null);
|
||||
|
||||
const rowOptions2=ref(null);
|
||||
const rowOptions3=ref(null);
|
||||
const chartTypes = [
|
||||
{ value: 'line', label: '折线图' },
|
||||
{ value: 'bar', label: '柱状图' },
|
||||
{ value: 'pie', label: '饼图' }
|
||||
];
|
||||
// 向父组件发送事件的方式
|
||||
const emits = defineEmits(['update:selectedEntity', 'update:selectedrow', 'update:selectedrow2','update:selectedrow3','update:selectedChartType']);
|
||||
|
||||
const props= defineProps({
|
||||
rowOptions: Array,
|
||||
|
||||
})
|
||||
|
||||
watch(() => props.rowOptions, (newVal) => {
|
||||
// 更新rowOptions2，将新数据插入到指定位置
|
||||
rowOptions2.value = [
|
||||
{ value: 'entity', label: '线索数' }, // 保留原有数据
|
||||
...newVal // 将新的选项添加进来
|
||||
];
|
||||
rowOptions3.value = [
|
||||
{ value: 'entity', label: '线索数' }, // 保留原有数据
|
||||
...newVal // 将新的选项添加进来
|
||||
];
|
||||
}, { immediate: true });
|
||||
|
||||
// 监听数据变化，并通过事件传递给父组件
|
||||
defineExpose({
|
||||
selectedEntity,
|
||||
selectedrow,
|
||||
selectedrow2,
|
||||
selectedrow3,
|
||||
selectedChartType
|
||||
});
|
||||
|
||||
// 监听选择的值变化，并触发对应的事件
|
||||
watch(selectedEntity, () => {
|
||||
emits('update:selectedEntity', selectedEntity.value);
|
||||
});
|
||||
|
||||
watch(selectedrow, () => {
|
||||
emits('update:selectedrow', selectedrow.value);
|
||||
});
|
||||
watch(selectedrow2, () => {
|
||||
emits('update:selectedrow2', selectedrow2.value);
|
||||
});
|
||||
watch(selectedrow3, () => {
|
||||
emits('update:selectedrow3', selectedrow3.value);
|
||||
});
|
||||
watch(selectedChartType, () => {
|
||||
emits('update:selectedChartType', selectedChartType.value);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.el-row {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.demo-select {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-select .block {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.demo-select .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo-select .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -92,7 +92,7 @@ import * as echarts from 'echarts';
|
|||
:Message4="SendOpenSelected"
|
||||
>
|
||||
</component>
|
||||
<el-card v-if="entity">
|
||||
<!-- <el-card v-if="entity">
|
||||
<el-row>
|
||||
<el-table
|
||||
:data="columnData"
|
||||
|
|
@ -111,7 +111,7 @@ import * as echarts from 'echarts';
|
|||
|
||||
</el-table>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-card> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="medium" @click="handleGenerateChart">
|
||||
点击生成图表
|
||||
|
|
@ -138,13 +138,14 @@ import * as echarts from 'echarts';
|
|||
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { markRaw } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import * as echarts from 'echarts';
|
||||
import Entity1Form from '@/components/graph/Entity1Form.vue';
|
||||
import Entity2Form from '@/components/graph/Entity2Form.vue';
|
||||
import Entity3Form from '@/components/graph/Entitu3Form.vue';
|
||||
import Entity4Form from '@/components/graph/Entity4Form.vue';
|
||||
import Entity5Form from '@/components/graph//Entity5Form.vue';
|
||||
// import Entity5Form from '@/components/graph//Entity5Form.vue';
|
||||
import HeaderPage from "@/components/HeaderPage.vue";
|
||||
import { avatarEmits } from 'element-plus';
|
||||
import AddDialog from '@/components/components_cluespage/AddDialog.vue';
|
||||
|
|
@ -155,7 +156,7 @@ export default {
|
|||
Entity2Form,
|
||||
Entity3Form,
|
||||
Entity4Form,
|
||||
Entity5Form,
|
||||
|
||||
HeaderPage
|
||||
},
|
||||
props: ['columns','tabledata'],
|
||||
|
|
@ -189,9 +190,7 @@ export default {
|
|||
{value:'entity2',label:'以两个日期之间存在为横坐标'},
|
||||
{ value: 'entity3', label: '实数区间为横坐标' },
|
||||
{ value: 'entity4', label: '字符串意义上的完全相同为横坐标' },
|
||||
{
|
||||
value: 'entity5', label: '三维数据'
|
||||
},
|
||||
|
||||
],
|
||||
dates: [],
|
||||
|
||||
|
|
@ -216,13 +215,13 @@ export default {
|
|||
// }
|
||||
// },
|
||||
computed: {
|
||||
entity()
|
||||
{
|
||||
if (this.selectedEntity=='entity5')
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
},
|
||||
// entity()
|
||||
// {
|
||||
// if (this.selectedEntity=='entity5')
|
||||
// return 1;
|
||||
// else
|
||||
// return 0;
|
||||
// },
|
||||
columnData() {
|
||||
if (this.srow)
|
||||
{
|
||||
|
|
@ -253,8 +252,8 @@ export default {
|
|||
return 'Entity3Form';
|
||||
case 'entity4':
|
||||
return 'Entity4Form';
|
||||
case 'entity5':
|
||||
return 'Entity5Form';
|
||||
// case 'entity5':
|
||||
// return 'Entity5Form';
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
@ -262,7 +261,7 @@ export default {
|
|||
},
|
||||
created()
|
||||
{
|
||||
console.log(this.$route.params.tabledata)
|
||||
//console.log(this.$route.params.tabledata)
|
||||
this.mytable=JSON.parse(this.$route.params.tabledata);
|
||||
this.mycolumns = JSON.parse(this.$route.params.columns);
|
||||
|
||||
|
|
@ -304,77 +303,77 @@ export default {
|
|||
|
||||
|
||||
|
||||
handleSelectionChange(selection) {
|
||||
// 在这里处理选择变化，selection 是选中的行数据数组
|
||||
let obj=selection.map(item=>item.name)
|
||||
// console.log(obj)
|
||||
this.selectedColumnData =selection.map(item=>item.name)
|
||||
// handleSelectionChange(selection) {
|
||||
// // 在这里处理选择变化，selection 是选中的行数据数组
|
||||
// let obj=selection.map(item=>item.name)
|
||||
// // console.log(obj)
|
||||
// this.selectedColumnData =selection.map(item=>item.name)
|
||||
|
||||
// console.log( this.selectedColumnData);
|
||||
// console.log('选择的行数据:', selection);
|
||||
},
|
||||
// // console.log( this.selectedColumnData);
|
||||
// // console.log('选择的行数据:', selection);
|
||||
// },
|
||||
returnHome(){
|
||||
|
||||
window.history.back();
|
||||
},
|
||||
extractThreeColumns(tableData) {
|
||||
let extractedData = tableData.map(row => ({
|
||||
month: row[this.srow3],
|
||||
product: row[this.srow],
|
||||
amount: row[this.srow2]
|
||||
}));
|
||||
// extractThreeColumns(tableData) {
|
||||
// let extractedData = tableData.map(row => ({
|
||||
// month: row[this.srow3],
|
||||
// product: row[this.srow],
|
||||
// amount: row[this.srow2]
|
||||
// }));
|
||||
|
||||
return extractedData;
|
||||
},
|
||||
count_sum_time()
|
||||
{
|
||||
// return extractedData;
|
||||
// },
|
||||
// count_sum_time()
|
||||
// {
|
||||
|
||||
this.hasUpperContent = true;
|
||||
let counts = {};
|
||||
let salesData=this.extractThreeColumns(this.mytable);
|
||||
// console.log(salesData)
|
||||
// 遍历销售记录数组，填充 counts 对象
|
||||
salesData.forEach(record => {
|
||||
let { month, product, amount } = record;
|
||||
let currentMonth=new Date(month)
|
||||
let monthKey1 = currentMonth.getFullYear() + '-' + (currentMonth.getMonth() + 1);
|
||||
if (!counts[monthKey1]) {
|
||||
counts[monthKey1] = {};
|
||||
}
|
||||
if ( !counts[monthKey1][product])
|
||||
counts[monthKey1][product] = amount;
|
||||
else
|
||||
counts[monthKey1][product] += amount;
|
||||
});
|
||||
// this.hasUpperContent = true;
|
||||
// let counts = {};
|
||||
// let salesData=this.extractThreeColumns(this.mytable);
|
||||
// // console.log(salesData)
|
||||
// // 遍历销售记录数组，填充 counts 对象
|
||||
// salesData.forEach(record => {
|
||||
// let { month, product, amount } = record;
|
||||
// let currentMonth=new Date(month)
|
||||
// let monthKey1 = currentMonth.getFullYear() + '-' + (currentMonth.getMonth() + 1);
|
||||
// if (!counts[monthKey1]) {
|
||||
// counts[monthKey1] = {};
|
||||
// }
|
||||
// if ( !counts[monthKey1][product])
|
||||
// counts[monthKey1][product] = amount;
|
||||
// else
|
||||
// counts[monthKey1][product] += amount;
|
||||
// });
|
||||
|
||||
// 现在 counts 对象包含了每个月份每种产品的销售额信息
|
||||
// // 现在 counts 对象包含了每个月份每种产品的销售额信息
|
||||
|
||||
const products = this.selectedColumnData;
|
||||
let years = Array.from(new Set(salesData.map(record => new Date(record.month).getFullYear()+ '-' + (new Date(record.month).getMonth() + 1)))).sort();
|
||||
// const products = this.selectedColumnData;
|
||||
// let years = Array.from(new Set(salesData.map(record => new Date(record.month).getFullYear()+ '-' + (new Date(record.month).getMonth() + 1)))).sort();
|
||||
|
||||
// Create the structure similar to 'source'
|
||||
let result = [['product', ...years]];
|
||||
// // Create the structure similar to 'source'
|
||||
// let result = [['product', ...years]];
|
||||
|
||||
products.forEach(product => {
|
||||
let rowData = [product];
|
||||
for (let i = 0; i < years.length; i++) {
|
||||
rowData.push(0);
|
||||
}
|
||||
result.push(rowData);
|
||||
});
|
||||
products.forEach(product=>
|
||||
{
|
||||
years.forEach(year => {
|
||||
if (counts[year][product])
|
||||
result[products.indexOf(product)+1][years.indexOf(year)+1]+=counts[year][product];
|
||||
else
|
||||
result[products.indexOf(product)+1][years.indexOf(year)+1]+=0;
|
||||
});
|
||||
}
|
||||
)
|
||||
// console.log(result)
|
||||
return result;
|
||||
},
|
||||
// products.forEach(product => {
|
||||
// let rowData = [product];
|
||||
// for (let i = 0; i < years.length; i++) {
|
||||
// rowData.push(0);
|
||||
// }
|
||||
// result.push(rowData);
|
||||
// });
|
||||
// products.forEach(product=>
|
||||
// {
|
||||
// years.forEach(year => {
|
||||
// if (counts[year][product])
|
||||
// result[products.indexOf(product)+1][years.indexOf(year)+1]+=counts[year][product];
|
||||
// else
|
||||
// result[products.indexOf(product)+1][years.indexOf(year)+1]+=0;
|
||||
// });
|
||||
// }
|
||||
// )
|
||||
// // console.log(result)
|
||||
// return result;
|
||||
// },
|
||||
countsumbystring() {
|
||||
// 创建一个对象来存储每个名字对应的实数总和
|
||||
this.hasUpperContent = true;
|
||||
|
|
@ -419,13 +418,11 @@ for (let i = 0; i < years.length; i++) {
|
|||
for (let i = 0; i < counts.length; i++) {
|
||||
yAxis.push({
|
||||
type: 'value',
|
||||
name: this.srow2[i],
|
||||
|
||||
position: 'left',
|
||||
offset:i*40,
|
||||
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
return yAxis;
|
||||
|
|
@ -741,7 +738,7 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
try
|
||||
{
|
||||
const chartContainer = this.$refs.chartContainer;
|
||||
this.chartInstance = echarts.init(chartContainer);
|
||||
this.chartInstance =markRaw( echarts.init(chartContainer));
|
||||
// console.log(chartContainer);
|
||||
let option;
|
||||
if (!this.entity)
|
||||
|
|
@ -749,8 +746,14 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
if (this.stype === 'bar' || this.stype == 'line') {
|
||||
option = {
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ['line', 'bar', 'stack'] },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
|
|
@ -842,7 +845,7 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
lastMonth = 1;
|
||||
lastYear++;
|
||||
}
|
||||
lastXDataDateString = `${lastYear}-${lastMonth}-${lastDate}`; console.log('aaa');
|
||||
lastXDataDateString = `${lastYear}-${lastMonth}-${lastDate}`; //console.log('aaa');
|
||||
xdata.push(lastXDataDateString);
|
||||
ydata.push(0);
|
||||
tim ++;
|
||||
|
|
|
|||
Loading…
Reference in New Issue