330 lines
8.3 KiB
JSON
330 lines
8.3 KiB
JSON
{
|
||
"order": 10,
|
||
"key": "stacked-bar-chart",
|
||
"type": "stacked-bar-chart",
|
||
"name": "堆叠柱状图",
|
||
"description": "多个系列在同一柱子上堆叠，同时展示总量和各部分构成",
|
||
"tags": [
|
||
"charts",
|
||
"堆叠柱状图",
|
||
"stacked-bar-chart",
|
||
"堆叠",
|
||
"构成"
|
||
],
|
||
"renderer": "echarts",
|
||
"group": "charts",
|
||
"icon": "solar:chart-bold",
|
||
"sample_data": true,
|
||
"usage_notes": [
|
||
"默认图表数据仅用于演示，不是真实业务数据",
|
||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作",
|
||
"三个系列共用 stack: total，X 字段需在三个系列的 encode.x 中保持一致"
|
||
],
|
||
"field_groups": [
|
||
"node-base",
|
||
"chart-title",
|
||
"chart-legend",
|
||
"chart-grid",
|
||
"chart-axis",
|
||
"chart-palette",
|
||
{
|
||
"key": "stacked-series",
|
||
"label": "系列",
|
||
"description": "三个堆叠系列的颜色和名称，从下往上依次为系列1、2、3",
|
||
"fields": [
|
||
{
|
||
"path": "props.option.color.0",
|
||
"label": "系列1颜色",
|
||
"description": "第 1 个系列（从下往上第 1 段）的颜色",
|
||
"value_type": "color",
|
||
"span": 12,
|
||
"aliases": [
|
||
"颜色",
|
||
"主色"
|
||
]
|
||
},
|
||
{
|
||
"path": "props.option.color.1",
|
||
"label": "系列2颜色",
|
||
"description": "第 2 个系列（从下往上第 2 段）的颜色",
|
||
"value_type": "color",
|
||
"span": 12
|
||
},
|
||
{
|
||
"path": "props.option.color.2",
|
||
"label": "系列3颜色",
|
||
"description": "第 3 个系列（从下往上第 3 段）的颜色",
|
||
"value_type": "color",
|
||
"span": 12
|
||
},
|
||
{
|
||
"path": "props.option.series.0.name",
|
||
"label": "系列1名称",
|
||
"description": "第 1 个系列的名称，显示在图例和鼠标悬停提示中",
|
||
"value_type": "string",
|
||
"aliases": [
|
||
"图例名称"
|
||
],
|
||
"panel": false
|
||
},
|
||
{
|
||
"path": "props.option.series.1.name",
|
||
"label": "系列2名称",
|
||
"description": "第 2 个系列的名称，显示在图例和鼠标悬停提示中",
|
||
"value_type": "string",
|
||
"aliases": [
|
||
"图例名称"
|
||
],
|
||
"panel": false
|
||
},
|
||
{
|
||
"path": "props.option.series.2.name",
|
||
"label": "系列3名称",
|
||
"description": "第 3 个系列的名称，显示在图例和鼠标悬停提示中",
|
||
"value_type": "string",
|
||
"aliases": [
|
||
"图例名称"
|
||
],
|
||
"panel": false
|
||
}
|
||
]
|
||
},
|
||
"chart-dataset",
|
||
{
|
||
"key": "stacked-data",
|
||
"label": "数据映射",
|
||
"description": "堆叠柱状图从数据集（dataset.source）中取哪些列",
|
||
"fields": [
|
||
{
|
||
"path": "props.option.series.0.encode.x",
|
||
"label": "X字段",
|
||
"description": "横轴类目使用数据集中的哪一列；三个系列必须相同，修改时同时修改系列2、系列3的X字段",
|
||
"value_type": "string",
|
||
"aliases": [
|
||
"横轴字段",
|
||
"类目字段"
|
||
]
|
||
},
|
||
{
|
||
"path": "props.option.series.1.encode.x",
|
||
"label": "系列2X字段",
|
||
"description": "须与X字段保持一致，修改X字段时同步修改",
|
||
"value_type": "string",
|
||
"panel": false
|
||
},
|
||
{
|
||
"path": "props.option.series.2.encode.x",
|
||
"label": "系列3X字段",
|
||
"description": "须与X字段保持一致，修改X字段时同步修改",
|
||
"value_type": "string",
|
||
"panel": false
|
||
},
|
||
{
|
||
"path": "props.option.series.0.encode.y",
|
||
"label": "系列1字段",
|
||
"description": "第 1 个系列的数值使用数据集中的哪一列",
|
||
"value_type": "string",
|
||
"aliases": [
|
||
"系列1数值字段"
|
||
]
|
||
},
|
||
{
|
||
"path": "props.option.series.1.encode.y",
|
||
"label": "系列2字段",
|
||
"description": "第 2 个系列的数值使用数据集中的哪一列",
|
||
"value_type": "string",
|
||
"aliases": [
|
||
"系列2数值字段"
|
||
]
|
||
},
|
||
{
|
||
"path": "props.option.series.2.encode.y",
|
||
"label": "系列3字段",
|
||
"description": "第 3 个系列的数值使用数据集中的哪一列",
|
||
"value_type": "string",
|
||
"aliases": [
|
||
"系列3数值字段"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"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": "stacked-bar-chart",
|
||
"name": "堆叠柱状图",
|
||
"layout": {
|
||
"x": 0,
|
||
"y": 0,
|
||
"width": 400,
|
||
"height": 260
|
||
},
|
||
"props": {
|
||
"option": {
|
||
"color": [
|
||
"#409eff",
|
||
"#67c23a",
|
||
"#e6a23c",
|
||
"#f56c6c",
|
||
"#909399"
|
||
],
|
||
"legend": {
|
||
"top": 38,
|
||
"left": "center",
|
||
"itemWidth": 12,
|
||
"itemHeight": 8,
|
||
"show": true
|
||
},
|
||
"title": {
|
||
"text": "各渠道月度销售额",
|
||
"top": 8,
|
||
"left": "center",
|
||
"textStyle": {
|
||
"fontSize": 16
|
||
}
|
||
},
|
||
"tooltip": {
|
||
"trigger": "axis",
|
||
"axisPointer": {
|
||
"type": "shadow"
|
||
}
|
||
},
|
||
"dataset": {
|
||
"source": [
|
||
{
|
||
"month": "一月",
|
||
"online": 120,
|
||
"offline": 220,
|
||
"agent": 150
|
||
},
|
||
{
|
||
"month": "二月",
|
||
"online": 132,
|
||
"offline": 182,
|
||
"agent": 212
|
||
},
|
||
{
|
||
"month": "三月",
|
||
"online": 101,
|
||
"offline": 191,
|
||
"agent": 201
|
||
},
|
||
{
|
||
"month": "四月",
|
||
"online": 134,
|
||
"offline": 234,
|
||
"agent": 154
|
||
},
|
||
{
|
||
"month": "五月",
|
||
"online": 90,
|
||
"offline": 290,
|
||
"agent": 190
|
||
},
|
||
{
|
||
"month": "六月",
|
||
"online": 230,
|
||
"offline": 330,
|
||
"agent": 330
|
||
}
|
||
]
|
||
},
|
||
"grid": {
|
||
"top": 86,
|
||
"right": 24,
|
||
"bottom": 32,
|
||
"left": 48,
|
||
"containLabel": true
|
||
},
|
||
"xAxis": {
|
||
"type": "category"
|
||
},
|
||
"yAxis": {
|
||
"type": "value"
|
||
},
|
||
"series": [
|
||
{
|
||
"name": "线上",
|
||
"type": "bar",
|
||
"stack": "total",
|
||
"barWidth": "45%",
|
||
"encode": {
|
||
"x": "month",
|
||
"y": "online"
|
||
},
|
||
"itemStyle": {}
|
||
},
|
||
{
|
||
"name": "门店",
|
||
"type": "bar",
|
||
"stack": "total",
|
||
"barWidth": "45%",
|
||
"encode": {
|
||
"x": "month",
|
||
"y": "offline"
|
||
},
|
||
"itemStyle": {}
|
||
},
|
||
{
|
||
"name": "代理",
|
||
"type": "bar",
|
||
"stack": "total",
|
||
"barWidth": "45%",
|
||
"encode": {
|
||
"x": "month",
|
||
"y": "agent"
|
||
},
|
||
"itemStyle": {
|
||
"borderRadius": [
|
||
4,
|
||
4,
|
||
0,
|
||
0
|
||
]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
},
|
||
"style": null,
|
||
"events": []
|
||
}
|
||
}
|