# Barchart 柱状图
请扫码查看示例
# 介绍
柱状图组件，支持一个x轴显示至多2个y轴数据
# 引入
APP内置组件，可直接使用cross-view标签。
# 代码演示
# 基本用法
通过设置 crossprops 和 type 属性,展示图表。
# 1、基础柱状图
<cross-view id="cross-barchart_1" type="midea-barchart-view" crossprops="{{chartData1}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
chartData1: JSON.stringify({
"x": {
"value": [1, 2, 3, 4, 5, 6, 7],
"label": ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
"y": [
{
"maxValue": [2, 3, 2, 3, 2, 3, 2],
"value": [1, 1, 1, 1, 1, 1, 1],
"color": "#267AFF", //柱子颜色
"highLightColor": "#267AFF",
"maxColor": "#267AFF", //柱子后面颜色ARGB格式
"maxHighLightColor": "#267AFF", //高亮颜色
"background": "#ffffff",
"highLightEnable": true, //点击高亮是否可用
}
],
"barSelectIndex": 1, //选中Bar的index(从0开始)，默认没有选中态
"xAxisColor": "#F2F2F2", //x轴线的颜色，如果不设置，则默认是白色线
"xAxisLabelColor": "#8A8A8F", //x label的字体颜色，如果不设置，则默认是白色线
"yAxisColor": "#FFFFFF", //y轴线的颜色，如果不设置，则默认是白色线
"yAxisLabelColor": "#C7C7CC", // label的字体颜色，如果不设置，则默认是白色线
"background": "#FFFFFF", //不传，则默认使用透明背景
"borderRadius": "5",
"bottomBorderRadius": "5", //底部的圆角值
"barSpacing" : "30", //设置柱状图最小间距。间距默认为控件宽度/（柱状个数 * 2 + 1），如果默认间距小于最小间距，则使用最小间距。
"barWidth": "10",
"yAxisGridLine": true, //是否显示Y轴上的水平线
"xAxisGridLine": false, //是否显示X轴上的水平线
"axisGridColor": "#F2F2F2", //X/Y轴上的水平/竖直方向线颜色
"xAxisLabelHighLightColor": "#000000", //x轴刻度选择后颜
"xAxisLabelHighLightThicke": true, //x轴刻度选择后字体是否加
"yGraduationLabel": "L", //y轴的刻度单位
"yAxisLabelCount": 5, //安卓属性，强制显示 y轴的刻度数
"barTouchTop": true,
"legend": {
"position": "TOP_LEFT", //"TOP_LEFT"/"TOP_RIGHT"
"orientation": "HORIZONTAL", //"HORIZONTAL"/"BOTTOM_RIGHT"
"show": false //控制每组数据标识的显示或隐藏
}
})
},
/**
* 原生回调方法
*/
onCallMethod({ method, params }) {
if (method == 'barClicked') {
let str = JSON.stringify(params)
prompt.showToast({
duration: 3000,
message: str,
})
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# 2、底部控制条
通过设置signPost，绘制底部控制条的样式
<cross-view id="cross-barchart_2" type="midea-barchart-view" crossprops="{{chartData2}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
chartData2: JSON.stringify({
x: {
value: [1, 2, 3, 4, 5, 6, 7],
label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
y: [
{
maxValue: [5, 4, 10, 9, 1, 5, 10],
value: [3, 2, 8, 5, 0, 3, 7],
title: '冷藏室',
background: '#FFFFFF',
color: '#6BA4FF', //柱子颜色
highLightColor: '#267AFF', //高亮颜色
maxColor: '#D4E4FF', //柱子后面颜色ARGB格式
maxHighLightColor: '#92BCFF', //柱子后面高亮颜色
highLightEnable: true, //点击高亮是否可用
barValueTextColor: '#2F4F4F', //柱子上文字颜色
drawGridLine: false, //是否显示格子线
isSelectedShake: true //标杆滑动到标点，是否提供震动反馈
}
],
xAxisColor: '#E5E5E8', //x轴线的颜色，如果不设置，则默认是白色线
xAxisLabelColor: '#8A8A8F', //x label的字体颜色，如果不设置，则默认是白色线
yAxisColor: 'transparent', //y轴线的颜色，如果不设置，则默认是白色线
yAxisLabelColor: '#C7C7CC', // label的字体颜色，如果不设置，则默认是白色线
background: '#ffffff', //不传，则默认使用透明背景
borderRadius: '5', //柱子顶部的圆角，默认为0px
bottomBorderRadius: '5', //底部的圆角值
// "barSpacing" : "5", //设置柱状图最小间距。间距默认为控件宽度/（柱状个数 * 2 + 1），如果默认间距小于最小间距，则使用最小间距。
barWidth: '10', //设置柱状的宽度
barTouchTop: true, // y轴刻度覆盖maxvalue最大值
yAxisGridLine: true, //是否显示Y轴上的水平线
xAxisGridLine: false, //是否显示X轴上的水平线
axisGridColor: '#F2F2F2', //X/Y轴上的水平/竖直方向线颜色
xAxisLabelHighLightThicke: true, //x轴刻度选择后字体是否加粗
xAxisLabelHighLightColor: '#000000', //x轴刻度选择后颜色
yGraduationLabel: 'L', //y轴的刻度单位
barSelectIndex: 1, //选中Bar的index(从0开始)，默认没有选中态
yAxisLabelEnable: true, //默认为true,设置 false后y轴label 不占据任何空间
yAxisLabelCount: 5, //安卓属性，强制显示 y轴的刻度数量
legend: {
position: 'TOP_LEFT', //"TOP_LEFT"/"TOP_RIGHT"
orientation: 'HORIZONTAL', //"HORIZONTAL"/"BOTTOM_RIGHT"
show: true //控制每组数据标识的显示或隐藏
},
unit: {
x: "日期",
xTextSize: 0, //字体大小，设置为0 ，不显示字体空间
xPaddingTop: 20, //字体上预留边距
xPaddingBottom: 0, //字体下预留边距
y: "次数",
yTextSize: 0, //字体大小，设置为0 ，不显示字体空间
yPaddingTop: 6, //字体上预留边距
yPaddingBottom: 0 //字体下预留边距
},
signPost: {
show: true, //默认是 false 是否显示底部控制条
lineHeight: 1, //线条的高度
lineColor: '#E5E5E8', //标签线的颜色 如果不设置，则默认是黑色线
linePointRadius: 3, //标签线上圆点的半径, 默认10
lineMarginTop: '5', //线条距离X轴的距离
lineMarginBottom: '0',
cursorColor: '#267AFF', //标签（三角形）的颜色 如果不设置，则默认是黑色线
cursorMarginTop: '5', //标签（三角形）距离线条的距离
cursorHigh: '20', //标签（三角形）本身高度
cursorMarginBottom: '0',
showType: 'all', //端点的显示样式，支持 all,ends,none 三种模式
isSelectedDisappear: true, //是否标签 滑动到的端点消失不见
isSelectedShake: true //选择后是否支持震动，默认不支持，因为震动体验问题，该功能仅ios支持
}
})
},
/**
* 原生回调方法
*/
onCallMethod({ method, params }) {
if (method == 'barClicked') {
let str = JSON.stringify(params)
prompt.showToast({
duration: 3000,
message: str,
})
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# 3、标注文案
通过设置y轴的label，绘制图形上的文案标记
<cross-view id="cross-barchart_3" type="midea-barchart-view" crossprops="{{chartData3}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
chartData3: JSON.stringify({
x: {
value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
label: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
},
y: [
{
maxValue: [4, 3, 3, 4, 4, 4, 4, 3, 3, 3, 4, 4],
value: [3, 1, 2, 2, 3, 1, 1, 1, 1, 2, 1, 2],
label: ["6L", "1L", "4L", "2.5L", "4L", "3L", "3L", "2L", "2L", "8L", "3L", "6L"],
color: '#6BA4FF', //柱子颜色
highLightColor: '#267AFF', //高亮颜色
maxColor: '#D4E4FF', //柱子后面颜色ARGB格式
maxHighLightColor: '#92BCFF', //柱子后面高亮颜色
background: '#ffffff',
highLightEnable: true //点击高亮是否可用
}
],
xAxisColor: '#e5e5e8', //x轴线的颜色，如果不设置，则默认是白色线
xAxisLabelColor: '#8a8a8f', //x label的字体颜色，如果不设置，则默认是白色线
yAxisColor: 'transparent', //y轴线的颜色，如果不设置，则默认是白色线
yAxisLabelColor: '#C7C7CC', // label的字体颜色，如果不设置，则默认是白色线
xAxisLabelHighLightThicke: true, //x轴刻度选择后字体是否加粗
xAxisLabelHighLightColor: '#000000', //x轴刻度选择后颜色
background: "#ffffff", //不传，则默认使用透明背景
borderRadius: '5', //柱子顶部的圆角，默认为0px
bottomBorderRadius: '5', //底部的圆角值
barWidth: '10', //设置柱状的宽度
barTouchTop: true, // y轴刻度覆盖maxvalue最大值
description: '图标描叙',
yAxisGridLine: true, //是否显示Y轴上的水平线
xAxisGridLine: false, //是否显示X轴上的水平线
axisGridColor: '#F2F2F2', //X/Y轴上的水平/竖直方向线颜色
barSelectIndex: 1, //选中Bar的index(从0开始)，默认没有选中态
barSelectIndex: '2', //选中Bar的index(从0开始)，默认没有选中态
yAxisLabelEnable: true, //默认为true,设置 false后y轴label 不占据任何空间
yAxisLabelCount: 5, //安卓属性，强制显示 y轴的刻度数量
legend: {
show: false //控制每组数据标识的显示或隐藏
}
})
},
/**
* 原生回调方法
*/
onCallMethod({ method, params }) {
if (method == 'barClicked') {
let str = JSON.stringify(params)
prompt.showToast({
duration: 3000,
message: str,
})
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# 4、多数据时左右滚动
通过设置barSpacing和barWidth实现
<cross-view id="cross-barchart_4" type="midea-barchart-view" crossprops="{{chartData4}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
chartData4: JSON.stringify({
x: {
value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
label: ['', '', '', '', '', '', '', '', '', '', '', '12', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '30']
},
y: [
{
maxValue: [
4,
5,
3,
4,
3,
5,
4,
2,
2,
4,
3,
5,
4,
5,
5,
3,
3,
4,
3,
4,
4,
5,
3,
3,
3,
3,
4,
5,
4,
4
],
value: [
3,
2,
1.5,
2.5,
0.3,
3.8,
2,
0.2,
1,
1,
1,
3,
1,
0.5,
3.2,
2,
2,
0.5,
1,
1,
3,
2,
2,
0.5,
0.8,
1.1,
1,
1,
1,
1
],
color: '#6BA4FF', //柱子颜色
highLightColor: '#267AFF', //高亮颜色
maxColor: '#D4E4FF', //柱子后面颜色ARGB格式
maxHighLightColor: '#92BCFF', //柱子后面高亮颜色
background: '#ffffff',
highLightEnable: true, //点击高亮是否可用
}
],
barSelectIndex: 1, //选中Bar的index(从0开始)，默认没有选中态
xAxisColor: '#e5e5e8', //x轴线的颜色，如果不设置，则默认是白色线
xAxisLabelColor: '#8a8a8f', //x label的字体颜色，如果不设置，则默认是白色线
yAxisColor: 'transparent', //y轴线的颜色，如果不设置，则默认是白色线
yAxisLabelColor: '#C7C7CC', // label的字体颜色，如果不设置，则默认是白色线
xAxisLabelHighLightThicke: true, //x轴刻度选择后字体是否加粗
xAxisLabelHighLightColor: '#000000', //x轴刻度选择后颜色
background: "#ffffff", //不传，则默认使用透明背景
borderRadius: '3', //柱子顶部的圆角，默认为0px
bottomBorderRadius: '3', //底部的圆角值
barSpacing : 30, //设置柱状图最小间距。间距默认为控件宽度/（柱状个数 * 2 + 1），如果默认间距小于最小间距，则使用最小间距。
barWidth: 10, //设置柱状的宽度
barTouchTop: true, // y轴刻度覆盖maxvalue最大值
description: '图标描叙',
legend: {
show: false //控制每组数据标识的显示或隐藏
}
})
},
/**
* 原生回调方法
*/
onCallMethod({ method, params }) {
if (method == 'barClicked') {
let str = JSON.stringify(params)
prompt.showToast({
duration: 3000,
message: str,
})
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
# Api
# Prop
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
type | 原生组件类型 | String | midea-barchart-view | 是 |
crossprops | 参数 | String | {}附表1 | 是 |
# crossprops（表1）
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
data | 包含图标数据的JSON对象 | Object | 表2 | 是 |
# data（表2）
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
x | x轴数据 | Object | {}注1 | 是 |
y | y轴数据和配置信息 | Array | []注1 | 是 |
axisGridColor | X/Y轴上的水平/竖直方向线颜色 | String | - | 否 |
xAxisColor | x轴线的颜色 | String | #FFF | 否 |
xAxisLabelColor | x轴label的字体颜色 | String | #000 | 否 |
yAxisColor | y轴线的颜色 | String | #FFF | 否 |
xAxisGridLine | 是否显示X轴上的水平线 | Boolean | true | 否 |
yAxisGridLine | 是否显示Y轴上的水平线 | Boolean | true | 否 |
xAxisLabelHighLightColor | x轴刻度选择后颜色 | String | - | 否 |
xAxisLabelHighLightThicke | x轴刻度选择后字体是否加粗 | Boolean | - | 否 |
yGraduationLabel | y轴的刻度单位文案 如M,L,CM等 | String | - | 是 |
yAxisLabelEnable | 是否显示y轴label | Boolean | true ｜否 | |
yAxisLabelCount | y轴的刻度数量，强制显示 仅Android支持 | String | - | 是 |
yAxisLabelColor | y轴label的字体颜色 | String | #000 | 否 |
background | 背景色 | String | transparent | 否 |
borderRadius | 圆角 | Number | - | 否 |
barSpacing | 柱状图最小间距。间距默认为控件宽度/（柱状个数 * 2 + 1），如果默认间距小于最小间距，则使用最小间距。 | Number | - | 否 |
barWidth | 柱状的宽度 | Number | - | 否 |
description | 图表描述 | String | 否 | |
legend | 图例配置 | Object | {}注1 | 否 |
unit | 坐标轴字体大小和预留边距配置 | Object | {}注1 | 否 |
bottomBorderRadius | 底部的圆角值， 注意：borderRadius 和bottomBorderRadius 如果底部和顶部圆角同时存在，大小必须一致 | Number | - | 否 |
signPost | 底部控制条 | Object | {}注1 | 否 |
barSelectIndex | 选中Bar的index(从0开始) | Number | - | 否 |
valueTextColor | 值文本颜色 | String | true ｜否 | |
valueTextSize | 值文本字体大小 | Number | true ｜否 |
# Events
| 名称 | 说明 | 回调参数 |
|---|---|---|
onCallMethod | 原生回调成功触发 | {method, params}附表3 |
# method回调方法（表3）
| 方法名称 | 说明 | 回调参数 |
|---|---|---|
barClicked | 点击图表元素后触发 | - |
data数据例子（注1）
{
"x": {
"value": [1, 2, 3, 4, 5, 6, 7],
"label": ["11.6", "11.7", "11.8", "11.9", "11.10", "11.11", "11.12"]
},
"y": [
{
"maxValue": [4, 9, 5, 4, 7, 5, 8],
"value": [1, 6, 2, 1, 2, 3, 7],
"label": ["1次", "6次", "2次", "1次", "2次", "3次", "7次"],
"title": "冷藏室",
"color": "#605BD2FF", //柱子颜色
"maxColor": "#305BD2FF", //柱子后面颜色ARGB格式
"maxHighLightColor":"#805BD2FF", //高亮颜色
"background": "#FFFFFF",
"highLightColor":"#FF5BD2FF", //高亮颜色
"highLightEnable":true, //点击高亮是否可用
"barValueTextColor":"#2F4F4F", //柱子上文字颜色
"drawGridLine":true, //是否显示格子线
"isSelectedShake":true, //标杆滑动到标点，是否提供震动反馈
}
],
"xAxisColor":"#000000", //x轴线的颜色，如果不设置，则默认是白色线
"xAxisLabelColor":"#000000", //x label的字体颜色，如果不设置，则默认是白色线
"yAxisColor":"#000000", //y轴线的颜色，如果不设置，则默认是白色线
"yAxisLabelColor":"#000000", // label的字体颜色，如果不设置，则默认是白色线
"background": "#ffffff", //不传，则默认使用透明背景
"borderRadius": "0",
"barSpacing" : "20", //设置柱状图最小间距。间距默认为控件宽度/（柱状个数 * 2 + 1），如果默认间距小于最小间距，距。
"barWidth":"45", //设置柱状的宽度
"description": "",
"legend": {
"position": "TOP_LEFT", //"TOP_LEFT"/"TOP_RIGHT"
"orientation": "HORIZONTAL", //"HORIZONTAL"/"BOTTOM_RIGHT"
"show": false //控制每组数据标识的显示或隐藏
},
"unit": {
"x": "日期",
"xTextSize":14,//字体大小，设置为0，不显示字体空间
"xPaddingTop":0, //字体上预留边距
"xPaddingBottom":0, //字体下预留边距
"y": "次数",
"yTextSize":14,//字体大小，设置为0 ，不显示字体空间
"yPaddingTop":0, //字体上预留边距
"yPaddingBottom":0 //字体下预留边距
},
"bottomBorderRadius": "10", //底部的圆角值
"signPost":{
"show": true, //默认是 false 是否显示底部控制条
"lineHeight":1, //线条的高度
"lineColor":"#5BD2FF", //标签线的颜色 如果不设置，则默认是黑色线
"linePointRadius":3, //标签线上圆点的半径, 默认10
"lineMarginTop":"5", //线条距离X轴的距离
"lineMarginBottom":"0",
"cursorColor":"#5BD2FF", //标签（三角形）的颜色 如果不设置，则默认是黑色线
"cursorMarginTop":"5", //标签（三角形）距离线条的距离
"cursorHigh":"10", //标签（三角形）本身高度
"cursorMarginBottom":"0",
"showType":"all", //端点的显示样式，支持 all,ends,none 三种模式
"isSelectedDisappear":true, //是否标签 滑动到的端点消失不见
"isSelectedShake":true, //选择后是否支持震动，默认不支持，因为震动体验问题，该功能仅ios支持
},
"yAxisGridLine":true, //是否显示Y轴上的水平线
"xAxisGridLine":true, //是否显示X轴上的水平线
"axisGridColor":"#335BD2FF", //X/Y轴上的水平/竖直方向线颜色
"xAxisLabelHighLightColor" : "247687", //x轴刻度选择后颜色
"xAxisLabelHighLightThicke" : true, //x轴刻度选择后字体是否加粗
"yGraduationLabel" : "L", //y轴的刻度单位
"barSelectIndex" : "2", //选中Bar的index(从0开始)，默认没有选中态
"yAxisLabelEnable": false, //默认为true,设置 false后y轴label 不占据任何空间
"yAxisLabelCount":5, //安卓属性，强制显示 y轴的刻度数量
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72