只需要在options中添加一个属性，效果如图
// 生成图片可下载toolbox: {show: true,feature: {saveAsImage: {show:true,excludeComponents :['toolbox'],pixelRatio: 2}}}
效果图
完整代码如下
父组件
<moreLineChart v-if="isShowEchart" :chartData = 'chartLineData' width='100%' height="350px"/>import moreLineChart from '@/views/my_components/charts/moreLineChart.vue'...components: { moreLineChart }
子组件
<template><div :class="className" :style="{height:height,width:width}" /></template><script>import echarts from 'echarts'require('echarts/theme/macarons') // echarts themeimport resize from './mixins/resize'// 折线图export default {mixins: [resize],props: {className: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '350px'},autoResize: {type: Boolean,default: true},chartData: {type: Object,required: true},},data() {return {chart: null}},watch: {chartData: {deep: true,handler(val) {this.setOptions(val)}}},mounted() {this.$nextTick(() => {this.initChart()})},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods: {initChart() {this.chart = echarts.init(this.$el, 'macarons')this.setOptions(this.chartData)},setOptions({ seriesData, xAxisData, lineTitle, legendData, color,fontSize } = {}) {this.chart.setOption({title: {text: lineTitle,textStyle: {color: color,// 文字颜色fontSize: fontSize// 文字大小}},xAxis: {// data: xAxisData,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],boundaryGap: false,axisTick: {show: false},axisLine: { //这是x轴文字颜色lineStyle: {color: "#333",}}},grid: {left: 10,right: 10,bottom: 20,top: 30,containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},padding: [5, 10]},yAxis: {axisTick: {show: false},axisLine: { //这是y轴文字颜色lineStyle: {color: "#333",}}},legend: {// data: legendData,data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']},// 生成图片可下载toolbox: {show: true,feature: {saveAsImage: {show:true,excludeComponents :['toolbox'],pixelRatio: 2}}},series: [{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'line',stack: '总量',data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'line',stack: '总量',data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接访问',type: 'line',stack: '总量',data: [320, 332, 301, 334, 390, 330, 320]},{name: '搜索引擎',type: 'line',stack: '总量',data: [820, 932, 901, 934, 1290, 1330, 1320]}]})}}}</script>
