MiniX自绘渲染跨平台框架

# Linechart Dragging 可拖拽折线图

请扫码查看示例

# 引入

APP内置原生组件，可直接使用cross-view标签。 可拖拽折线图组件，支持一个x轴显示多个y轴数据

# 代码演示

# 基本用法

通过设置 crossprops 和 type 属性,展示环形进度条。

<!--mxl代码-->
<div class="wrapper">
  <cross-view id="cross-linechart_1" class="cross-view" type="midea-dragging-linechart-view"
    crossprops="{{chartData}}" onCallMethod="onCallMethod"></cross-view>
</div>
1
2
3
4
5
// js 代码
import prompt from '@system.prompt'
export default {
  data: {

    chartData: JSON.stringify({
      x: {
        value: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        label: ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h']
      },
      y: [
        {
          value: [26, 27, 27, 27.5, 26, 27, 26, 27, 22],

          color: '#00ccb8', //折线颜色
          starcolor: '#ffffff', //区域背景渐变开始颜色（从下自上）
          endcolor: '#00ccb8', //区域背景渐变结束颜色（从下自上）
          smooth: 1, //0直线，1平滑

          isDrawCircles: true, //是否绘制圆圈  （5.12）
          isDrawCircleHole: false, //是否绘制圆内  （5.12）
          circleRadius: 5, //圆圈半径  （5.12）
          circleHoleRadius: 3, //圆内半径  （5.12）
          circleHoleColor: '#0000ff', //圆圈颜色  （5.12）
          circleColor: '#0000ff', //圆内颜色  （5.12）

          //点中高亮的设置
          isDrawHighLightCircles: false, //是否启动 点击高亮 （5.12）
          highLightCircleRadius: 8, // 高亮的圆圈半径设置（5.12）
          highLightCircleHoleRadius: 6, // 高亮的圆内半径设置（5.12）
          highLightCircleOutsideWidth: 2, // 高亮的圆外宽度设置（5.12）
          highLightCircleColor: '#ffffff', // 高亮的圆圈颜色（5.12）
          highLightCircleHoleColor: '#ff0000', // 高亮的圆内颜色（5.12）
          highLightCircleOutsideColor: '#00ff00' // 高亮的圆外颜色设置（5.12）
        },
        {
          value: [23, 22, 22, 22, 23, 21, 23, 22, 16],

          color: '#00ccb8', //折线颜色
          starcolor: '#ffffff', //区域背景渐变开始颜色（从下自上）
          endcolor: '#00ccb8', //区域背景渐变结束颜色（从下自上）
          smooth: 1, //0直线，1平滑

          isDrawCircles: true, //是否绘制圆圈  （5.12）
          isDrawCircleHole: false, //是否绘制圆内  （5.12）
          circleRadius: 5, //圆圈半径  （5.12）
          circleHoleRadius: 3, //圆内半径  （5.12）
          circleHoleColor: '#0000ff', //圆圈颜色  （5.12）
          circleColor: '#0000ff', //圆内颜色  （5.12）

          //点中高亮的设置
          isDrawHighLightCircles: false, //是否启动 点击高亮 （5.12）
          highLightCircleRadius: 8, // 高亮的圆圈半径设置（5.12）
          highLightCircleHoleRadius: 6, // 高亮的圆内半径设置（5.12）
          highLightCircleOutsideWidth: 2, // 高亮的圆外宽度设置（5.12）
          highLightCircleColor: '#ffffff', // 高亮的圆圈颜色（5.12）
          highLightCircleHoleColor: '#ff0000', // 高亮的圆内颜色（5.12）
          highLightCircleOutsideColor: '#00ff00' // 高亮的圆外颜色设置（5.12）
        }
      ],
      xAxisYOffset: 10, //x轴与label的间距设置(6.0)
      draggingMiniUnit: '0.5', //
      lineIcon: '../assets/img/icon_drag@2x.png',
      lineHighLightIcon: '../assets/img/icon_drag@2x.png',
      xAxisColor: '#000000', //x轴线的颜色，如果不设置，则默认是黑色线
      xAxisLabelColor: '#000000', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
      yGraduationLabel: '℃', //y轴的刻度单位（5.12）
      yAxisColor: '#000000', //y轴线的颜色，如果不设置，则默认是黑色线
      yAxisLabelColor: '#AAAAAA', // label的字体颜色，如果不设置，则默认是黑色字体颜色
      yAxisLabelCount: 14, //强制限制y轴的刻度数量（5.12）
      //"yAxisLabelIgnoreCount":2,//忽略 y轴 标签的间隔数，例如 2,则每两个标签，就忽略不显示一个（5.12）
      yAxisMaximum: 30, // y轴的刻度最大值，不传则自适应生成（5.12）
      yAxisMinimum: 17, // y轴的刻度最小值，不传则自适应生成（6.0）

      yAxisLabelDecimal: '0', //y轴精确到几位小数，0 则不显示小数
      yRightAxisEnable: false, //是否打开右边的y轴，默认为false（5.12）
      yRightGraduationLabel: '升', //右边y轴的刻度单位（5.12）
      yRightAxisColor: '#000000', //右边 y轴线的颜色，如果不设置，则默认是黑色线
      yRightAxisLabelColor: '#AAAAAA', //右边 label的字体颜色，如果不设置，则默认是黑色字体颜色
      yRightAxisLabelCount: 6, //强制限制 右边 y轴的刻度数量（5.12）
      //"yRightAxisLabelIgnoreCount":2,//忽略 右边 y轴 标签的间隔数，例如 2,则每两个标签，就忽略不显示一个（5.12）
      yRightAxisMaximum: 2, //右边 y轴的刻度最大值，不传则自适应生成（5.12）
      yRightAxisLabelDecimal: '2', //右边 y轴精确到几位小数
      background: '#ffffff', //不传，则默认使用透明背景
      yAxisGridLine: true,
      xAxisGridLine: false,

      xAxisGridColor: '#123456', //x轴上分割线颜色
      xAxisGridAlpha: 0.5, //x轴上分割线透明度
      yAxisLabelShow: true,
      dragHightEnabled: true, //高亮的时候是否能拖拽，默认为false

      marker: {
        markerShow: true, //默认为false,不显示maker
        markerColor: '#00ccb8', //默认为黑色，marker的背景色
        markerTextColor: '#ffffff', //默认白色，marker字体字颜色
        markerTextSize: '12', //默认12
        markerCornerRadius: '3', //圆角
        markerGraduationLabel: '℃', //显示单位 默认为空""
        markerOffsetY: 40 //垂直间距设置
      },

      barSelectIndex: '2', //选中Bar的index(从0开始)，默认没有选中态（5.10）
      xAxisLabelHighLightColor: '#ff00ff', //x轴刻度选择后颜色（5.10）
      xAxisLabelHighLightThicke: true, //x轴刻度选择后字体是否加粗（5.10）
      description: '',
      legend: {
        position: 'TOP_LEFT', //"TOP_LEFT"/"TOP_RIGHT"
        orientation: 'HORIZONTAL' //"HORIZONTAL"/"BOTTOM_RIGHT"
      },
      legendHide: true, //是否需要隐藏legend，默认不隐藏
      unit: {
        x: '',
        y: ''
      }

    }),

  },

  /**
   * 原生回调方法
   */
  onCallMethod({ method, params }) {
    if (method == 'onLineDrag') {
      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
133

# Api

# Prop

字段 说明 类型 默认值 是否必须
type 原生组件类型 String midea-dragging-linechart-view 是
crossprops 参数 String {}附表1 是

# 附表1

字段 说明 类型 默认值 是否必须
x x 轴坐标配置（附表2） Object {} 是
y y 轴坐标配置（附表3） Array [] 是
xAxisYOffset x轴文字和x轴的距离 Number - 否
draggingMiniUnit 拖动最小单位 Number - 否
lineIcon 线条图标 Sting - 否
xAxisColor x轴线的颜色 String #000000 否
xAxisLabelColor label的字体颜色 String #000000 否
yGraduationLabel y轴的刻度单位 String - 否
yAxisColor y轴线的颜色 String #000000 否
yAxisLabelColor label的字体颜色 String #000000 否
yAxisLabelCount 强制限制y轴的刻度数量 Number - 否
yAxisLabelIgnoreCount 忽略 y轴 标签的间隔数，例如 2,则每两个标签，就忽略不显示一个 Number - 否
yAxisMaximum y轴的刻度最大值 Number - 否
yAxisMinimum y轴的刻度最小值 Number - 否
yAxisLabelDecimal y轴精确到几位小数 Number 0 否
yRightAxisEnable 是否打开右边的y轴 Boolean false 否
yRightGraduationLabel 右边y轴的刻度单位 String - 否
yRightAxisColor 右边y轴线的颜色 String #000000 否
yRightAxisLabelColor 右边y轴label的字体颜色 String #000000 否
yRightAxisLabelCount 强制限制右边y轴的刻度数量 Number - 否
yRightAxisLabelIgnoreCount 忽略 右边 y轴 标签的间隔数 Number - 否
yRightAxisMaximum 右边y轴的刻度最大值 Number - 否
yRightAxisLabelDecimal 右边y轴精确到几位小数 Number - 否
background 背景色 String transparent 否
yAxisGridLine 是否开启Y轴分割线,iOS上默认关闭 Boolean true 否
xAxisGridLine 是否开启X轴分割线 Boolean true 否
xAxisGridColor x轴上分割线颜色 String transparent 否
xAxisGridAlpha x轴上分割线透明度 String true 否
xAxisLabelTextSize x轴文字大小 Number 12 否
yAxisLabelShow y轴是否只显示最大最小值 Boolean true 否
dragHightEnabled 高亮的时候是否能拖拽 Boolean false 否
marker 标记配置（附表4） Object {} 否
barSelectIndex 选中Bar的index(从0开始)，默认没有选中态 Number - 否
xAxisLabelHighLightColor x轴刻度选择后颜色 String #000000 否
xAxisLabelHighLightThicke x轴刻度选择后字体是否加粗 Boolean false 否
description 描述 String - 否
legend 图例设置（附表5） Object {} 否
legendHide 是否需要隐藏legend Boolean false 否
unit x,y轴单位，如: {"x": "日期","y": "次数"} Object {} 否
valueTextColor 值文本颜色 String - 否
valueTextSize 值文本字体大小 Number - 否

# X轴参数 附表2

字段 说明 类型 默认值 是否必须
value x 轴当前折线的数值 Array [] 是
label x 轴坐标标签 Array [] 是

# Y轴参数 附表3

字段 说明 类型 默认值 是否必须
value y 轴当前折线的数值 Array [] 是
color y 轴折线颜色 String - 是
starcolor 区域背景渐变开始颜色（从下自上） String - 否
endcolor 区域背景渐变结束颜色（从下自上） String - 否
smooth 0直线，1平滑 Number 0 否
isDrawCircles 是否绘制圆圈 Boolean false 否
isDrawCircleHole 是否绘制圆内 Boolean false 否
circleRadius 圆圈半径 Number - 否
circleHoleRadius 圆内半径 Number - 否
circleHoleColor 圆圈颜色 String - 否
circleColor 圆内颜色 String - 否
isDrawHighLightCircles 是否启动点击高亮 Boolean false 否
highLightCircleRadius 高亮的圆圈半径设置 Number - 否
highLightCircleHoleRadius 高亮的圆内半径设置 Number - 否
highLightCircleOutsideWidth 高亮的圆外宽度设置 Number - 否
highLightCircleColor 高亮的圆圈颜色 String - 否
highLightCircleHoleColor 高亮的圆内颜色 String - 否
highLightCircleOutsideColor 高亮的圆外颜色设置 String - 否

# marker参数 附表4

字段 说明 类型 默认值 是否必须
markerShow 是否显示maker Boolean false 否
markerColor marker的背景色 String #000000 否
markerTextColor marker字体字颜色 String #ffffff 否
markerTextSize marker字体字大小 Number 12 否
markerCornerRadius 圆角 Number 0 否
markerGraduationLabel 显示单位 String - 否
markerOffsetY 默认为false,不显示maker Boolean false 否
markerMarginX 垂直间距设置 Number - 否
markerShow 距离高亮圆点的水平距离 Number - 否

# legend参数 附表5

字段 说明 类型 默认值 是否必须
position legend显示位置 String - 否
orientation legend方向 String - 否

# Methods 原生回调参数

方法名称 说明 备注
onLineDrag 滚动结束时触发 回调参数：{groupIndex ：number, x : number, y : number }