VUE使用Echart，并保存为图片

原创已于 2022-02-22 10:19:39 修改 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue #canvas

于 2021-09-28 14:43:43 首次发布

随笔专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue应用中安装并全局引入ECharts库，展示了如何在组件中创建柱状图，并演示了如何将图表导出为图片。步骤包括5.0版本和5.x.x版本的引入方式，以及关键代码片段。

一、VUE使用Echart

1、安装echarts依赖

	npm install echarts -S
	或者使用淘宝的镜像
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	cnpm install echarts -S

2、在main.js中全局引入

	// 引入echarts--- 这是全部引入
	import echarts from 'echarts'
	Vue.prototype.$echarts = echarts

	// 引入echarts--- 这是按需引入
	// 引入基本模板
	let echarts = require('echarts/lib/echarts')
	// 引入柱状图组件
	require('echarts/lib/chart/bar')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')

备注：上述echarts引入是5.0版本之下的引入方式，5.x.x版本引入方式如下：

	// 引入echarts--- 这是全部引入
	import * as echarts from 'echarts'
	Vue.prototype.$echarts = echarts

3、创建图表

在Echarts.vue中

	<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

	export default {
	  name: 'hello',
	  data () {
	    return {
	      msg: 'Welcome to Your Vue.js App'
	    }
	  },
	  mounted(){
	    this.drawLine();
	  },
	  methods: {
	    drawLine(){
	        // 基于准备好的dom，初始化echarts实例
	        let myChart = this.$echarts.init(document.getElementById('myChart'))
	        // 绘制图表
	        myChart.setOption({
	            title: { text: '在Vue中使用echarts' },
	            tooltip: {},
	            xAxis: {
	                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	            },
	            yAxis: {},
	            series: [{
	                name: '销量',
	                type: 'bar',
	                data: [5, 20, 36, 10, 10, 20]
	            }]
	        });
	    }
	  }
	}

二、将VUE中的Echart保存为图片

	export default {
	  name: 'hello',
	  data () {
	    return {
	      msg: 'Welcome to Your Vue.js App'
	    }
	  },
	  mounted(){
	    this.drawLine();
	  },
	  methods: {
	    drawLine(){
	        // 基于准备好的dom，初始化echarts实例
	        let myChart = this.$echarts.init(document.getElementById('myChart'))
	        // 绘制图表
	        myChart.setOption({
	            title: { text: '在Vue中使用echarts' },
	            tooltip: {},
	            xAxis: {
	                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	            },
	            yAxis: {},
	            series: [{
	                name: '销量',
	                type: 'bar',
	                data: [5, 20, 36, 10, 10, 20]
	            }]
	        });
	        // 下载Echarts图片
	        this.downLoad(myChart,'在Vue中使用echarts')
	    }
	  },
	  // 下载
	  downLoad(myChart,fileName){
	      let url =  myChart.getDataURL({
	    	type: 'png',
	      	pixelRatio: 1,
	      	backgroundColor: '#fff'
	      })
	      let link = document.createElement('a');
	      link.style.display = 'none'
	      link.href = url
	      // 获取文件名
	      // download 属性定义了下载链接的地址而不是跳转路径
	      link.setAttribute('download', fileName)
	      document.body.appendChild(link)
	      link.click()
	   },
	}