方案数据-修复问题

src/components/echarts/MyEchart.vue

@@ -1,5 +1,10 @@
 <template>
-    <div ref="chartRef" class="my-chart" />
+    <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">
@@ -16,7 +21,8 @@ const config = useConfig()
 color[0] = config.layout.elementUiPrimary[0]
 const chartRef = ref<HTMLDivElement>()
 
-const props = defineProps(['options'])
+const props = defineProps(['options', 'isExport'])
+const ExportOptions: any = ref({})
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
     // 不在视野中的时候不进行resize
@@ -36,8 +42,8 @@ const initChart = () => {
         title: {
             left: 'center',
             // textStyle: {
-                color: '#000',
-                fontSize: 18,
+            color: '#000',
+            fontSize: 18,
             // },
             ...(props.options?.title || null)
         },
@@ -51,10 +57,10 @@ const initChart = () => {
                 }
             },
             // textStyle: {
-                color: '#fff',
-                fontStyle: '14px',
-                opacity: 0.35,
-                fontSize: 14,
+            color: '#fff',
+            fontStyle: '14px',
+            opacity: 0.35,
+            fontSize: 14,
             // },
             backgroundColor: 'rgba(0,0,0,0.35)',
             borderWidth: 0,
@@ -66,8 +72,8 @@ const initChart = () => {
             itemGap: 10,
             itemStyle: {},
             // textStyle: {
-                fontSize: 12,
-                padding: [2, 0, 0, 0], //[上、右、下、左]
+            fontSize: 12,
+            padding: [2, 0, 0, 0], //[上、右、下、左]
             // },
             itemWidth: 15,
             itemHeight: 10,
@@ -105,6 +111,7 @@ const initChart = () => {
     handlerBar(options)
     // 处理柱状图
     chart.setOption(options)
+    ExportOptions.value = options
     setTimeout(() => {
         chart.resize()
     }, 0)
@@ -181,14 +188,14 @@ const handlerXAxis = () => {
         axisTick: { show: false },
         axisLine: {
             // lineStyle: {
-                color: '#000'
+            color: '#000'
             // }
         },
         axisLabel: {
             // textStyle: {
-                fontFamily: 'dinproRegular',
-                color: '#000',
-                fontSize: '12'
+            fontFamily: 'dinproRegular',
+            color: '#000',
+            fontSize: '12'
             // }
         }
     }
@@ -219,8 +226,40 @@ const resizeObserver = new ResizeObserver(entries => {
         }, 100)
     }
 })
+const ExportChart: any = ref(null)
+const handleExport = () => {
+    // 使用ECharts的getOption方法获取当前图表的配置
+    const option = ExportOptions.value
+    console.log(option, '00000000000')
+    const seriesData = option?.series // 假设我们只导出第一个系列的数据
+    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`
+            })
+        })
+
+        // 创建Blob对象，并使用a标签下载
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+        const link = document.createElement('a')
+        if (link.download !== undefined) {
+            // 支持下载属性
+            const url = URL.createObjectURL(blob)
+            link.setAttribute('href', url)
+            link.setAttribute('download', 'data.csv')
+            link.style.visibility = 'hidden'
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+        }
+    }
+}
 onMounted(() => {
     initChart()
+
+    ExportChart.value = echarts.init(chartRef.value)
     resizeObserver.observe(chartRef.value!)
 })
 defineExpose({ initChart })
@@ -237,8 +276,18 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.my-chart {
-    height: 100%;
+.chart {
     width: 100%;
+    height: 100%;
+    position: relative;
+    .el-button {
+        position: absolute;
+        right: 0px;
+        top: -60px;
+    }
+    .my-chart {
+        height: 100%;
+        width: 100%;
+    }
 }
 </style>