v-charts 导出图片

1、toolbox导出图片

vue文件

<ve-line
   :data="chartData"
   width="100%"
   id="charts"
   :extend="chartExtend"
   :colors="colors"
 ></ve-line>

js文件
如果某属性加上去之后没有生效，很可能是没有引入相应的模块，模块的位置echarts/lib/component

//按需引入，
import VeLine from "v-charts/lib/line.common";
import "v-charts/lib/bar.common"
import "echarts/lib/component/toolbox"  
export default {
	  data() {
	    return {
			chartData: {
			  columns: ["日期", "缺勤人数"],
			  rows: [
			    { 日期: "1月1日", 缺勤人数: 123 },
			    { 日期: "1月2日", 缺勤人数: 1223 },
			    { 日期: "1月3日", 缺勤人数: 2123 },
			    { 日期: "1月4日", 缺勤人数: 4123 },
			    { 日期: "1月5日", 缺勤人数: 3123 },
			    { 日期: "1月6日", 缺勤人数: 7123 },
			  ],
			},
			colors: ["#47f0ca"],
			chartExtend: {
			  grid: {
			    left: "3%",
			    bottom: "7%",
			  },
			  legend: {
			    left: "50%",
			    bottom: "0",
			  },
			  series: {
			    smooth: false,
			  },
			  xAxis: {},
			  yAxis: {
			    name: "次",
			  },
			  toolbox: {
			    show: true,
			    feature: {
			      magicType: {
			        type: ["line", "bar"],
			      }, //切换为折线图，切换为柱状图
			      saveAsImage: {}, //保存为图片
			    },
			  },
			},
		}
	}
}

2、自定义方法

vue中代码

<el-button size="small" @click="exportpic('line')">导出</el-button>

js中method方法

 exportpic(val){
    let myChart = this.$echarts.init(document.getElementById(val));
     let picInfo=myChart.getDataURL({
         type: 'png',
         pixelRatio: 1.5,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
         backgroundColor: '#fff'
     });//获取到的是一串base64信息

     const elink = document.createElement('a');
     elink.download = '统计图';
     elink.style.display = 'none';
     elink.href = picInfo;
     document.body.appendChild(elink);
     elink.click();
     URL.revokeObjectURL(elink.href); // 释放URL 对象
     document.body.removeChild(elink)
   }