test.html
3.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="http://localhost:8089/js/echarts.min.js"></script>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
color: ['#FF917C'],
// title: {
// text: 'Basic Radar Chart'
// },
// legend: {
// data: ['Allocated Budget']
// },
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
lineStyle: {
type: 'dashed'
},
areaStyle: {
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
{
color: 'rgba(255, 145, 124, 0.1)',
offset: 0
},
{
color: 'rgba(255, 145, 124, 0.9)',
offset: 1
}
])
},
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Allocated Budget'
}
]
}
]
};
option && myChart.setOption(option);
// 假设你已经有一个ECharts实例
var myChart = echarts.init(document.getElementById('main'));
// ... 配置和初始化你的图表 ...
// 当需要保存图表图片时执行以下代码
function saveEChartAsImage(chart) {
var img = new Image();
img.src = chart.getDataURL({
// 指定图片的格式，可以是 'png', 'jpeg'
type: 'png',
// 图片质量，从0到1，只对'jpeg'格式的图片有效
pixelRatio: 2,
// 是否忽略背景，默认不忽略
backgroundColor: '#fff',
// 是否显示下载按钮，默认不显示
excludeComponents: ['toolbox']
});
// 创建一个链接元素
var link = document.createElement('a');
// 设置下载的文件名
link.download = 'echart.png';
// 把图片的url设为链接的href
link.href = img.src;
// 触发点击
link.click();
console.log(img.src)
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8089/web/echartsTool/updateImage', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText); // 这里是服务器返回的信息
}
};
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
}
};
var formData = new FormData();
formData.append('imageUrl', img.src)
xhr.send(formData);
}
// 使用这个函数保存图表
saveEChartAsImage(myChart);
</script>
</html>