1 <template>
2 <div class="post">
3 <button @click="exportPNG">
4 下载图片
5 </button>
6 <div id="png">
7 <div id="myEcharts">
8 </div>
9 <div id="myEcharts2">
10 </div>
11 </div>
12 </div>
13 </template>
14 <script lang="js">
15 import {
16 defineComponent
17 }
18 from 'vue';
19 import * as echarts from "echarts";
20 import html2canvas from 'html2canvas';
21
22 export
23 default defineComponent({
24 data() {
25 return {
26 chart:
27 null,
28
29 loading: false,
30 post: null
31 };
32 },
33 created() {
34 // fetch the data when the view is created and the data is
35 // already being observed
36 this.fetchData();
37
38 },
39 watch: {
40 // call again the method if the route changes
41 '$route': 'fetchData'
42 },
43 mounted() {
44 this.initChart();
45 this.initChart2();
46 },
47 methods: {
48 fetchData() {
49 this.post = null;
50 this.loading = true;
51
52 fetch('weatherforecast').then(r = >r.json()).then(json = >{
53 this.post = json;
54 this.loading = false;
55 return;
56 });
57 },
58 initChart() {
59 console.log('initChart...');
60 let chart = echarts.init(document.getElementById("myEcharts"), "purple-passion");
61 chart.setOption({
62 backgroundColor: 'transparent',
63 title: {
64 text: "2021年各月份销售量（单位：件）",
65 left: "center",
66 },
67 xAxis: {
68 type: "category",
69 data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
70 },
71 tooltip: {
72 trigger: "axis"
73 },
74 yAxis: {
75 type: "value"
76 },
77 series: [{
78 data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
79 type: "line",
80 smooth: true,
81 itemStyle: {
82 normal: {
83 label: {
84 show: true,
85 position: "top",
86 formatter: "{c}"
87 }
88 }
89 }
90 }],
91 toolbox: {
92 show: true,
93 orient: "vertical",
94 left: "right",
95 top: "center",
96 feature: {
97 saveAsImage: {
98 show: true
99 },
100 // 保存图表
101 },
102 },
103 });
104 window.onresize = function() {
105 chart.resize();
106 };
107 },
108
109 initChart2() {
110
111 console.log('initChart2...');
112 let chart = echarts.init(document.getElementById("myEcharts2"), "purple-passion");
113 chart.setOption({
114 backgroundColor: 'transparent',
115 title: {
116 text: "2021年各月份销份额",
117 left: "center",
118 },
119 xAxis: {
120 type: "category",
121 data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
122 },
123 tooltip: {
124 trigger: "axis"
125 },
126 yAxis: {
127 type: "value"
128 },
129 series: [{
130 data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
131 type: "bar",
132 smooth: true,
133 itemStyle: {
134 normal: {
135 label: {
136 show: true,
137 position: "top",
138 formatter: "{c}"
139 }
140 }
141 }
142 }],
143 });
144 },
145 async exportPNG() {
146 console.log('exportPNG...');
147
148 const el = document.getElementById('png') console.log('el:', el)
149 // const canvasFalse = document.createElement('canvas')
150 const width = parseInt(window.getComputedStyle(el).width) const height = parseInt(window.getComputedStyle(el).height) console.log('width:', width, 'height:', height) let canvas = await this.autoPicture('png', {
151 width,
152 height
153 });
154 if (canvas) {
155
156 let oImg = new Image();
157 oImg = canvas; // 导出图片
158 console.log(oImg);
159 var oA = document.createElement('a');
160 oA.download = '分享内容'; // 设置下载的文件名，默认是'下载'
161 oA.href = oImg;
162 document.body.appendChild(oA);
163 oA.click();
164 oA.remove(); // 下载之后把创建的元素删除
165 }
166 },
167 async autoPicture(el, options) {
168 let {
169 scale = 1,
170 allowTaint = false,
171 useCORS = true,
172 width = '375',
173 height = '649',
174 backgroundColor = null
175 } = options const id = document.getElementById(el);
176
177 const canvas = await html2canvas(id, {
178 scale,
179 //缩放比例,默认为1
180 allowTaint,
181 //是否允许跨域图像污染画布
182 useCORS,
183 //是否尝试使用CORS从服务器加载图像
184 width,
185 //画布的宽度
186 height,
187 //画布的高度
188 backgroundColor //画布的背景色，默认为透明
189 })
190
191 console.log(canvas);
192 return canvas.toDataURL('image/png')
193 }
194
195 }
196
197 });
198 </script>
199 <style>
200 .echarts-box, #myEcharts,#myEcharts2 { width: 400px; height: 400px; }
201 </style>
