{
  "order": 1,
  "key": "hbar-chart",
  "type": "hbar-chart",
  "name": "条形图",
  "description": "横向条形对比各类目数值，类目名称较长或类目较多时比柱状图更易读",
  "tags": [
    "charts",
    "条形图",
    "hbar-chart"
  ],
  "renderer": "echarts",
  "group": "charts",
  "icon": "solar:align-left-bold",
  "sample_data": true,
  "usage_notes": [
    "默认图表数据仅用于演示，不是真实业务数据",
    "通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
  ],
  "field_groups": [
    "node-base",
    "chart-title",
    "chart-legend",
    "chart-grid",
    {
      "key": "hbar-axis",
      "label": "坐标轴",
      "description": "条形图的横轴为数值轴、纵轴为类目轴",
      "fields": [
        {
          "path": "props.option.xAxis.axisLabel.color",
          "label": "X轴文字色",
          "description": "横轴（数值）刻度文字的颜色",
          "value_type": "color",
          "aliases": [
            "横轴文字颜色",
            "数值轴文字颜色"
          ],
          "panel": false
        },
        {
          "path": "props.option.xAxis.splitLine.lineStyle.color",
          "label": "网格线颜色",
          "description": "绘图区内纵向分隔线的颜色",
          "value_type": "color",
          "aliases": [
            "分隔线颜色",
            "背景线颜色"
          ],
          "panel": false
        },
        {
          "path": "props.option.yAxis.axisLabel.color",
          "label": "Y轴文字色",
          "description": "纵轴类目名称文字的颜色",
          "value_type": "color",
          "aliases": [
            "纵轴文字颜色",
            "类目文字颜色"
          ],
          "panel": false
        },
        {
          "path": "props.option.yAxis.axisLine.lineStyle.color",
          "label": "Y轴线颜色",
          "description": "纵轴轴线的颜色",
          "value_type": "color",
          "aliases": [
            "纵轴颜色",
            "坐标轴颜色"
          ],
          "panel": false
        }
      ]
    },
    {
      "key": "hbar-series",
      "label": "条形",
      "description": "条形的颜色、粗细、圆角、系列名称和数值标签",
      "fields": [
        {
          "path": "props.option.series.0.itemStyle.color",
          "label": "条颜色",
          "description": "条形的填充颜色",
          "value_type": "color",
          "aliases": [
            "颜色",
            "条形颜色",
            "主色"
          ]
        },
        {
          "path": "props.option.series.0.name",
          "label": "系列名称",
          "description": "这组条形的名称，显示在图例和鼠标悬停提示中；不是图表标题",
          "value_type": "string",
          "aliases": [
            "图例名称",
            "系列名",
            "数据名称"
          ],
          "panel": false
        },
        {
          "path": "props.option.series.0.barWidth",
          "label": "条宽",
          "description": "条形粗细，百分比表示占每个类目高度的比例，例如 45%",
          "value_type": "string",
          "aliases": [
            "条形宽度",
            "条形粗细"
          ],
          "panel": false
        },
        {
          "path": "props.option.series.0.itemStyle.borderRadius",
          "label": "条圆角",
          "description": "条形四个角的圆角半径，顺序为左上、右上、右下、左下，默认只有右端圆角",
          "value_type": "array",
          "item_type": "number",
          "unit": "px",
          "aliases": [
            "圆角"
          ],
          "panel": false
        },
        {
          "path": "props.option.series.0.label.show",
          "label": "数值标签",
          "description": "是否在每个条形上显示数值",
          "value_type": "boolean",
          "default": false,
          "aliases": [
            "显示数值",
            "数据标签",
            "标签"
          ],
          "panel": false
        },
        {
          "path": "props.option.series.0.label.position",
          "label": "标签位置",
          "description": "数值标签相对条形的位置，开启数值标签后生效",
          "value_type": "enum",
          "default": "inside",
          "options": [
            {
              "value": "right",
              "label": "条形右侧"
            },
            {
              "value": "inside",
              "label": "条内居中"
            },
            {
              "value": "insideRight",
              "label": "条内右端"
            },
            {
              "value": "insideLeft",
              "label": "条内左端"
            }
          ],
          "aliases": [
            "数值位置"
          ],
          "panel": false
        }
      ]
    },
    "chart-encode-xy"
  ],
  "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": "hbar-chart",
    "name": "条形图",
    "layout": {
      "x": 0,
      "y": 0,
      "width": 400,
      "height": 260
    },
    "props": {
      "option": {
        "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": {},
        "dataset": {
          "source": [
            {
              "region": "华东",
              "sales": 320
            },
            {
              "region": "华南",
              "sales": 240
            },
            {
              "region": "华北",
              "sales": 210
            },
            {
              "region": "西南",
              "sales": 180
            },
            {
              "region": "西北",
              "sales": 130
            }
          ]
        },
        "grid": {
          "top": 86,
          "right": 24,
          "bottom": 24,
          "left": 48,
          "containLabel": true
        },
        "xAxis": {
          "type": "value",
          "axisLabel": {
            "color": "#cfd3dc"
          },
          "splitLine": {
            "lineStyle": {
              "color": "rgba(255, 255, 255, 0.08)"
            }
          }
        },
        "yAxis": {
          "type": "category",
          "axisLine": {
            "lineStyle": {
              "color": "#4c4d4f"
            }
          },
          "axisLabel": {
            "color": "#cfd3dc"
          }
        },
        "series": [
          {
            "name": "销售额",
            "type": "bar",
            "barWidth": "45%",
            "encode": {
              "x": "sales",
              "y": "region"
            },
            "itemStyle": {
              "color": "#409eff",
              "borderRadius": [
                0,
                4,
                4,
                0
              ]
            }
          }
        ]
      }
    },
    "style": null,
    "events": []
  }
}