181 lines
5.2 KiB
HTML
181 lines
5.2 KiB
HTML
<!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> |