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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
| 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}%)' // 扇区标签显示：名称: 数量 (百分比)
| }
| }
| ]
| };
| }
|
| function barChartOption() {
| return {
| title: {
| text: `柱状图默认名称`,
| left: 'center' // 标题居中显示
| },
| // 添加工具栏配置，包含下载功能
| toolbox: {
| show: true,
| feature: {
| saveAsImage: {
| show: true,
| title: '下载图表',
| type: 'png',
| pixelRatio: 2 // 提高图片清晰度
| }
| }
| },
| tooltip: {
| trigger: 'axis', // 柱状图使用axis触发tooltip
| axisPointer: {
| type: 'shadow' // 显示阴影指示器
| },
| formatter: '{b}: {c}' // 显示格式：名称: 数量
| },
| legend: {
| show: true,
| orient: 'horizontal',
| bottom: '0%', // 图例底部水平排列
| },
| grid: {
| // left: '3%',
| // right: '4%',
| bottom: '10%',
| top: '15%',
| containLabel: true
| },
| xAxis: {
| name: '坐标轴',
| type: 'category',
| data: ['sample1', 'sample2', 'sample3'], // X轴数据
| axisTick: {
| alignWithLabel: true
| },
| axisLabel: {
| rotate: 45,
| }
| },
| yAxis: {
| type: 'value',
| name: '数量', // Y轴名称
| axisLine: {
| show: true
| },
| axisLabel: {
| formatter: '{value}'
| }
| },
| series: [
| {
| name: 'sample',
| type: 'bar', // 图表类型改为柱状图
| data: [100, 200, 300], // 数据值
| label: {
| show: true,
| position: 'top', // 标签显示在柱子顶部
| formatter: '{c}' // 标签格式：数量
| }
| }
| ]
| };
| }
|
| // 通过 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, barChartOption, downloadChartImage };
|
|
