docs/docs/cn/data-visualization/guide/custom-chart-options.md
自定义模式配置图表，可以在代码编辑器编写 JS，基于 ctx.data 返回完整的 ECharts option，适合多系列合并、复杂提示与动态样式。理论上可以支持完整的 Echart 功能和所有的图表类型。
ctx.data.objects：对象数组（每行记录）ctx.data.rows：二维数组（含表头）ctx.data.columns：按列分组的二维数组推荐用法：
把数据统一收敛在 dataset.resource 中，详细用法请参考 Echars 文档
先来看一个最简单的例子：
return {
dataset: { source: ctx.data.objects || [] },
xAxis: { type: 'category' },
yAxis: {},
series: [
{
type: 'bar',
showSymbol: false,
},
],
}
return {
dataset: {
source: ctx.data.objects.reverse()
},
title: {
text: "Monthly Sales Trend",
subtext: "Last 12 Months",
left: "center"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
}
},
legend: {
data: ["Revenue", "Order Count", "Avg Order Value"],
bottom: 0
},
grid: {
left: "5%",
right: "5%",
bottom: "60",
top: "80",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
rotate: 45
}
},
yAxis: [
{
type: "value",
name: "Amount(¥)",
position: "left",
axisLabel: {
formatter: (value) => {
return (value/10000).toFixed(0) + '0k';
}
}
},
{
type: "value",
name: "Order Count",
position: "right"
}
],
series: [
{
name: "Revenue",
type: "line",
smooth: true,
encode: {
x: "month",
y: "monthly_revenue"
},
areaStyle: {
opacity: 0.3
},
itemStyle: {
color: "#5470c6"
}
},
{
name: "Order Count",
type: "bar",
yAxisIndex: 1,
encode: {
x: "month",
y: "order_count"
},
itemStyle: {
color: "#91cc75",
opacity: 0.6
}
},
{
name: "Avg Order Value",
type: "line",
encode: {
x: "month",
y: "avg_order_value"
},
itemStyle: {
color: "#fac858"
},
lineStyle: {
type: "dashed"
}
}
]
}
建议：
ctx.data 生成 option，避免副作用。更多使用示例，可以参考 Nocobase Demo应用
也可以查看 Echarts 的官方 示例 从中选择你想要的图表效果，参考和复制 JS 配置代码。