Menú
ECharts图表配置技能，包括柱状图、折线图、组合图等可视化组件
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
车险经营数据导入技能，支持CSV/JSON解析、验证、优先级管理
KPI指标计算技能，包括目标拆解、达成率、增长率、时间进度等核心业务计算
使用 Minion 框架进行智能业务分析
使用 Minion 框架进行智能代码审查
使用 Minion 框架进行智能数据验证
使用 Minion 框架生成智能测试用例
| name | chart-visualization |
| description | ECharts图表配置技能，包括柱状图、折线图、组合图等可视化组件 |
| license | MIT |
| version | 1.0.0 |
| category | visualization |
此技能提供车险经营数据可视化解决方案，基于 ECharts 实现柱状图、折线图、组合图等多种图表类型，支持响应式设计、主题适配和交互功能。
{
title: { text: '月度保费规划' },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: [
{
type: 'value',
name: '保费（万元）',
position: 'left'
}
],
series: [
{
name: '2026目标',
type: 'bar',
data: targetMonthlyData,
itemStyle: { color: '#60A5FA' }, // 浅蓝色
barWidth: '60%',
label: {
show: true,
position: 'top',
formatter: '{c}',
fontWeight: 'bold'
}
},
{
name: '2025实际',
type: 'bar',
data: actual2025MonthlyData,
itemStyle: { color: '#D1D5DB' }, // 浅灰色
barWidth: '60%',
label: {
show: true,
position: 'top',
formatter: '{c}',
fontWeight: 'bold'
}
}
]
}
{
title: { text: '季度保费规划' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
series: [
{
name: '2026目标',
type: 'bar',
data: quarterlyTargetData,
itemStyle: { color: '#60A5FA' }
},
{
name: '2025实际',
type: 'bar',
data: quarterlyActual2025Data,
itemStyle: { color: '#D1D5DB' }
}
]
}
{
title: { text: '月度保费与增长率' },
xAxis: {
type: 'category',
data: months
},
yAxis: [
{
type: 'value',
name: '保费（万元）',
position: 'left'
},
{
type: 'value',
name: '增长率（%）',
position: 'right',
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
// 柱状图（左轴）
{
name: '2026目标',
type: 'bar',
yAxisIndex: 0,
data: targetMonthlyData
},
{
name: '2025实际',
type: 'bar',
yAxisIndex: 0,
data: actual2025MonthlyData
},
// 折线图（右轴）
{
name: '同比增长率',
type: 'line',
yAxisIndex: 1,
data: growthRateData,
smooth: true,
lineStyle: { color: '#3B82F6' },
label: {
show: true,
formatter: '{c}%',
color: '#3B82F6'
}
}
]
}
{
title: { text: '月度保费占比' },
xAxis: {
type: 'category',
data: months
},
yAxis: [
{
type: 'value',
name: '占比（%）',
position: 'left',
max: 100,
axisLabel: { formatter: '{value}%' }
},
{
type: 'value',
name: '增长率（%）',
position: 'right',
axisLabel: { formatter: '{value}%' }
}
],
series: [
{
name: '2026规划占比',
type: 'bar',
yAxisIndex: 0,
data: targetPercentageData
},
{
name: '2025实际占比',
type: 'bar',
yAxisIndex: 0,
data: actualPercentageData
},
{
name: '同比增长率',
type: 'line',
yAxisIndex: 1,
data: growthRateData
}
]
}
const globalConfig = {
// 去掉网格线
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '10%',
containLabel: true,
show: false // 不显示网格线
},
// 图例配置
legend: {
data: ['2026目标', '2025实际', '同比增长率'],
top: '5%',
left: 'center'
},
// 提示框配置
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: function(params: any) {
let result = params[0].axisValue + '<br/>';
params.forEach((item: any) => {
if (item.seriesType === 'line') {
result += `${item.marker} ${item.seriesName}: ${item.value}%<br/>`;
} else {
result += `${item.marker} ${item.seriesName}: ${item.value} 万元<br/>`;
}
});
return result;
}
},
// 动画配置
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut'
};
const barStyle = {
barWidth: '60%', // 柱宽
// 数值标签
label: {
show: true,
position: 'top',
formatter: '{c}',
fontWeight: 'bold',
fontSize: 12,
// 标签颜色
color: '#6B7280' // 默认灰色
},
// 柱子颜色
itemStyle: {
borderRadius: [4, 4, 0, 0], // 圆角
color: '#60A5FA' // 2026目标浅蓝
},
// hover 效果
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
};
const lineStyle = {
smooth: true, // 平滑曲线
// 线条样式
lineStyle: {
width: 2,
color: '#3B82F6' // 蓝色
},
// 数据点样式
symbol: 'circle',
symbolSize: 6,
// 数值标签
label: {
show: true,
formatter: '{c}%',
color: '#3B82F6', // 默认蓝色
fontWeight: 'bold',
fontSize: 12
},
// 区域填充（可选）
areaStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
{ offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
]
}
}
};
当月/季度增长率 < 5% 时触发预警。
// 预警时柱状图颜色：橙色
const warningBarColor = '#FF9500';
// 预警时标签颜色：深红色
const warningLabelColor = '#8B0000';
// 预警时折线图颜色：深蓝色（保持不变）
const warningLineColor = '#1E40AF';
// 应用预警样式
series.forEach((item: any) => {
const growthRate = item.data;
if (item.seriesType === 'bar' && growthRate < 0.05) {
// 柱状图预警
item.itemStyle.color = warningBarColor;
item.label.color = warningLabelColor;
} else if (item.seriesType === 'line') {
// 折线图预警
growthRate.forEach((rate: number, index: number) => {
if (rate < 0.05) {
// 数据点预警（需要使用 rich 文本样式）
item.label.formatter = function(params: any) {
const color = params.value < 0.05 ? warningLabelColor : '#3B82F6';
return `{${color}|${params.value}%}`;
};
}
});
}
});
const richTextStyle = {
label: {
formatter: function(params: any) {
const growthRate = params.value;
const color = growthRate < 0.05 ? '#8B0000' : '#3B82F6';
return `{warning${growthRate < 0.05 ? '|warning' : '|normal'}|${growthRate.toFixed(1)}%}`;
},
rich: {
normal: { color: '#3B82F6' },
warning: { color: '#8B0000', fontWeight: 'bold' }
}
}
};
const largeScreenConfig = {
title: { textStyle: { fontSize: 24 } },
xAxis: { axisLabel: { fontSize: 16 } },
yAxis: { axisLabel: { fontSize: 16 } },
legend: { textStyle: { fontSize: 16 } },
grid: { left: '5%', right: '5%' }
};
const desktopConfig = {
title: { textStyle: { fontSize: 18 } },
xAxis: { axisLabel: { fontSize: 14 } },
yAxis: { axisLabel: { fontSize: 14 } },
legend: { textStyle: { fontSize: 14 } },
grid: { left: '3%', right: '4%' }
};
const mobileConfig = {
title: { textStyle: { fontSize: 14 } },
xAxis: { axisLabel: { fontSize: 12, rotate: 45 } },
yAxis: { axisLabel: { fontSize: 12 } },
legend: { textStyle: { fontSize: 12 } },
grid: { left: '10%', right: '10%' }
};
function getResponsiveConfig() {
const width = window.innerWidth;
if (width >= 2400) return largeScreenConfig;
if (width >= 1024) return desktopConfig;
return mobileConfig;
}
const colors = {
// 2026 目标
target: {
primary: '#60A5FA', // 浅蓝色
hover: '#3B82F6', // 蓝色
warning: '#FF9500' // 橙色（预警）
},
// 2025 实际
actual2025: {
primary: '#D1D5DB', // 浅灰色
hover: '#9CA3AF' // 深灰色
},
// 增长率
growth: {
normal: '#3B82F6', // 蓝色
warning: '#1E40AF', // 深蓝色（预警）
labelNormal: '#3B82F6',// 蓝色标签
labelWarning: '#8B0000' // 深红色标签（预警）
}
};
function formatPremium(value: number): string {
if (value >= 10000) {
return (value / 10000).toFixed(2) + '万';
}
return value.toFixed(0);
}
function formatPercentage(value: number): string {
return (value * 100).toFixed(1) + '%';
}
function formatGrowthRate(value: number | null): string {
if (value === null) return '—';
const formatted = (value * 100).toFixed(1);
const sign = value >= 0 ? '+' : '';
return sign + formatted + '%';
}
用户请求：生成成都分公司车险 2026 年月度保费规划图
AI 处理流程：
1. 计算月度目标（根据时间进度口径）
2. 获取 2025 年月度实际数据
3. 计算同比增长率
4. 检查预警条件（增长率 < 5%）
5. 应用预警样式
6. 生成 ECharts 配置
7. 渲染图表
用户请求：切换到权重时间进度模式
AI 处理流程：
1. 读取 allocation_rules.json 中的权重
2. 使用新权重重新计算月度目标
3. 更新图表数据源
4. 重新生成图表配置
5. 刷新图表显示
用户请求：导出当前图表为 PNG 图片
AI 处理流程：
1. 获取 ECharts 实例
2. 使用 getDataURL() 生成图片数据
3. 下载为 PNG 文件
4. 支持 2x/3x 高分辨率
echarts: ^5.5.0echarts-for-react: ^3.0.2src/lib/echarts-utils.ts (ECharts 工具函数)