From 2f5d64825dbc81f9732893ee9f3de1a38725ae25 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 10 三月 2025 17:12:44 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
src/utils/echarts.js | 353 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 353 insertions(+), 0 deletions(-)
diff --git a/src/utils/echarts.js b/src/utils/echarts.js
new file mode 100644
index 0000000..67aa260
--- /dev/null
+++ b/src/utils/echarts.js
@@ -0,0 +1,353 @@
+import * as echarts from "echarts";
+
+const iuCharts = {
+ drawBar: function (chart, params) {
+ var color = ["#4379EE", "#FEC53D", "#65789B", "#F6BD16"];
+ let series = params.yData.map((m, i) => {
+ let obj = {
+ name: m.title,
+ type: "bar",
+ barWidth: "16%",
+ barGap: "30%",
+ itemStyle: {
+ normal: {
+ color: color[i],
+ barBorderRadius: [50, 50, 0, 0],
+ },
+ },
+ data: m.data,
+ };
+ return obj;
+ });
+ var option = {
+ backgroundColor: "#fff",
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ lineStyle: {
+ color: "#4379EE",
+ },
+ },
+ },
+ grid: {
+ top: "25px",
+ left: "40px",
+ right: "3%",
+ bottom: "40px",
+ // containLabel: true
+ },
+ legend: {
+ show: true,
+ orient: "horizontal",
+ y: -2,
+ right: 15,
+ itemWidth: 12,
+ itemHeight: 12,
+ itemGap: 24,
+ textStyle: {
+ color: "rgba(43,48,52)",
+ fontSize: "14px",
+ },
+ },
+ xAxis: [
+ {
+ type: "category",
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: "rgba(43,48,52, 0.4)",
+ margin: 20,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ boundaryGap: false,
+ data: params.xData,
+ },
+ ],
+ yAxis: [
+ {
+ minInterval: 1,
+ type: "value",
+ min: 0,
+ splitNumber: 4,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(43,48,52, 0.1)",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: "rgba(43,48,52, 0.4)",
+ margin: 20,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: series,
+ };
+ chart.setOption(option);
+ },
+ drawLine: function (chart, params) {
+ let series = [];
+ params.yData.forEach((m) => {
+ series.push({
+ name: m.title,
+ type: "line",
+ showAllSymbol: true,
+ symbol: "circle",
+ symbolSize: 10,
+ lineStyle: {
+ normal: {
+ color: "#4379EE",
+ width: 3,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(67,121,238,0.3)",
+ },
+ {
+ offset: 1,
+ color: "rgba(67,121,238,0)",
+ },
+ ],
+ false
+ ),
+ },
+ },
+ data: m.data,
+ });
+ });
+ let option = {
+ backgroundColor: "#fff",
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ lineStyle: {
+ color: "#4379EE",
+ },
+ },
+ },
+ grid: {
+ top: "25px",
+ left: "40px",
+ right: "3%",
+ bottom: "40px",
+ // containLabel: true
+ },
+ xAxis: [
+ {
+ type: "category",
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: "rgba(43,48,52, 0.4)",
+ margin: 20,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ boundaryGap: false,
+ data: params.xData,
+ },
+ ],
+ yAxis: [
+ {
+ minInterval: 1,
+ type: "value",
+ min: 0,
+ splitNumber: 4,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(43,48,52, 0.1)",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: "rgba(43,48,52, 0.4)",
+ margin: 20,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: series,
+ };
+ chart.setOption(option);
+ },
+ drawPie: function (chart, params) {
+ let option = {
+ color: params.color,
+ backgroundColor: "#fff",
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b} : {c}",
+ },
+ title: {
+ text: params.percentage,
+ textStyle: {
+ color: "#4379EE",
+ fontSize: 14,
+ align: "center",
+ fontWeight: "normal",
+ },
+ x: "center",
+ y: "center",
+ },
+ grid: {
+ top: 20,
+ bottom: 20,
+ left: 0,
+ right: 0,
+ },
+ legend: {
+ show: false,
+ },
+ series: [
+ // 涓昏灞曠ず灞傜殑
+ {
+ radius: ["55%", "90%"],
+ center: ["50%", "50%"],
+ type: "pie",
+ label: {
+ show: false,
+ },
+ name: params.title,
+ data: params.data,
+ },
+ // 杈规鐨勮缃�
+ {
+ radius: ["55%", "65%"],
+ center: ["50%", "50%"],
+ type: "pie",
+ label: {
+ normal: {
+ show: false,
+ },
+ emphasis: {
+ show: false,
+ },
+ },
+ labelLine: {
+ normal: {
+ show: false,
+ },
+ emphasis: {
+ show: false,
+ },
+ },
+ animation: false,
+ tooltip: {
+ show: false,
+ },
+ data: [
+ {
+ value: 1,
+ itemStyle: {
+ color: "rgba(250,250,250,0.3)",
+ },
+ },
+ ],
+ },
+ ],
+ };
+ chart.setOption(option);
+ },
+ drawGauge: function (chart, params) {
+ let option = {
+ tooltip: {
+ formatter: "{a} <br/>{b} : {c}%",
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {},
+ },
+ },
+ series: [
+ {
+ type: "gauge",
+ axisLine: {
+ lineStyle: {
+ width: 28,
+ color: [
+ [0.3, "#67e0e3"],
+ [0.7, "#37a2da"],
+ [1, "#fd666d"],
+ ],
+ },
+ },
+ pointer: {
+ itemStyle: {
+ color: "auto",
+ },
+ },
+ axisTick: {
+ distance: -28,
+ length: 8,
+ lineStyle: {
+ color: "#fff",
+ width: 2,
+ },
+ },
+ splitLine: {
+ distance: -28,
+ length: 28,
+ lineStyle: {
+ color: "#fff",
+ width: 4,
+ },
+ },
+ axisLabel: {
+ color: "inherit",
+ distance: 40,
+ fontSize: 14,
+ },
+ detail: {
+ valueAnimation: true,
+ formatter: "{value} %",
+ color: "inherit",
+ textStyle: {
+ fontSize: 30,
+ align: "center",
+ },
+ },
+ data: [
+ {
+ value: 70,
+ },
+ ],
+ },
+ ],
+ };
+ chart.setOption(option, true);
+ },
+};
+
+export { iuCharts };
--
Gitblit v1.9.3