From 0796eebe3520fafb0ac5d36ee584af81506d7e9c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期六, 20 九月 2025 14:05:52 +0800
Subject: [PATCH] 2025.9.20 数据产品（待完成）
---
src/utils/echart-util.js | 275 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 160 insertions(+), 115 deletions(-)
diff --git a/src/utils/echart-util.js b/src/utils/echart-util.js
index 0934d69..7f907dd 100644
--- a/src/utils/echart-util.js
+++ b/src/utils/echart-util.js
@@ -1,123 +1,168 @@
-// 閫掑綊鐨勮幏鍙杘bj涓殑prop灞炴�� 瑙ｅ喅鏈夋椂闇�瑕佸彇val.obj.prop鐨勬儏鍐�
-function getPropValueLoop(obj, prop) {
- if (typeof prop !== 'string') {
- return obj;
- }
- const props = prop.split('.');
- let result = obj;
- props.forEach((item) => {
- result = result[item];
- });
- return result;
-}
-function getCount(array, element) {
- let count = 0;
- array.forEach((e) => {
- if (e == element) {
- count++;
- }
- });
- return count;
-}
-export default {
- /** 灏哻hart鍥捐〃杞寲涓哄浘鐗噓rl
- * @param chart锛� chart鍥捐〃鐨勫疄渚�
- * */
- chartToImageUrl(chart) {
- const dataURL = chart.getDataURL({
- pixelRatio: 5, // 鎻愰珮鍥剧墖璐ㄩ噺
- backgroundColor: '#FFFFFF', // 璁剧疆鑳屾櫙棰滆壊
- excludeComponents: ['toolbox'], // 鎺掗櫎宸ュ叿绠辩粍浠�
- type: 'png' // 杈撳嚭鍥剧墖绫诲瀷涓篜NG
- });
- return dataURL;
- },
- // 灞曠ず data 鏁扮粍涓璞＄殑 prop 灞炴�х殑楗煎浘, title 鏄ゼ鍥剧殑鏍囬
- getPieChartByDataAndProp(data, prop, label) {
- let chartData = [];
- function hasThisName(name) {
- for (let index = 0; index < chartData.length; index++) {
- const element = chartData[index];
- if (element.name === name) {
- return true;
+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 // 鎻愰珮鍥剧墖娓呮櫚搴�
}
}
- return false;
- }
-
- data.map((item) => {
- const name = getPropValueLoop(item, prop);
- if (hasThisName(name)) {
- chartData.map((item) => {
- if (item.name === name) {
- item.value++;
+ },
+ 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
}
- });
- } else {
- chartData.push({
- name: name,
- value: 1
- });
+ ],
+ label: {
+ show: true,
+ formatter: '{b}: {c} ({d}%)' // 鎵囧尯鏍囩鏄剧ず锛氬悕绉�: 鏁伴噺 (鐧惧垎姣�)
+ }
}
- });
+ ]
+ };
+}
- return {
- title: {
- text: label,
- left: 'center'
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- orient: 'vertical',
- left: 'left'
- },
- series: [
- {
- type: 'pie',
- radius: '50%',
- data: chartData,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
+function barChartOption() {
+ return {
+ title: {
+ text: `鏌辩姸鍥鹃粯璁ゅ悕绉癭,
+ left: 'center' // 鏍囬灞呬腑鏄剧ず
+ },
+ // 娣诲姞宸ュ叿鏍忛厤缃紝鍖呭惈涓嬭浇鍔熻兘
+ toolbox: {
+ show: true,
+ feature: {
+ saveAsImage: {
+ show: true,
+ title: '涓嬭浇鍥捐〃',
+ type: 'png',
+ pixelRatio: 2 // 鎻愰珮鍥剧墖娓呮櫚搴�
}
- ]
- };
- },
- // 灞曠ず data 鏁扮粍涓璞＄殑 prop 灞炴�х殑鐩存柟鍥�, title 鏄洿鏂瑰浘鐨勬爣棰�
- getBarChartByDataAndProp(data, prop, title) {
- let series = data.map((item) => getPropValueLoop(item, prop));
- const option = {
- title: {
- text: title //璁剧疆鏍囬
+ }
+ },
+ tooltip: {
+ trigger: 'axis', // 鏌辩姸鍥句娇鐢╝xis瑙﹀彂tooltip
+ axisPointer: {
+ type: 'shadow' // 鏄剧ず闃村奖鎸囩ず鍣�
},
- xAxis: {
- type: 'category',
- data: Array.from(new Set(series)),
- axisLabel: {
- rotate: 45, // 鏃嬭浆鏍囩锛岄伩鍏嶉噸鍙�
- // 鎴栬��
- interval: 0 // 鏄剧ず鎵�鏈夋爣绛撅紝鍙兘瀵艰嚧閲嶅彔锛屾牴鎹渶姹傝皟鏁�
+ 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}' // 鏍囩鏍煎紡锛氭暟閲�
}
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: Array.from(new Set(series)).map((item) =>
- getCount(series, item)
- ),
- type: 'bar',
- smooth: true
- }
- ]
- };
- return option;
- }
-};
+ }
+ ]
+ };
+}
+
+// 閫氳繃 ECharts API 涓嬭浇鍥剧墖鐨勫嚱鏁�
+function downloadChartImage(chart, fileName) {
+ if (!chart) return; // 纭繚鍥捐〃宸插垵濮嬪寲
+
+ // 鑾峰彇鍥捐〃鍥剧墖鏁版嵁锛堟敮鎸� png/jpeg 鏍煎紡锛宲ixelRatio 鎺у埗娓呮櫚搴︼級
+ 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 };
--
Gitblit v1.9.3