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
| function pieChartOption() {
| return {
| color: [
| '#5470c6',
| '#91cc75',
| '#fac858',
| '#ee6666',
| '#73c0de',
| '#3ba272',
| '#fc8452',
| '#9a60b4',
| '#ea7ccc',
| '#514a9d',
| '#2ec7c9',
| '#b6a2de'
| ],
| title: {
| text: `饼图默认名称`,
| left: 'center' // 标题居中显示
| },
| // 添加工具栏配置，包含下载功能
| toolbox: {
| show: true,
| feature: {
| saveAsImage: {
| show: true,
| title: '下载图表',
| type: 'png',
| pixelRatio: 2 // 提高图片清晰度
| }
| }
| },
| tooltip: {
| trigger: 'item', // 饼图使用item触发tooltip
| formatter: '{a} <br/>{b}: {c} ({d}%)' // 显示格式：名称: 数量 (百分比)
| },
| legend: {
| show: false,
| orient: 'vertical',
| left: 'right', // 图例居左垂直排列
| data: ['sample1', 'sample2', 'sample3'] // 图例数据为问题类型名称
| },
| series: [
| {
| name: 'sample',
| type: 'pie', // 图表类型改为饼图
| radius: '60%', // 饼图半径
| center: ['50%', '55%'], // 饼图中心位置
| data: [
| {
| name: 'sample1',
| value: 100
| },
| {
| name: 'sample2',
| value: 200
| },
| {
| name: 'sample3',
| value: 300
| }
| ],
| label: {
| show: true,
| formatter: '{b}: {c} ({d}%)' // 扇区标签显示：名称: 数量 (百分比)
| }
| }
| ]
| };
| }
|
| // 通过 ECharts API 下载图片的函数
| function downloadChartImage(chart, fileName) {
| if (!chart) return; // 确保图表已初始化
|
| // 获取图表图片数据（支持 png/jpeg 格式，pixelRatio 控制清晰度）
| const dataURL = chart.getDataURL({
| type: 'png', // 图片格式
| pixelRatio: 2, // 像素比，值越大图片越清晰
| backgroundColor: '#fff', // 背景色（默认透明）
| excludeComponents: ['toolbox']
| });
| // 创建下载链接
| const link = document.createElement('a');
| link.href = dataURL;
| // 设置下载文件名（可根据实际需求调整）
| link.download = `${fileName}.png`;
| // 添加到文档并触发下载
| document.body.appendChild(link);
| link.click();
| // 清理链接元素
| document.body.removeChild(link);
| }
|
| export { pieChartOption, downloadChartImage };
|
|
