Appearance
Chart 图表样式
数据大屏图表组件规范，基于 ECharts 实现。
CSS样式
全部 chart1 样式代码：
查看代码
css
/* 大屏组件全局 CSS 变量 */
:root {
/* ==================== 主题色 ==================== */
--hn-color-primary: #439FFF; /* 品牌色 */
/* ==================== 辅助色 ==================== */
--hn-color-auxiliary-blue: #00EEFF; /* 海天蓝 */
--hn-color-auxiliary-cyan: #00FFB7; /* 炫丽青 */
--hn-color-auxiliary-purple: #AA00FF; /* 神秘紫 */
/* ==================== 文字颜色 ==================== */
--hn-color-text-white: #FFFFFF; /* 闪亮白 */
--hn-color-text-gray: #A3C0E5; /* 朦胧灰 */
/* ==================== 告警颜色 ==================== */
--hn-color-success: #00FF4D; /* 成功绿 */
--hn-color-link: #247BFF; /* 超链蓝 */
--hn-color-warning: #FFC300; /* 警告黄 */
--hn-color-danger: #FF1F47; /* 危险红 */
/* ==================== 渐变色 ==================== */
/* 品牌色渐变01 */
--hn-gradient-brand-start: #A1CFFF;
--hn-gradient-brand-end: #439FFF;
--hn-gradient-brand: linear-gradient(90deg, #A1CFFF 0%, #439FFF 100%);
/* 蓝色渐变02 */
--hn-gradient-blue-start: #7FB2FF;
--hn-gradient-blue-end: #0066FF;
--hn-gradient-blue: linear-gradient(90deg, #7FB2FF 0%, #0066FF 100%);
/* 红色渐变03 */
--hn-gradient-red-start: #E98197;
--hn-gradient-red-end: #E98197;
--hn-gradient-red: linear-gradient(90deg, #E98197 0%, #E98197 100%);
/* 蓝青色渐变04 */
--hn-gradient-cyan-start: #00D4FF;
--hn-gradient-cyan-end: #00FFB7;
--hn-gradient-cyan: linear-gradient(90deg, #00D4FF 0%, #00FFB7 100%);
/* 警告渐变05 */
--hn-gradient-warning-start: #FFE799;
--hn-gradient-warning-end: #FFC300;
--hn-gradient-warning: linear-gradient(90deg, #FFE799 0%, #FFC300 100%);
/* 绿色渐变06 */
--hn-gradient-green-start: #8CF7B7;
--hn-gradient-green-end: #00FF4D;
--hn-gradient-green: linear-gradient(90deg, #8CF7B7 0%, #00FF4D 100%);
/* 白色渐变07 */
--hn-gradient-white-start: #FFFFFF;
--hn-gradient-white-end: #A3C0E5;
--hn-gradient-white: linear-gradient(90deg, #FFFFFF 0%, #A3C0E5 100%);
/* 紫色渐变08 */
--hn-gradient-purple-start: #D47FFF;
--hn-gradient-purple-end: #AA00FF;
--hn-gradient-purple: linear-gradient(90deg, #D47FFF 0%, #AA00FF 100%);
/* ==================== 背景色 ==================== */
--hn-bg-center: #072652; /* 径向渐变中心 */
--hn-bg-edge: #00102A; /* 径向渐变边缘 */
--hn-bg-radial: radial-gradient(60% 60% at 50% 50%, #072652 0%, #00102A 100%), #D8D8D8;
--hn-bg-radial-center: linear-gradient(0deg, #072652, #072652), #D8D8D8;;
--hn-bg-radial-edge: linear-gradient(0deg, #00102A, #00102A), #D8D8D8;
/* ==================== 品牌梯度色 ==================== */
--hn-brand-level-1: #72B7FF;
--hn-brand-level-2: #439FFF;
--hn-brand-level-3: #1377FF;
--hn-brand-level-4: #133EF1;
--hn-brand-level-5: #000BDA;
/* ==================== 白色梯度色（文字） ==================== */
--hn-text-level-1: #FFFFFF;
--hn-text-level-2: #D8E4F4;
--hn-text-level-3: #A3C0E5;
--hn-text-level-4: #759DCF;
--hn-text-level-5: #426FA9;
/* ==================== 字体家族 ==================== */
--hn-font-family-title: 'DouYuZhuiGuangTi', sans-serif; /* 斗鱼追光体 - 头部标题 */
--hn-font-family-cn: 'Source Han Sans CN', 'Noto Sans SC', sans-serif; /* 思源黑体 - 中文 */
--hn-font-family-num: 'D-DIN', 'DIN Alternate', sans-serif; /* D-DIN - 数值/英文 */
/* ==================== 字号 ==================== */
--hn-font-size-h1: 28px; /* 头部标题栏 */
--hn-font-size-h2: 16px; /* 标题 */
--hn-font-size-h3: 14px; /* 小标题、按钮文字 */
--hn-font-size-body: 14px; /* 正文 */
--hn-font-size-caption: 12px; /* 辅助文字 */
--hn-font-size-num-lg: 32px; /* 大数值 */
--hn-font-size-num-md: 16px; /* 中数值 */
--hn-font-size-num-sm: 14px; /* 小数值 */
--hn-font-size-num-xs: 12px; /* 超小数值 */
/* ==================== 字重 ==================== */
--hn-font-weight-regular: 400;
--hn-font-weight-medium: 500;
--hn-font-weight-bold: 700;
}css
.chart-container {
background: var(--hn-bg-center);
border-radius: 4px;
padding: 16px;
border: 1px solid rgba(67, 159, 255, 0.2);
}
.chart-title {
display: flex;
align-items: center;
color: var(--hn-color-text-white);
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.title-icon {
display: inline-block;
width: 8px;
height: 8px;
background: linear-gradient(135deg, var(--hn-color-auxiliary-blue) 0%, var(--hn-color-primary) 100%);
transform: rotate(45deg);
margin-right: 8px;
}
.chart-note {
color: var(--hn-color-text-gray);
font-weight: 400;
font-size: 12px;
}
.chart {
width: 100%;
height: 260px;
}柱状图
基础柱状图
单系列柱状图，适用于展示单一数据维度的对比。
基础柱状图
查看代码
vue
<div ref="chartRef" class="chart"></div>多柱状图
多系列并排柱状图，适用于多维度数据对比。
多柱状图
查看代码
vue
<div ref="chartRef" class="chart"></div>堆叠柱形图
多系列堆叠柱状图，适用于展示各部分占整体的比例关系。
堆叠柱形图
查看代码
vue
<div ref="chartRef" class="chart"></div>折柱混合图
柱状图与折线图的组合，适用于展示不同量级的数据对比。
折柱混合图
查看代码
vue
<div ref="chartRef" class="chart"></div>条形图
基础条形图
水平方向的柱状图，适用于标签文字较长的场景。
基础条形图
查看代码
vue
<div ref="chartRef" class="chart"></div>堆叠条形图
水平方向的堆叠柱状图，光标悬浮时颜色透明度变为 80%。
堆叠条形图
查看代码
vue
<div ref="chartRef" class="chart"></div>折线图
基础折线图
基础折线图，适用于展示数据随时间变化的趋势。
基础折线图
查看代码
vue
<div ref="chartRef" class="chart"></div>