{
  "order": 11,
  "key": "bar-line-chart",
  "type": "bar-line-chart",
  "name": "柱线混合图",
  "description": "柱子展示数量、折线展示比率，左右两个纵轴分别对应两种数值",
  "tags": [
    "charts",
    "柱线混合图",
    "bar-line-chart",
    "双轴",
    "混合",
    "增长率"
  ],
  "renderer": "echarts",
  "group": "charts",
  "icon": "solar:chart-2-linear",
  "sample_data": true,
  "usage_notes": [
    "默认图表数据仅用于演示，不是真实业务数据",
    "通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作",
    "柱系列使用左轴，折线系列 yAxisIndex=1 使用右轴",
    "两个系列 encode.x 需保持一致"
  ],
  "field_groups": [
    "node-base",
    "chart-title",
    "chart-legend",
    "chart-grid",
    "chart-palette",
    {
      "key": "bar-line-series",
      "label": "系列",
      "description": "柱系列和折线系列的颜色、名称和样式",
      "fields": [
        {
          "path": "props.option.color.0",
          "label": "柱颜色",
          "description": "柱子的颜色",
          "value_type": "color",
          "span": 12,
          "aliases": [
            "颜色",
            "主色"
          ]
        },
        {
          "path": "props.option.color.1",
          "label": "线颜色",
          "description": "折线的颜色",
          "value_type": "color",
          "span": 12,
          "aliases": [
            "折线颜色"
          ]
        },
        {
          "path": "props.option.series.1.smooth",
          "label": "平滑曲线",
          "description": "开启后折线为平滑曲线，关闭后为折角直线",
          "value_type": "boolean",
          "aliases": [
            "曲线",
            "平滑"
          ]
        },
        {
          "path": "props.option.series.0.name",
          "label": "柱系列名称",
          "description": "柱子系列的名称，显示在图例和鼠标悬停提示中",
          "value_type": "string",
          "aliases": [
            "柱子名称"
          ],
          "panel": false
        },
        {
          "path": "props.option.series.1.name",
          "label": "线系列名称",
          "description": "折线系列的名称，显示在图例和鼠标悬停提示中",
          "value_type": "string",
          "aliases": [
            "折线名称"
          ],
          "panel": false
        },
        {
          "path": "props.option.series.0.barWidth",
          "label": "柱宽",
          "description": "柱子宽度，百分比表示占每个类目宽度的比例，例如 40%",
          "value_type": "string",
          "aliases": [
            "柱子宽度"
          ],
          "panel": false
        }
      ]
    },
    {
      "key": "bar-line-axis",
      "label": "坐标轴",
      "description": "左纵轴对应柱子数值，右纵轴对应折线数值",
      "fields": [
        {
          "path": "props.option.yAxis.0.name",
          "label": "左轴名称",
          "description": "左侧纵轴（柱子数值）顶部显示的名称",
          "value_type": "string",
          "span": 12,
          "aliases": [
            "左轴标题"
          ]
        },
        {
          "path": "props.option.yAxis.1.name",
          "label": "右轴名称",
          "description": "右侧纵轴（折线数值）顶部显示的名称",
          "value_type": "string",
          "span": 12,
          "aliases": [
            "右轴标题"
          ]
        },
        {
          "path": "props.option.yAxis.1.axisLabel.formatter",
          "label": "右轴格式",
          "description": "右侧纵轴刻度的显示格式，{value} 代表刻度值，例如 {value}%",
          "value_type": "string",
          "aliases": [
            "右轴单位"
          ],
          "panel": false
        },
        {
          "path": "props.option.xAxis.axisLabel.color",
          "label": "X轴文字色",
          "description": "横轴类目文字的颜色",
          "value_type": "color",
          "aliases": [
            "横轴文字颜色"
          ],
          "panel": false
        }
      ]
    },
    "chart-dataset",
    {
      "key": "bar-line-data",
      "label": "数据映射",
      "description": "柱线混合图从数据集（dataset.source）中取哪些列",
      "fields": [
        {
          "path": "props.option.series.0.encode.x",
          "label": "X字段",
          "description": "横轴类目使用数据集中的哪一列；两个系列必须相同，修改时同时修改折线的X字段",
          "value_type": "string",
          "aliases": [
            "横轴字段",
            "类目字段"
          ]
        },
        {
          "path": "props.option.series.1.encode.x",
          "label": "折线X字段",
          "description": "须与X字段保持一致，修改X字段时同步修改",
          "value_type": "string",
          "panel": false
        },
        {
          "path": "props.option.series.0.encode.y",
          "label": "柱数值字段",
          "description": "柱子高度使用数据集中的哪一列",
          "value_type": "string",
          "aliases": [
            "柱子字段"
          ]
        },
        {
          "path": "props.option.series.1.encode.y",
          "label": "线数值字段",
          "description": "折线数值使用数据集中的哪一列",
          "value_type": "string",
          "aliases": [
            "折线字段"
          ]
        }
      ]
    }
  ],
  "eventOptions": [
    {
      "label": "点击事件",
      "value": "click"
    },
    {
      "label": "双击事件",
      "value": "dblclick"
    },
    {
      "label": "鼠标进入事件",
      "value": "mouseenter"
    },
    {
      "label": "鼠标离开事件",
      "value": "mouseleave"
    },
    {
      "label": "鼠标按下事件",
      "value": "mousedown"
    },
    {
      "label": "鼠标抬起事件",
      "value": "mouseup"
    },
    {
      "label": "鼠标移动事件",
      "value": "mousemove"
    },
    {
      "label": "鼠标滚轮事件",
      "value": "mousewheel"
    },
    {
      "label": "生命周期事件",
      "value": "vnodeMounted"
    }
  ],
  "schema": {
    "type": "bar-line-chart",
    "name": "柱线混合图",
    "layout": {
      "x": 0,
      "y": 0,
      "width": 400,
      "height": 260
    },
    "props": {
      "option": {
        "color": [
          "#409eff",
          "#e6a23c"
        ],
        "legend": {
          "top": 38,
          "left": "center",
          "itemWidth": 12,
          "itemHeight": 8,
          "show": true,
          "textStyle": {
            "color": "#cfd3dc"
          }
        },
        "title": {
          "text": "销售额与增长率",
          "top": 8,
          "left": "center",
          "textStyle": {
            "color": "#e5eaf3",
            "fontSize": 16
          }
        },
        "tooltip": {
          "trigger": "axis"
        },
        "dataset": {
          "source": [
            {
              "month": "一月",
              "sales": 120,
              "growth": 12.5
            },
            {
              "month": "二月",
              "sales": 200,
              "growth": 18.2
            },
            {
              "month": "三月",
              "sales": 150,
              "growth": -4.3
            },
            {
              "month": "四月",
              "sales": 80,
              "growth": -20.1
            },
            {
              "month": "五月",
              "sales": 170,
              "growth": 9.6
            },
            {
              "month": "六月",
              "sales": 240,
              "growth": 21.4
            }
          ]
        },
        "grid": {
          "top": 86,
          "right": 48,
          "bottom": 32,
          "left": 48,
          "containLabel": true
        },
        "xAxis": {
          "type": "category",
          "axisLine": {
            "lineStyle": {
              "color": "#4c4d4f"
            }
          },
          "axisLabel": {
            "color": "#cfd3dc"
          }
        },
        "yAxis": [
          {
            "type": "value",
            "axisLabel": {
              "color": "#cfd3dc"
            },
            "splitLine": {
              "lineStyle": {
                "color": "rgba(255, 255, 255, 0.08)"
              }
            },
            "name": "销售额",
            "nameTextStyle": {
              "color": "#a3a6ad"
            }
          },
          {
            "type": "value",
            "axisLabel": {
              "color": "#cfd3dc",
              "formatter": "{value}%"
            },
            "splitLine": {
              "show": false
            },
            "name": "增长率",
            "nameTextStyle": {
              "color": "#a3a6ad"
            }
          }
        ],
        "series": [
          {
            "name": "销售额",
            "type": "bar",
            "barWidth": "40%",
            "encode": {
              "x": "month",
              "y": "sales"
            },
            "itemStyle": {
              "borderRadius": [
                4,
                4,
                0,
                0
              ]
            }
          },
          {
            "name": "增长率",
            "type": "line",
            "yAxisIndex": 1,
            "smooth": true,
            "symbolSize": 6,
            "encode": {
              "x": "month",
              "y": "growth"
            }
          }
        ]
      }
    },
    "style": null,
    "events": []
  }
}