首次提交

2026-07-13 12:06:16 +08:00
commit e3c810b1a6
1690 changed files with 228324 additions and 0 deletions
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>contrast chart</title>
+    <style>
+        html, body {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0;
+          background: transparent;
+          overflow: hidden;
+        }
+        #chart {
+          width: 100%;
+          height: 100%;
+          background: transparent;
+        }
+    </style>
+</head>
+<body>
+<div id="chart"></div>
+
+<!-- 你项目里若是本地 echarts，请改成你的实际路径 -->
+<!-- 例如：<script src="./echarts.min.js"></script> -->
+<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+
+<script>
+    let chart = null;
+    let currentColor = '#00FF88';
+    let currentData = [];
+    let currentUnit = '';
+    let currentName = '';
+    let xLabels = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
+
+    function getOption(data, unit, name, color) {
+      const max = Math.max.apply(null, data);
+      const min = Math.min.apply(null, data);
+
+      return {
+        backgroundColor: 'transparent',
+        animation: true,
+        grid: {
+          left: 18,
+          right: 12,
+          top: 24,
+          bottom: 24,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(10,22,40,0.9)',
+          borderColor: 'rgba(22,119,255,0.5)',
+          borderWidth: 1,
+          textStyle: { color: '#fff', fontSize: 11 },
+          formatter: function (params) {
+            const p = params[0];
+            return `${p.axisValue}<br/>${name}: ${p.value}${unit ? ' ' + unit : ''}`;
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xLabels,
+          boundaryGap: false,
+          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.25)' } },
+          axisTick: { show: false },
+          axisLabel: {
+            color: 'rgba(255,255,255,0.65)',
+            fontSize: 10
+          },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            color: 'rgba(255,255,255,0.65)',
+            fontSize: 10
+          },
+          splitLine: {
+            lineStyle: { color: 'rgba(255,255,255,0.12)' }
+          }
+        },
+        series: [
+          {
+            name: name,
+            type: 'line',
+            data: data,
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            showSymbol: true,
+            lineStyle: {
+              width: 2,
+              color: color
+            },
+            itemStyle: {
+              color: color,
+              borderColor: '#ffffff',
+              borderWidth: 1
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: hexToRgba(color, 0.35) },
+                  { offset: 1, color: hexToRgba(color, 0.02) }
+                ]
+              }
+            },
+            markPoint: {
+              symbolSize: 30,
+              label: { color: '#fff', fontSize: 9 },
+              itemStyle: { color: color },
+              data: [
+                { type: 'max', name: '最大值' },
+                { type: 'min', name: '最小值' }
+              ]
+            }
+          }
+        ]
+      };
+    }
+
+    function hexToRgba(hex, alpha) {
+      const c = hex.replace('#', '');
+      if (c.length !== 6) return `rgba(0,255,136,${alpha})`;
+      const r = parseInt(c.substring(0, 2), 16);
+      const g = parseInt(c.substring(2, 4), 16);
+      const b = parseInt(c.substring(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    }
+
+    function ensureChart() {
+      const dom = document.getElementById('chart');
+      if (!chart) {
+        chart = echarts.init(dom, null, { renderer: 'canvas' });
+      }
+    }
+
+    // 首次初始化（对应 TS: onPageEnd -> initChart）
+    function initChart(data, unit, name) {
+      ensureChart();
+      currentData = Array.isArray(data) ? data : [];
+      currentUnit = unit || '';
+      currentName = name || '';
+      chart.setOption(getOption(currentData, currentUnit, currentName, currentColor), true);
+    }
+
+    // 更新数据（对应 TS: updateChart -> updateData）
+    function updateData(data, unit, name) {
+      ensureChart();
+      currentData = Array.isArray(data) ? data : currentData;
+      currentUnit = unit !== undefined ? unit : currentUnit;
+      currentName = name !== undefined ? name : currentName;
+      chart.setOption(getOption(currentData, currentUnit, currentName, currentColor), true);
+    }
+
+    // 更新颜色
+    function setColor(color) {
+      currentColor = color || currentColor;
+      if (!chart) return;
+      chart.setOption(getOption(currentData, currentUnit, currentName, currentColor), true);
+    }
+
+    window.addEventListener('resize', function () {
+      if (chart) chart.resize();
+    });
+
+    // 暴露给 ArkTS 调用
+    window.initChart = initChart;
+    window.updateData = updateData;
+    window.setColor = setColor;
+</script>
+</body>
+</html>