重点：getDataURL函数
参考链接：https://echarts.apache.org/zh/api.html#echartsInstance.getDataURL
image.png
代码：

  1. <template>
  2.   <div class="event-chart">
  3.     <-- 引用封装好的的图表组件EventChart.vue  !-->
  4.     <event-chart 
  5.       :title="this.title"
  6.       :xAxis="xAxis"
  7.       id= "chart1"
  8.     ></event-chart>
  9.   </div>
  10.   <--  上传图片按钮  !-->
  11.   <div
  12.     class="btn"
  13.     @click="upImgData"
  14.   >
  15.     上传图片
  16.   </div>
  17. </template>

一张图片

  1. methods: {
  2.   // 上传图片
  3.   upImgData () {
  4.     var chart1 = echarts.init(document.getElementById('chart1'));
  5.     // var canvas = document.getElementsByTagName('canvas') // 获取所有图表的canvas
  6.     console.log('chart1', chart1)
  7.     var image1 = chart1.getDataURL({ type: 'png', backgroundColor: '041c5b' });
  8.     console.log('image1:---', image1) // image1图片的base64代码
  9.     this.axios({
  10.       url: 'https://xxx.com/KlzJvU181b9653a42b0fbba3cafabf59a0c800361a6750f/home/upImg', // 服务器地址
  11.       method: 'post',
  12.       data: image1 // 发送图片转换后的base64
  13.     }).then(res => {
  14.       console.log('发送成功', res)
  15.     }).catch((console.error('失败')))
  16.   }
  17. }

多张图片,可以在xxx.index中编写,以获取该界面上所有的图片

  1.     <infos-chart
  2.       :xAxis="xAxis"
  3.       :yAxis1="refuelArr"
  4.       :yAxis2="serviceArr"
  5.       :title="this.title"
  6.       :color="color"
  7.       :seriesNames="seriesNames"
  8.       :yAxisNames="yAxisNames"
  9.       chartType1="line"
  10.       class="efficiency-chart"
  11.       id="chartImg"
  12.     />
  1.     // 上传图片
  2.     upImgData () {
  3.       // 利用"echarts"就可获取当前页面所有的图表元素
  4.       var echartsElement = document.getElementsByClassName('echarts')
  5.       console.log('echartsElement', echartsElement)
  6.       // 将这些图片元素初始化并放入数组中
  7.       const echartsArr = []
  8.       for (let i = 0; i < echartsElement.length; i++) {
  9.         echartsArr.push(echarts.init(echartsElement[i]))
  10.       }
  11.       console.log('打印图表元素数组echartsArr', echartsArr)
  12.       // 将获得的这些图表转换为图片的base64编码
  13.       const echartImgArr = []
  14.       for (let j = 0; j < echartsArr.length; j++) {
  15.         // chart1.getDataURL({ type: 'png', backgroundColor: '#07175f' });
  16.         echartImgArr.push(echartsArr[j].getDataURL({ type: 'png', backgroundColor: '#07175f' }))
  17.       }
  18.       console.log('打印图表图片base64eechartImgArr', echartImgArr)
  19.       // 组织图片的编码数据
  20.       var dataArr = []
  21.       dataArr = { event: echartImgArr[0], tiem: echartImgArr[1], serve: echartImgArr[2], unloadOil: echartImgArr[3] }
  22.       // console.log('打印出整理好的数据dataArr', dataArr)
  23.       // 将获取的base64传给后台
  24.       this.axios({
  25.         url: 'http://xxx.cn/compute/download/getimg',
  26.         method: 'post',
  27.         // dataType: 'JSON',
  28.         data: dataArr
  29.       }).then(res => {
  30.         console.log('发送了得到后端返回的消息', res)
  31.       }).catch(res => {
  32.         console.error('失败', res)
  33.       })
  34.       }

打印结果:
可以发现每个图表都默认含有echarts这个名称
image.png

image.png
image.png

补充:

前端img标签可以直接识别base64字符并转换为图片,
base64在浏览器输入也可直接打开

  1. <img src="image1的值">

用于测试的的图片 即 image1转换后的代码为

这一张图片的base64也太大了

image.png