# Linechart 折线图
请扫码查看示例
# 介绍
折线图组件，支持一个x轴显示多个y轴数据。前端自行定义图标样式：大小和位置
# 引入
APP内置组件，可直接使用cross-view标签。
# 代码演示
# 基本用法
通过设置 crossprops 和 type 属性,展示图表。
# 1、基础折线图
<cross-view id="cross-linechart_1" type="midea-linechart-view" crossprops="{{linechart1}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
linechart1: JSON.stringify({
x: {
value: [1, 2, 3, 4, 5, 6, 7],
label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
y: [
{
value: [20, 40, 30, 0, 55, 40, 0],
lineWidth: 2, //折线宽度
color: '#267AFF', //折线颜色
starcolor: 'transparent', //区域背景渐变开始颜色（从下自上）iOS默认填充蓝色
endcolor: 'transparent', //区域背景渐变结束颜色（从下自上）iOS默认填充蓝色
smooth: 1, //0直线，1平滑
lineSidesPointAble: true, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '#267AFF', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
isDrawCircles: true, //是否绘制圆圈
isDrawCircleHole: true, //是否绘制圆内
circleRadius: 5, //圆圈半径
circleHoleRadius: 3, //圆内半径
circleHoleColor: '#267AFF', //圆圈颜色
circleColor: '#ffffff', //圆内颜色
//点中高亮的设置
isDrawHighLightCircles: true, //是否启动 点击高亮
highLightCircleRadius: 7, // 高亮的圆圈半径设置
highLightCircleHoleRadius: 5, // 高亮的圆内半径设置
highLightCircleOutsideWidth: 1, // 高亮的圆外宽度设置
highLightCircleColor: '#FFFFFF',// 高亮的圆圈颜色
highLightCircleHoleColor: '#267AFF', // 高亮的圆内颜色
highLightCircleOutsideColor: '#267AFF',// 高亮的圆外颜色设置
}
],
xAxisColor: '#8A8A8F', //x轴线的颜色，如果不设置，则默认是黑色线
yAxisColor: '#FFFFFF', //y轴线的颜色，如果不设置，则默认是黑色线
xAxisLabelColor: '#8A8A8F', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
yAxisLabelColor: '#C7C7CC', // label的字体颜色，如果不设置，则默认是黑色字体颜色
xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridColor: '#F2F2F2', //y轴上分割线颜色
xAxisLabelTextSize: 12, //x轴文字大小
yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
isUnEquelDistance: true, //不等距属性，默认打开（iOS专用）false关闭
background: '#ffffff', //不传，则默认使用透明背景
granularity: 1, //间距本身是自适应的，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
xAxisYOffset: 20, //x轴文字和x轴的距离
barSelectIndex: 1, //当前选中
legendHide: true, //是否需要隐藏图例，默认不隐藏
unit: {
x: '',
y: '毫升'
}
})
},
/**
* 原生回调方法
*/
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
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
# 2、多条折线图
通过设置y轴多个数组元素，绘制多条折线图；y轴的title绘制图例文案；legend绘制图例
<cross-view id="cross-linechart_2" type="midea-linechart-view" crossprops="{{linechart2}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
linechart2: JSON.stringify({
x: {
value: [1, 2, 3, 4, 5, 6, 7],
label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
y: [
{
value: [25, 35, 30, 35, 40, 20, 28],
title: '温度',
color: '#FFAA10', //折线颜色
starcolor: '#FFFFFF', //区域背景渐变开始颜色（从下自上）
endcolor: '#FFEFD2', //区域背景渐变结束颜色（从下自上）
smooth: 1, //0直线，1平滑
lineWidth: 2, //折线宽度
lineSidesPointAble: false, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '#FFAA10', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
isDrawCircles: false, //是否绘制圆圈
isDrawCircleHole: false, //是否绘制圆内
circleRadius: 5, //圆圈半径
circleHoleRadius: 3, //圆内半径
circleHoleColor: '#FFAA10', //圆圈颜色
circleColor: '#ffffff', //圆内颜色
//点中高亮的设置
isDrawHighLightCircles: true, //是否启动 点击高亮
highLightCircleRadius: 7, // 高亮的圆圈半径设置
highLightCircleHoleRadius: 5, // 高亮的圆内半径设置
highLightCircleOutsideWidth: 1, // 高亮的圆外宽度设置
highLightCircleColor: '#FFFFFF',// 高亮的圆圈颜色
highLightCircleHoleColor: '#FFAA10', // 高亮的圆内颜色
highLightCircleOutsideColor: '#FFAA10',// 高亮的圆外颜色设置
},
{
value: [15, 25, 20, 28, 20, 46, 58],
title: '湿度',
color: '#267AFF', //折线颜色
starcolor: '#FFFFFF', //区域背景渐变开始颜色（从下自上）
endcolor: '#D4E5FF', //区域背景渐变结束颜色（从下自上）
smooth: 1, //0直线，1平滑
lineWidth: 2, //折线宽度
lineSidesPointAble: false, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '#267AFF', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
isDrawCircles: false, //是否绘制圆圈
isDrawCircleHole: false, //是否绘制圆内
circleRadius: 5, //圆圈半径
circleHoleRadius: 3, //圆内半径
circleHoleColor: '#267AFF', //圆圈颜色
circleColor: '#ffffff', //圆内颜色
//点中高亮的设置
isDrawHighLightCircles: true, //是否启动 点击高亮
highLightCircleRadius: 7, // 高亮的圆圈半径设置
highLightCircleHoleRadius: 5, // 高亮的圆内半径设置
highLightCircleOutsideWidth: 1, // 高亮的圆外宽度设置
highLightCircleColor: '#FFFFFF',// 高亮的圆圈颜色
highLightCircleHoleColor: '#267AFF', // 高亮的圆内颜色
highLightCircleOutsideColor: '#267AFF',// 高亮的圆外颜色设置
}
],
xAxisColor: '#8A8A8F', //x轴线的颜色，如果不设置，则默认是黑色线
yAxisColor: '#FFFFFF', //y轴线的颜色，如果不设置，则默认是黑色线
xAxisLabelColor: '#8A8A8F', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
yAxisLabelColor: '#C7C7CC', // label的字体颜色，如果不设置，则默认是黑色字体颜色
xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridColor: '#F2F2F2', //y轴上分割线颜色
xAxisLabelTextSize: 12, //x轴文字大小
xAxisGridAlpha: 0.5, //x轴上分割线透明度
yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
background: '#ffffff', //不传，则默认使用透明背景
granularity: 1, //间距本身是自适应的，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
barSelectIndex: 1, //当前选中
xAxisYOffset: 15, //x轴文字和x轴的距离
legendHide: false, //是否需要隐藏legend，默认不隐藏
legend: {
position: 'TOP_LEFT', //TOP_LEFT/TOP_RIGHT
orientation: 'HORIZONTAL' //HORIZONTAL/BOTTOM_RIGHT
}
})
},
/**
* 原生回调方法
*/
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
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
# 3、底部控制条
通过设置signPost，绘制底部控制条的样式
<cross-view id="cross-linechart_3" type="midea-linechart-view" crossprops="{{linechart3}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
linechart3: 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: [
{
value: [25, 35, 30, 35, 40, 30, 38, 25, 28, 38, 15, 20],
lineWidth: 2, //折线宽度
color: '#FFAA10', //折线颜色
starcolor: '#ffffff', //区域背景渐变开始颜色（从下自上）
endcolor: '#33FFAA10', //区域背景渐变结束颜色（从下自上）
smooth: 1, //0直线，1平滑
lineSidesPointAble: true, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '#FFAA10', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
isDrawCircles: false, //是否绘制圆圈
isDrawCircleHole: false, //是否绘制圆内
circleRadius: 5, //圆圈半径
circleHoleRadius: 3, //圆内半径
circleHoleColor: '#FFAA10', //圆圈颜色
circleColor: '#ffffff', //圆内颜色 '
//点中高亮的设置
isDrawHighLightCircles: true, //是否启动 点击高亮
highLightCircleRadius: 7, // 高亮的圆圈半径设置
highLightCircleHoleRadius: 5, // 高亮的圆内半径设置
highLightCircleOutsideWidth: 1, // 高亮的圆外宽度设置
highLightCircleColor: '#FFFFFF',// 高亮的圆圈颜色
highLightCircleHoleColor: '#FFAA10', // 高亮的圆内颜色
highLightCircleOutsideColor: '#FFAA10',// 高亮的圆外颜色设置
//竖线
drawVerticalHighlightIndicatorEnabled: true,//默认false 是否绘制高亮时的竖线，默认不显示
highlightColor: '#8A8A8F',//竖线的颜色
highlightLineWidth: 1,//竖线的宽度 默认0.5
highlightLineDashLengths: [2, 3], //第一位代表实线宽度，第二位代表虚线的宽度
},
{
value: [15, 25, 20, 25, 20, 16, 28, 15, 18, 24, 5, 12],
lineWidth: 2, //折线宽度
color: '#267AFF', //折线颜色
starcolor: '#ffffff', //区域背景渐变开始颜色（从下自上）
endcolor: '#33267AFF', //区域背景渐变结束颜色（从下自上）
smooth: 1, //0直线，1平滑
lineSidesPointAble: true, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '#267AFF', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
isDrawCircles: false, //是否绘制圆圈
isDrawCircleHole: false, //是否绘制圆内
circleRadius: 5, //圆圈半径
circleHoleRadius: 3, //圆内半径
circleHoleColor: '#267AFF', //圆圈颜色
circleColor: '#ffffff', //圆内颜色
//点中高亮的设置
isDrawHighLightCircles: true, //是否启动 点击高亮
highLightCircleRadius: 7, // 高亮的圆圈半径设置
highLightCircleHoleRadius: 5, // 高亮的圆内半径设置
highLightCircleOutsideWidth: 1, // 高亮的圆外宽度设置
highLightCircleColor: '#FFFFFF',// 高亮的圆圈颜色
highLightCircleHoleColor: '#267AFF', // 高亮的圆内颜色
highLightCircleOutsideColor: '#267AFF',// 高亮的圆外颜色设置
//竖线
drawVerticalHighlightIndicatorEnabled: true,//默认false 是否绘制高亮时的竖线，默认不显示
highlightColor: '#8A8A8F',//竖线的颜色
highlightLineWidth: 1,//竖线的宽度 默认0.5
highlightLineDashLengths: [2, 3], //第一位代表实线宽度，第二位代表虚线的宽度
}
],
xAxisColor: '#8A8A8F', //x轴线的颜色，如果不设置，则默认是黑色线
yAxisColor: '#FFFFFF', //y轴线的颜色，如果不设置，则默认是黑色线
xAxisLabelColor: '#8A8A8F', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
yAxisLabelColor: '#C7C7CC', // label的字体颜色，如果不设置，则默认是黑色字体颜色
xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridColor: '#F2F2F2', //y轴上分割线颜色
xAxisLabelTextSize: 12, //x轴文字大小
yAxisLabelTextSize: 10, //y轴文字大小
xAxisGridAlpha: 0.5, //x轴上分割线透明度
yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
isUnEquelDistance: true, //不等距属性，默认打开（iOS专用）false关闭
background: '#ffffff', //不传，则默认使用透明背景
granularity: 1, //间距本身是自适应的，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
description: '日期',
barSelectIndex: 1, //当前选中
xAxisYOffset: 15, //x轴文字和x轴的距离
legend: {
position: 'TOP_LEFT', //TOP_LEFT/TOP_RIGHT
orientation: 'HORIZONTAL' //HORIZONTAL/BOTTOM_RIGHT
},
legendHide: true, //是否需要隐藏legend，默认不隐藏
unit: {
x: '天',
y: 'ml'
},
signPost: {
lineHeight: 1, //线条的高度
lineColor: '#E5E5E8', //标签线的颜色 如果不设置，则默认是黑色线
linePointRadius: 3, //标签线上圆点的半径, 默认10
lineMarginTop: 15, //线条距离X轴的距离
lineMarginBottom: '0',
cursorColor: '#267AFF', //标签（三角形）的颜色 如果不设置，则默认是黑色线
cursorMarginTop: '5', //标签（三角形）距离线条的距离
cursorHigh: '12', //标签（三角形）本身高度
cursorMarginBottom: '0',
show: true, //默认是 false 是否显示底部界面
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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
# 4、标注辅助线
通过设置y轴数据，绘制辅助线
<cross-view id="cross-linechart_4" type="midea-linechart-view" crossprops="{{linechart4}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
linechart4: JSON.stringify({
x: {
value: [1, 2, 3, 4, 5, 6, 7],
label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
y: [
{
value: [20, 40, 30, 0, 55, 40, 0],
lineWidth: 2, //折线宽度
color: '#267AFF', //折线颜色
starcolor: 'transparent', //区域背景渐变开始颜色（从下自上）
endcolor: 'transparent', //区域背景渐变结束颜色（从下自上）
smooth: 0, //0直线，1平滑
lineSidesPointAble: true, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '#267AFF', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
//竖线
drawVerticalHighlightIndicatorEnabled: true,//默认false 是否绘制高亮时的竖线，默认不显示
highlightColor: '#8A8A8F',//竖线的颜色
highlightLineWidth: 1,//竖线的宽度 默认0.5
highlightLineDashLengths: [2, 3], //第一位代表实线宽度，第二位代表虚线的宽度
},
{
value: [40, 40, 40, 40, 40, 40, 40],
lineWidth: 2, //折线宽度
color: '#FFAA10', //折线颜色
smooth: 1, //0直线，1平滑
lineSidesPointAble: false, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: true //曲线的类型可调: 是否使用虚线，默认false
}
],
xAxisColor: '#8A8A8F', //x轴线的颜色，如果不设置，则默认是黑色线
yAxisColor: '#FFFFFF', //y轴线的颜色，如果不设置，则默认是黑色线
xAxisLabelColor: '#8A8A8F', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
yAxisLabelColor: '#C7C7CC', // label的字体颜色，如果不设置，则默认是黑色字体颜色
xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridColor: '#F2F2F2', //y轴上分割线颜色
xAxisLabelTextSize: 12, //x轴文字大小
xAxisGridAlpha: 1, //x轴上分割线透明度
yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
background: '#ffffff', //不传，则默认使用透明背景
granularity: 1, //间距本身是自适应的，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
barSelectIndex: 1, //当前选中
xAxisYOffset: 15, //x轴文字和x轴的距离
legendHide: true //是否需要隐藏legend，默认不隐藏
})
},
/**
* 原生回调方法
*/
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
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
# 5、标注文案
通过设置y轴的label，绘制图形上的文案标记
<cross-view id="cross-linechart_5" type="midea-linechart-view" crossprops="{{linechart5}}" onCallMethod="onCallMethod"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
linechart5: JSON.stringify({
x: {
value: [1, 2, 3, 4, 5, 6, 7],
label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
y: [
{
value: [1, 6, 2, 1, 2, 3, 7],
label: [1, 6, 2, 1, 2, 3, 7],
title: '冷藏室',
lineWidth: 2, //折线宽度
color: '#2AD2FC', //折线颜色
starcolor: '#ffffff', //区域背景渐变开始颜色（从下自上）
endcolor: '#2AD2FC', //区域背景渐变结束颜色（从下自上）
smooth: 1, //0直线，1平滑
lineSidesPointAble: true, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 3, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '#2AD2FC', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: true, //曲线的类型可调: 是否使用虚线，默认false
labelSize: 9, //折线或者曲线上文字颜色
labelColor: '#8A8A8F' //折线或者曲线上文字大小
},
{
value: [10, 5, 3, 4, 1, 2, 6],
label: [10, 5, 3, 4, 1, 2, 6],
title: '冷冻室',
lineWidth: 2, //折线宽度
color: '#1B81FB', //折线颜色
starcolor: '#ffffff', //区域背景渐变开始颜色（从下自上）
endcolor: '#1B81FB', //区域背景渐变结束颜色（从下自上）
smooth: 1, //0直线，1平滑
lineSidesPointAble: true, //首尾可以设置是否有端点,默认false
lineSidesPointRadius: 3, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
lineSidesPointColor: '#267AFF', //端点颜色，lineSidesPointAble为ture有效
lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
labelSize: 9, //折线或者曲线上文字颜色
labelColor: '#8A8A8F' //折线或者曲线上文字大小
}
],
xAxisColor: '#8A8A8F', //x轴线的颜色，如果不设置，则默认是黑色线
xAxisLabelTextSize: 12, //x轴文字大小
xAxisLabelColor: '#8A8A8F', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
yAxisColor: '#ffffff', //y轴线的颜色，如果不设置，则默认是黑色线
yAxisLabelColor: '#C7C7CC', // label的字体颜色，如果不设置，则默认是黑色字体颜色
background: '#ffffff', //不传，则默认使用透明背景
xAxisGridColor: '#ffffff', //x轴上分割线颜色
xAxisGridAlpha: 0.5, //x轴上分割线透明度
yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制
yAxisGridColor: '#F2F2F2', //y轴上分割线颜色
granularity: 1.2, //间距本身是自适应的，可以使用该值进行调整间距的比例，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
xAxisYOffset: 15, //x轴文字和x轴的距离
legend: {
position: 'TOP_LEFT', //TOP_LEFT/TOP_RIGHT
orientation: 'HORIZONTAL' //HORIZONTAL/BOTTOM_RIGHT
},
legendHide: false //是否需要隐藏legend，默认不隐藏
})
},
/**
* 原生回调方法
*/
onCallMethod({ method, params }) {
if (method == 'barClicked') {
let str = JSON.stringify(params)
prompt.showToast({
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
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
# Api
# Prop
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
type | 原生组件类型 | String | midea-linechart-view | 是 |
crossprops | 参数 | String | {}附表1 | 是 |
# crossprops（表1）
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
data | 包含图标数据的JSON对象 | Object | 表2 | 是 |
# data（表2）
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
x | x轴图表数据 | Object | {}注1 | 是 |
y | y轴图表数据 | Array | []注1 | 是 |
xAxisColor | x轴线的颜色 | String | #000 | 否 |
xAxisLabelColor | x轴label的字体颜色 | String | #000 | 否 |
yAxisColor | y轴线的颜色 | String | #000 | 否 |
yAxisLabelColor | y轴label的字体颜色 | String | #000 | 否 |
xAxisGridColor | x轴上分割线颜色 | String | - | 否 |
xAxisGridAlpha | x轴上分割线透明度 | String | - | 否 |
yAxisLabelShow | 是否只显示y轴最大最小值 | Boolean | true | 否 |
description | x轴说明文案 | String | - | 否 |
granularity | 间距。本身是自适应的，可以使用该值调整间距的比例 | Number | - | 否 |
barSelectIndex | 选中Bar的index(从0开始)，默认没有选中态 | Number | - | 否 |
legend | 图例。默认位置在左上角，可通过position``orientation控制位置 | Object | {}注1 | 否 |
legendHide | 是否隐藏图例 | Boolean | false | 否 |
unit | 单位文案 | Object | {}注1 | 否 |
valueTextColor | 值文本颜色 | String | true | 否 |
valueTextSize | 值文本字体大小 | Number | true | 否 |
background | 背景色 | String | transparent | 否 |
signPost | 底部控制条 | Object | {}注1 | 否 |
# 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": [
{
"value": [1, 6, 2, 1, 2, 3, 7],
"title": "冷藏室", // legendHide设置为false才生效
"color": "#2AD2FC", //折线颜色
"starcolor": "#ffffff", //区域背景渐变开始颜色（从下自上）
"endcolor": "#2AD2FC", //区域背景渐变结束颜色（从下自上）
"smooth":1, //0直线，1平滑
"lineSidesPointAble" : true, //首尾可以设置是否有端点,默认false
"lineSidesPointRadius" : 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
"lineSidesPointColor" : "#000000", //端点颜色，lineSidesPointAble为ture有效
"lineDashAble" : true, //曲线的类型可调: 是否使用虚线，默认false
},
{
"value": [10, 5, 3, 4, 1, 2, 6],
"title": "冷冻室", // legendHide设置为false才生效
"color": "#1B81FB", //折线颜色
"starcolor": "#ffffff", //区域背景渐变开始颜色（从下自上）
"endcolor": "#1B81FB", //区域背景渐变结束颜色（从下自上）
"smooth":1, //0直线，1平滑
}
],
"xAxisColor":"#8A8A8F",
"xAxisLabelColor":"#8A8A8F",
"xAxisGridColor" : "#8A8A8F",
"xAxisGridAlpha": 0.5,
"yAxisLabelShow" : true,
"yAxisLabelColor":"#C7C7CC",
"yAxisColor":"#FFFFFF",
"granularity" : 1,
"legendHide" : false,
"legend": {
"position": "TOP_LEFT", //定位。可选值："TOP_LEFT"/"TOP_RIGHT"
"orientation": "HORIZONTAL" //排版方式。可选值："HORIZONTAL"/"BOTTOM_RIGHT"
},
"unit": {
"x": "日期",
"y": "次数"
},
"background": "#ffffff"
}
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
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