ECharts 是百度開源的一個數據可視化庫，支持折線圖、柱狀圖、散點圖、餅圖、K 線圖、地圖等圖表。Vue 是一套用于構建用戶界面的漸進式框架，結合ECharts可以實現數據可視化界面的構建，下面介紹如何在 Vue 中使用 ECharts 并導出圖表。

首先需要安裝 echarts 和 vue-echarts，跟常規的 Vue 插件安裝一樣。 在終端輸入以下命令：

npm install echarts --save
npm install vue-echarts --save

安裝完成后，我們需要在 main.js 中引入 vue-echarts 插件并注冊：

import Vue from 'vue'
import ECharts from 'vue-echarts'
Vue.component('chart', ECharts)

現在，在你的組件中就可以寫 ECharts 了。 這里以一個簡單的折線圖為例：

最后，在你需要導出圖表的地方，可以用以下代碼將組件轉成 base64 編碼的圖片：

import htmlToImage from 'html-to-image'
data () {
return {
imgSrc: ''
}
},
methods: {
exportChart () {
htmlToImage.toPng(this.$refs.chart.$el)
.then(dataURL =>{
this.imgSrc = dataURL
})
}
}

使用 html-to-image 插件，在 .then 回調函數中獲取轉換后的圖片 base64 編碼，然后將其用作圖片的 src 即可在頁面上展現。