原生图表与数据接口 (Charts)

MindLogic 拥有强大的内置原生图表渲染引擎，能将节点无缝切换为数据可视化面板。通过简单的属性配置或脚本赋值，您可以轻松呈现复杂的数据。

1. 基础 API 与属性设置

要将一个节点渲染为图表，您只需要设置以下两个核心属性：

node.contentType：必须设置为 "chart"。
node.contentPayload：存放图表渲染所需的数据（支持 JSON 字符串、直接赋值的 JS 对象/数组，或者第三方格式转换结果）。

脚本赋值示例：

// 1. 设置内容类型为图表
node.contentType = "chart";

// 2. 赋值图表数据（支持直接赋值 JS 对象，引擎会自动处理 JSON 序列化）
node.contentPayload = {
    chartType: "bar",
    xAxisTitle: "季度",
    yAxisTitle: "营收 (万元)",
    series: [
        { x: "Q1", y: 120, category: "产品A" },
        { x: "Q1", y: 80, category: "产品B" }
    ]
};

2. 所有支持的图表类型与示例数据 (JSON 字符串)

如果您不使用脚本，而是通过界面的属性面板直接粘贴数据，请务必使用标准的 JSON 字符串格式。以下是引擎目前支持的 5 种基础图表类型及其对应的原始 JSON 格式。

1) 柱状图 (Bar Chart)

适合用于比较分类数据的数值大小。 chartType: bar

JSON 示例数据：

{
  "chartType": "bar",
  "xAxisTitle": "月份",
  "yAxisTitle": "销售额",
  "series": [
    { "x": "一月", "y": 150, "category": "线上" },
    { "x": "一月", "y": 90, "category": "线下" },
    { "x": "二月", "y": 200, "category": "线上" },
    { "x": "二月", "y": 120, "category": "线下" }
  ]
}

2) 折线图 (Line Chart)

适合展示数据随时间序列的连续变化趋势。 chartType: line

JSON 示例数据：

{
  "chartType": "line",
  "xAxisTitle": "时间",
  "yAxisTitle": "温度 (°C)",
  "series": [
    { "x": "08:00", "y": 15, "category": "北京" },
    { "x": "12:00", "y": 25, "category": "北京" },
    { "x": "16:00", "y": 22, "category": "北京" }
  ]
}

3) 面积图 (Area Chart)

强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。 chartType: area

JSON 示例数据：

{
  "chartType": "area",
  "xAxisTitle": "年份",
  "yAxisTitle": "用户数 (万)",
  "series": [
    { "x": "2021", "y": 50, "category": "免费用户" },
    { "x": "2022", "y": 150, "category": "免费用户" },
    { "x": "2023", "y": 300, "category": "免费用户" },
    { "x": "2021", "y": 10, "category": "付费用户" },
    { "x": "2022", "y": 40, "category": "付费用户" },
    { "x": "2023", "y": 90, "category": "付费用户" }
  ]
}

4) 饼状图 (Pie Chart / Donut Chart)

适合展现部分与整体之间的比例关系。 chartType: pie

JSON 示例数据：

{
  "chartType": "pie",
  "series": [
    { "x": "研发部", "y": 45, "category": "研发部" },
    { "x": "市场部", "y": 25, "category": "市场部" },
    { "x": "销售部", "y": 20, "category": "销售部" },
    { "x": "人事部", "y": 10, "category": "人事部" }
  ]
}

5) 散点图 (Point / Scatter Chart)

用于显示和比较数值，展示两个变量之间的相关性。 chartType: point

JSON 示例数据：

{
  "chartType": "point",
  "xAxisTitle": "身高 (cm)",
  "yAxisTitle": "体重 (kg)",
  "series": [
    { "x": "165", "y": 55, "category": "女生" },
    { "x": "170", "y": 60, "category": "女生" },
    { "x": "175", "y": 70, "category": "男生" },
    { "x": "180", "y": 75, "category": "男生" }
  ]
}

6) 热力图 (Heatmap)

通过颜色深浅（或颜色梯度）来展示数据矩阵中的数值大小。在这里，x 为横轴（如日期），category 为纵轴（如类别），y 为颜色的强度/深度。 chartType: heatmap

JSON 示例数据：

{
  "chartType": "heatmap",
  "xAxisTitle": "周",
  "yAxisTitle": "员工",
  "series": [
    { "x": "周一", "y": 8, "category": "张三" },
    { "x": "周一", "y": 12, "category": "李四" },
    { "x": "周二", "y": 9, "category": "张三" },
    { "x": "周二", "y": 7, "category": "李四" }
  ]
}

7) 辅助参考线 (Rule Line)

通常不单独使用，而是用于复合图表中绘制横贯整个画布的水平辅助线（如警戒线、平均线、目标线等）。y 表示线的高度位置，category 表示线的标签和图例颜色。 chartType: rule

3. 复合图表 (Composite Charts)

MindLogic 原生支持在同一个坐标系内混合渲染多种图形（例如“柱状图 + 折线图”的双轴效果，或柱状图加上“平均线”）。要启用混合渲染，您不需要指定全局的 chartType，而是提供一个 seriesTypes 字典，告诉引擎每个数据类别分别对应什么图形。

JSON 示例数据 (柱线混合加参考线)：

{
  "xAxisTitle": "月份",
  "yAxisTitle": "金额 (万元)",
  "seriesTypes": { 
    "实际销售额": "bar", 
    "预期目标": "line",
    "年度及格线": "rule"
  },
  "series": [
    { "x": "一月", "y": 120, "category": "实际销售额" },
    { "x": "二月", "y": 150, "category": "实际销售额" },
    { "x": "三月", "y": 210, "category": "实际销售额" },
    
    { "x": "一月", "y": 140, "category": "预期目标" },
    { "x": "二月", "y": 160, "category": "预期目标" },
    { "x": "三月", "y": 180, "category": "预期目标" },
    
    { "y": 150, "category": "年度及格线" }
  ]
}

4. 第三方图表格式无缝衔接 (ECharts & Chart.js)

如果您已经拥有符合 ECharts 或 Chart.js 规范的配置数据（例如通过后端接口返回，或者由大模型生成），您完全不需要手动去重构数据。

MindLogic 的脚本引擎内置了两个全局格式转换函数：

FromECharts(option)
FromChartJs(config)

它们可以智能提取第三方格式中的标签、数据集和分类，并自动将其“拍平”为 MindLogic 支持的原生格式。

示例用法：

// 假设这里是由大模型生成或后端接口返回的 ECharts 规范配置
let myEchartsOption = {
    xAxis: { type: 'category', data: ['一月', '二月', '三月'] },
    yAxis: { type: 'value', name: '销量' },
    series: [
        { type: 'bar', name: '直接访问', data: [320, 332, 301] },
        { type: 'line', name: '搜索引擎', data: [820, 932, 901] }
    ]
};

// 1. 设置内容类型
node.contentType = "chart";

// 2. 使用全局转换函数，一行代码完成数据注入
node.contentPayload = FromECharts(myEchartsOption);