测试

business-css/frontend/src/components/antvx6/echartsModel.vue

@@ -1,6 +1,10 @@
 <!--  线 + 柱混合图 -->
 <template>
-  <div id="chartContainer" :class="className"  style="height: calc(100vh - 200px); width: 100%;" />
+  <div class="echarts-model">
+      <!-- <el-button type="primary" @click="handleExport">导出图片</el-button> -->
+    <div id="chartContainer" :class="className"  style="height: calc(100vh - 200px); width: 100%;" />
+  </div>
+  
 </template>
 
 <script setup lang="ts">
@@ -189,8 +193,25 @@ function getScenarioResults(){
     initChart(option.value);
   })
 }
+let barChart:any  = null
+const handleExport = () => {
+  if (!barChart) return
+  debugger
+  // 调用ECharts导出API，自定义文件名
+  barChart.exportToPNG({
+    pixelRatio: 2,
+    name: "图片",
+  }).then((dataUrl:any) => {
+    // 创建临时a标签触发下载
+    const link = document.createElement('a')
+    link.download = `图片.png`
+    link.href = dataUrl
+    link.click()
+  })
+}
+
 function initChart(option:any) {
-  const barChart = init(document.getElementById('chartContainer') as HTMLDivElement);
+  barChart = init(document.getElementById('chartContainer') as HTMLDivElement);
 
   barChart.setOption(option);
   chart.value = barChart;