工作卡图表使用说明
更新时间：2024-07-29
工作卡-图表使用说明
用户可以在工作卡搭建平台使用图表控件来将数据以图表的方式进行展示。图表渲染采用Echart渲染规则 https://echarts.apache.org/handbook/zh/get-started/
用户将图表组件拖拽到工作卡上之后可以通过设置动态变量的方式为工作卡填充数据
注意，图表组件支持的动态变量类型目前只能是嵌套数组，且循环元素的结构需要按照要求进行命名
用户可以通过mock数据来预览图表效果
如果使用复杂样式，请使用option进行样式扩展，如下：
{
"xAxis": {
"type": "category",
"data": [
"A",
"B",
"C"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [
120,
200,
150
],
"type": "line"
}
]
}展示效果如下：
更多复杂的图表样式见下列描述
1.柱状图
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
}
]
};
// 多系列的柱状图
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
},
{
type: 'bar',
data: [26, 24, 18, 22, 23, 20, 27]
}
]
};
// 柱状图样式设置
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
type: 'bar',
data: [
10,
22,
28,
{
value: 43,
// 设置单个柱子的样式
itemStyle: {
color: '#91cc75',
shadowColor: '#91cc75',
borderType: 'dashed',
opacity: 0.5
}
},
49
],
itemStyle: {
barBorderRadius: 5,
borderWidth: 1,
borderType: 'solid',
borderColor: '#73c0de',
shadowColor: '#5470c6',
shadowBlur: 3
}
}
]
};
// 堆叠柱状图
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 43, 49],
type: 'bar',
stack: 'x'
},
{
data: [5, 4, 3, 5, 10],
type: 'bar',
stack: 'x'
}
]
};
// 柱条添加背景色
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}
]
};| 功能 | 效果 |
|---|---|
| 基础柱状图 |  |
| 多系列的柱状图 |  |
| 柱状图样式设置 |  |
| 堆叠柱状图 |  |
| 柱条添加背景色 |  |
2.折线图
// 基础折线图
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150],
type: 'line'
}
]
};
// 笛卡尔坐标系中的折线图
option = {
xAxis: {},
yAxis: {},
series: [
{
data: [
[20, 120],
[50, 200],
[40, 50]
],
type: 'line'
}
]
};
// 折线图样式设置
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
lineStyle: {
normal: {
color: 'green',
width: 4,
type: 'dashed'
}
}
}
]
};
// 在数据点处显示数值
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
label: {
show: true,
position: 'bottom',
textStyle: {
fontSize: 20
}
}
}
]
}
// 空数据
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [0, 22, '-', 23, 19],
type: 'line'
}
]
};
// 堆叠折线图加背景
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 43, 49],
type: 'line',
stack: 'x',
areaStyle: {}
},
{
data: [5, 4, 3, 5, 10],
type: 'line',
stack: 'x',
areaStyle: {}
}
]
};
// 区域面积图
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
areaStyle: {}
},
{
data: [25, 14, 23, 35, 10],
type: 'line',
areaStyle: {
color: '#ff0',
opacity: 0.5
}
}
]
};
// 平滑曲线图
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
smooth: true
}
]
};
// 阶梯线图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Step Start',
type: 'line',
step: 'start',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Step Middle',
type: 'line',
step: 'middle',
data: [220, 282, 201, 234, 290, 430, 410]
},
{
name: 'Step End',
type: 'line',
step: 'end',
data: [450, 432, 401, 454, 590, 530, 510]
}
]
};| 功能 | 效果 |
|---|---|
| 基础折线图 |  |
| 笛卡尔坐标系中的折线图 |  |
| 折线图样式设置 |  |
| 在数据点处显示数值 |  |
| 空数据 |  |
| 堆叠折线图加背景 |  |
| 区域面积图 |  |
| 平滑曲线图 |  |
| 阶梯线图 |  |