diff --git a/src/components/graph/Entity5Form.vue b/src/components/graph/Entity5Form.vue deleted file mode 100644 index 3222cea..0000000 --- a/src/components/graph/Entity5Form.vue +++ /dev/null @@ -1,183 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/src/views/ShowGraph.vue b/src/views/ShowGraph.vue index fa0a9b8..6f6c0b0 100644 --- a/src/views/ShowGraph.vue +++ b/src/views/ShowGraph.vue @@ -92,7 +92,7 @@ import * as echarts from 'echarts'; :Message4="SendOpenSelected" > - + 点击生成图表 @@ -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,12 +746,18 @@ currentDate.setDate(currentDate.getDate()+1); if (this.stype === 'bar' || this.stype == 'line') { option = { toolbox: { - feature: { - dataView: { show: true, readOnly: false }, - restore: { show: true }, - saveAsImage: { show: true } - } - }, + 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 } + } + }, xAxis: { type: 'category', data: Object.keys(counts), @@ -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 ++;