提交更改

src/components/echarts/MyEchart.vue

@@ -1,14 +1,11 @@
 <template>
     <div class="chart">
-        <el-button v-if="isExport" type="primary" size="small" icon="el-icon-Download" @click="handleExport">
-            导出
-        </el-button>
         <div ref="chartRef" class="my-chart" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
 import 'echarts-gl'
@@ -16,6 +13,8 @@ import 'echarts-liquidfill'
 import 'echarts/lib/component/dataZoom'
 import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
+import { saveAs } from 'file-saver'
+// import { nextTick } from 'process'
 
 const config = useConfig()
 color[0] = config.layout.elementUiPrimary[0]
@@ -227,20 +226,49 @@ const resizeObserver = new ResizeObserver(entries => {
     }
 })
 const ExportChart: any = ref(null)
-const handleExport = () => {
+const handleExport = (arr: any) => {
     // 使用ECharts的getOption方法获取当前图表的配置
     const option = ExportOptions.value
-    console.log(option, '00000000000')
-    const seriesData = option?.series // 假设我们只导出第一个系列的数据
+    const seriesData = option?.series
+    const xAxisList = option?.xAxis[0].data
     if (seriesData && seriesData.length != 0) {
         // 转换为CSV格式
-        let csvContent = 'data1,data2\n'
-        seriesData.forEach((item: any) => {
-            item.data.map((vv: any) => {
-                csvContent += `${vv.name},${vv.value}\n`
-            })
+        let csvContent = '时间,'
+        const legendData = ExportOptions.value.legend.data
+        legendData.map((item: any, index: any) => {
+            index != legendData.length - 1 ? (csvContent += item.name + ',') : (csvContent += item.name + '\n')
         })
+        let cellValue = ''
+        let list = []
+        legendData.map((item: any, index: any) => {
+            list.push('${seriesData[' + index + '].data[indexs]}')
+        })
+        console.log(seriesData[0].data.length)
+        
+        seriesData.forEach((item: any, index: any) => {
+            item.data.map((vv: any, indexs: any) => {
+                cellValue += `${xAxisList[indexs]},`
 
+                // csvContent += `${item.name},${xAxisList[index]},${vv}\n`
+                // legendData.map((kk: any, indexss: any) => {
+
+                // indexs == legendData.length - 1 ? (cellValue += `${vv}\n`) : (cellValue += `${vv},`)
+                cellValue += `${seriesData[0].data[indexs]},${seriesData[1].data[indexs]},${seriesData[2].data[indexs]}s\n`
+                // })
+                // cellValue +=list.join(',')+'\n'
+            })
+            // csvContent += cellValue + `${xAxisList[index]}` + '\n'
+        })
+        let arrs = []
+        arrs = JSON.parse(JSON.stringify(new Set(cellValue.split('s'))))
+        console.log(arrs, '0000000000')
+        Array.from(arrs).map((item:any)=>{
+            cellValue +=item+'\n'.replace('s','')
+        })
+        console.log(cellValue, '去重后的数据')
+        return
+        csvContent += cellValue
+        // return
         // 创建Blob对象，并使用a标签下载
         const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
         const link = document.createElement('a')
@@ -248,7 +276,7 @@ const handleExport = () => {
             // 支持下载属性
             const url = URL.createObjectURL(blob)
             link.setAttribute('href', url)
-            link.setAttribute('download', 'data.csv')
+            link.setAttribute('download', '历史趋势.csv')
             link.style.visibility = 'hidden'
             document.body.appendChild(link)
             link.click()
@@ -258,11 +286,10 @@ const handleExport = () => {
 }
 onMounted(() => {
     initChart()
-
     ExportChart.value = echarts.init(chartRef.value)
     resizeObserver.observe(chartRef.value!)
 })
-defineExpose({ initChart })
+defineExpose({ initChart, handleExport })
 onBeforeUnmount(() => {
     resizeObserver.unobserve(chartRef.value!)
     chart?.dispose()