336 lines
8.3 KiB
JSON
336 lines
8.3 KiB
JSON
{
|
|
"order": 1,
|
|
"key": "hbar-chart",
|
|
"type": "hbar-chart",
|
|
"name": "条形图",
|
|
"description": "横向条形对比各类目数值，类目名称较长或类目较多时比柱状图更易读",
|
|
"tags": [
|
|
"charts",
|
|
"条形图",
|
|
"hbar-chart"
|
|
],
|
|
"renderer": "echarts",
|
|
"group": "charts",
|
|
"icon": "solar:align-left-bold",
|
|
"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,
|
|
"themed": true
|
|
},
|
|
{
|
|
"path": "props.option.xAxis.axisLabel.fontSize",
|
|
"label": "X轴字号",
|
|
"description": "横轴（数值）刻度文字的大小",
|
|
"value_type": "number",
|
|
"minimum": 8,
|
|
"maximum": 48,
|
|
"unit": "px",
|
|
"default": 12,
|
|
"aliases": [
|
|
"横轴文字大小",
|
|
"数值轴文字大小"
|
|
],
|
|
"panel": false
|
|
},
|
|
{
|
|
"path": "props.option.xAxis.splitLine.lineStyle.color",
|
|
"label": "网格线颜色",
|
|
"description": "绘图区内纵向分隔线的颜色",
|
|
"value_type": "color",
|
|
"aliases": [
|
|
"分隔线颜色",
|
|
"背景线颜色"
|
|
],
|
|
"panel": false,
|
|
"themed": true
|
|
},
|
|
{
|
|
"path": "props.option.yAxis.axisLabel.color",
|
|
"label": "Y轴文字色",
|
|
"description": "纵轴类目名称文字的颜色",
|
|
"value_type": "color",
|
|
"aliases": [
|
|
"纵轴文字颜色",
|
|
"类目文字颜色"
|
|
],
|
|
"panel": false,
|
|
"themed": true
|
|
},
|
|
{
|
|
"path": "props.option.yAxis.axisLabel.fontSize",
|
|
"label": "Y轴字号",
|
|
"description": "纵轴类目名称文字的大小",
|
|
"value_type": "number",
|
|
"minimum": 8,
|
|
"maximum": 48,
|
|
"unit": "px",
|
|
"default": 12,
|
|
"aliases": [
|
|
"纵轴文字大小",
|
|
"类目文字大小"
|
|
],
|
|
"panel": false
|
|
},
|
|
{
|
|
"path": "props.option.yAxis.axisLine.lineStyle.color",
|
|
"label": "Y轴线颜色",
|
|
"description": "纵轴轴线的颜色",
|
|
"value_type": "color",
|
|
"aliases": [
|
|
"纵轴颜色",
|
|
"坐标轴颜色"
|
|
],
|
|
"panel": false,
|
|
"themed": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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,
|
|
"example": "label"
|
|
},
|
|
{
|
|
"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-dataset",
|
|
"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
|
|
},
|
|
"title": {
|
|
"text": "地区销售额",
|
|
"top": 8,
|
|
"left": "center",
|
|
"textStyle": {
|
|
"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"
|
|
},
|
|
"yAxis": {
|
|
"type": "category"
|
|
},
|
|
"series": [
|
|
{
|
|
"name": "销售额",
|
|
"type": "bar",
|
|
"barWidth": "45%",
|
|
"encode": {
|
|
"x": "sales",
|
|
"y": "region"
|
|
},
|
|
"itemStyle": {
|
|
"color": "#409eff",
|
|
"borderRadius": [
|
|
0,
|
|
4,
|
|
4,
|
|
0
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"style": null,
|
|
"events": []
|
|
}
|
|
}
|