257 lines
5.9 KiB
JSON
257 lines
5.9 KiB
JSON
{
|
|
"order": 13,
|
|
"key": "pictorial-bar-chart",
|
|
"type": "pictorial-bar-chart",
|
|
"name": "象形柱图",
|
|
"description": "用重复的图形堆叠成柱子对比各类目数值，视觉上更形象",
|
|
"tags": [
|
|
"charts",
|
|
"象形柱图",
|
|
"pictorial-bar-chart",
|
|
"象形",
|
|
"分段",
|
|
"装饰"
|
|
],
|
|
"renderer": "echarts",
|
|
"group": "charts",
|
|
"icon": "solar:battery-charge-bold",
|
|
"sample_data": true,
|
|
"usage_notes": [
|
|
"默认图表数据仅用于演示，不是真实业务数据",
|
|
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
|
],
|
|
"field_groups": [
|
|
"node-base",
|
|
"chart-title",
|
|
"chart-grid",
|
|
"chart-axis",
|
|
{
|
|
"key": "pictorial-series",
|
|
"label": "图形",
|
|
"description": "组成柱子的图形样式",
|
|
"fields": [
|
|
{
|
|
"path": "props.option.series.0.itemStyle.color",
|
|
"label": "图形颜色",
|
|
"description": "图形的颜色",
|
|
"value_type": "color",
|
|
"aliases": [
|
|
"颜色",
|
|
"主色"
|
|
]
|
|
},
|
|
{
|
|
"path": "props.option.series.0.symbol",
|
|
"label": "图形",
|
|
"description": "组成柱子的图形形状",
|
|
"value_type": "enum",
|
|
"options": [
|
|
{
|
|
"value": "rect",
|
|
"label": "矩形"
|
|
},
|
|
{
|
|
"value": "roundRect",
|
|
"label": "圆角矩形"
|
|
},
|
|
{
|
|
"value": "circle",
|
|
"label": "圆形"
|
|
},
|
|
{
|
|
"value": "triangle",
|
|
"label": "三角形"
|
|
},
|
|
{
|
|
"value": "diamond",
|
|
"label": "菱形"
|
|
}
|
|
],
|
|
"aliases": [
|
|
"形状"
|
|
]
|
|
},
|
|
{
|
|
"path": "props.option.series.0.symbolSize.0",
|
|
"label": "图形宽度",
|
|
"description": "单个图形的宽度",
|
|
"value_type": "number",
|
|
"span": 12,
|
|
"minimum": 1,
|
|
"unit": "px"
|
|
},
|
|
{
|
|
"path": "props.option.series.0.symbolSize.1",
|
|
"label": "图形高度",
|
|
"description": "单个图形的高度",
|
|
"value_type": "number",
|
|
"span": 12,
|
|
"minimum": 1,
|
|
"unit": "px"
|
|
},
|
|
{
|
|
"path": "props.option.series.0.symbolMargin",
|
|
"label": "图形间距",
|
|
"description": "重复图形之间的间隔",
|
|
"value_type": "number",
|
|
"span": 12,
|
|
"minimum": 0,
|
|
"unit": "px",
|
|
"aliases": [
|
|
"间距"
|
|
]
|
|
},
|
|
{
|
|
"path": "props.option.series.0.symbolRepeat",
|
|
"label": "重复图形",
|
|
"description": "开启后用多个小图形重复堆叠成柱子，关闭后用一个拉伸的图形",
|
|
"value_type": "boolean",
|
|
"span": 12,
|
|
"aliases": [
|
|
"重复"
|
|
]
|
|
},
|
|
{
|
|
"path": "props.option.series.0.name",
|
|
"label": "系列名称",
|
|
"description": "这组柱子的名称，显示在鼠标悬停提示中；不是图表标题",
|
|
"value_type": "string",
|
|
"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": "pictorial-bar-chart",
|
|
"name": "象形柱图",
|
|
"layout": {
|
|
"x": 0,
|
|
"y": 0,
|
|
"width": 400,
|
|
"height": 260
|
|
},
|
|
"props": {
|
|
"option": {
|
|
"title": {
|
|
"text": "各仓库库存量",
|
|
"top": 8,
|
|
"left": "center",
|
|
"textStyle": {
|
|
"fontSize": 16
|
|
}
|
|
},
|
|
"tooltip": {
|
|
"trigger": "axis",
|
|
"axisPointer": {
|
|
"type": "none"
|
|
}
|
|
},
|
|
"dataset": {
|
|
"source": [
|
|
{
|
|
"warehouse": "上海仓",
|
|
"stock": 86
|
|
},
|
|
{
|
|
"warehouse": "广州仓",
|
|
"stock": 72
|
|
},
|
|
{
|
|
"warehouse": "北京仓",
|
|
"stock": 64
|
|
},
|
|
{
|
|
"warehouse": "成都仓",
|
|
"stock": 45
|
|
},
|
|
{
|
|
"warehouse": "武汉仓",
|
|
"stock": 38
|
|
}
|
|
]
|
|
},
|
|
"grid": {
|
|
"top": 48,
|
|
"right": 24,
|
|
"bottom": 32,
|
|
"left": 48,
|
|
"containLabel": true
|
|
},
|
|
"xAxis": {
|
|
"type": "category"
|
|
},
|
|
"yAxis": {
|
|
"type": "value"
|
|
},
|
|
"series": [
|
|
{
|
|
"name": "库存",
|
|
"type": "pictorialBar",
|
|
"symbol": "rect",
|
|
"symbolRepeat": true,
|
|
"symbolSize": [
|
|
24,
|
|
6
|
|
],
|
|
"symbolMargin": 2,
|
|
"symbolClip": true,
|
|
"itemStyle": {
|
|
"color": "#409eff"
|
|
},
|
|
"encode": {
|
|
"x": "warehouse",
|
|
"y": "stock"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"style": null,
|
|
"events": []
|
|
}
|
|
}
|