Vuexy Admin中Vue集成ECharts实现图表导出图片的问题咨询

刚接触ECharts，在Vuexy Admin框架下用Vue开发，已经在配置里开启了toolbox的saveAsImage功能，但导出按钮没正常显示。附上父组件和子组件代码，需要解决图表导出为图片的问题，可以是修复内置导出按钮，或者手动添加导出按钮实现下载。

父组件代码：

<template>
  <b-card title="Data Science">
    <app-echart-bar :option-data="option"/>
  </b-card>
</template>

<script>
import { BCard } from 'bootstrap-vue'
import AppEchartBar from '@core/components/charts/echart/AppEchartBar.vue'

export default {
  components: {
    BCard,
    AppEchartBar,
  },
  data() {
    return {
      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 }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['FB', 'IN', 'TW', 'YT'],
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
          },
        ],
        grid: {
          left: '40px',
          right: '30px',
          bottom: '30px',
        },
        series: [
          {
            name: 'Available',
            type: 'bar',
            barGap: 0, 
            emphasis: {
              focus: 'series'
            },
            data: [22, 24, 20, 18]
          },
          {
            name: 'Not Available',
            type: 'bar',
            barGap: 0, 
            emphasis: {
              focus: 'series'
            },
            data: [12, 10, 14, 16]
          }
        ],
      },
    }
  }
}
</script>

子组件代码：

<template>
  <e-charts
    ref="line"
    autoresize
    :options="option"
    theme="theme-color"
    auto-resize/>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/bar'
import theme from './theme.json'

ECharts.registerTheme('theme-color', theme)

export default {
  components: {
    ECharts
  },
  props: {
    optionData: {
      type: Object,
      default: null,
    }
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        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 }
          }
        },
        legend: {
          left: 0,
        },
        grid: this.optionData.grid,
        xAxis: this.optionData.xAxis,
        yAxis: this.optionData.yAxis,
        series: this.optionData.series,
      },
    }
  }
}
</script>

当前生成的图表：

1. 修复内置Toolbox导出按钮不显示的问题 #

核心问题是子组件未引入ECharts的toolbox模块，vue-echarts需要手动导入用到的ECharts组件，添加以下导入语句到子组件的script中：

import 'echarts/lib/component/toolbox'

同时，子组件中重复定义了toolbox配置，且初始化时直接引用this.optionData可能导致props未加载完成，建议改用computed合并配置，确保父组件的配置优先级更高：

export default {
  components: {
    ECharts
  },
  props: {
    optionData: {
      type: Object,
      default: null,
    }
  },
  computed: {
    option() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          left: 0,
        },
        // 合并父组件传入的配置，父组件配置会覆盖默认值
        ...this.optionData
      }
    }
  }
}

修改后，内置的toolbox会正常显示，其中的「保存为图片」按钮即可实现导出。

2. 手动添加导出按钮（可选） #

如果不想依赖内置toolbox，可以自定义导出按钮，通过调用ECharts实例的方法实现导出：

步骤1：修改子组件模板，添加导出按钮 #

<template>
  <div>
    <button @click="exportChart">导出图表</button>
    <e-charts
      ref="line"
      autoresize
      :options="option"
      theme="theme-color"
      auto-resize/>
  </div>
</template>

步骤2：添加导出方法到子组件的script中 #

methods: {
  exportChart() {
    // 获取ECharts实例
    const chart = this.$refs.line.echartsInstance
    // 获取图片的Base64编码，可配置分辨率、背景色等
    const imgBase64 = chart.getDataURL({
      pixelRatio: 2, // 2倍分辨率，避免导出图片模糊
      backgroundColor: '#ffffff' // 设置图表背景色
    })
    // 创建下载链接并触发下载
    const downloadLink = document.createElement('a')
    downloadLink.href = imgBase64
    downloadLink.download = '数据图表.png' // 自定义下载文件名
    downloadLink.click()
  }
}

内容的提问来源于stack exchange，提问作者Javed