DevEco基础组件学习-chart_devceo筛选的组件

属性

除支持通用属性外，还支持如下属性：

表1 ChartOptions

名称

类型

默认值

必填

描述

xAxis

ChartAxis

-

是

x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。

yAxis

ChartAxis

-

是

y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。

series

ChartSeries

-

否

数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。

说明

仅线形图支持。

表2 ChartDataset

名称

类型

默认值

必填

描述

strokeColor

<color>

#ff6384

否

线条颜色。

说明

仅线形图支持。

fillColor

<color>

#ff6384

否

填充颜色。线形图表示填充的渐变颜色。

data

Array<number> | Array<Point>5+

-

是

设置绘制线或柱中的点集。

gradient

boolean

false

否

设置是否显示填充渐变颜色。

说明

仅线形图支持。

表3 ChartAxis

名称

类型

默认值

必填

描述

min

number

0

否

轴的最小值。

说明

仅线形图支持负数。

max

number

100

否

轴的最大值。

说明

仅线形图支持负数。

axisTick

number

10

否

轴显示的刻度数量。

说明

仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。

在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。

display

boolean

false

否

是否显示轴。

color

<color>

#c0c0c0

否

轴颜色。

 表4 ChartsSeries

名称

类型

默认值

必填

描述

lineStyle

ChartLineStyle

-

否

线样式设置，如线宽、是否平滑。

headPoint

PointStyle

-

否

线最前端位置白点的样式和大小。

topPoint

PointStyle

-

否

最高点的样式和大小。

bottomPoint

PointStyle

-

否

最低点的样式和大小。

loop

Point

-

否

设置屏幕显示满时，是否需要重头开始绘制。

表5 ChartLineStyle

名称

类型

默认值

必填

描述

width

<length>

1px

否

线宽设置。

smooth

boolean

false

否

是否平滑。

lineGradient7+

boolean

false

否

线段是否渐变。

targetColor7+

<color>

transparent

否

线段渐变的目标颜色，渐变初始颜色为strokeColor。

表6 PointStyle

名称

类型

默认值

必填

描述

shape

string

circle

否

高亮点的形状。可选值为：

• circle：圆形。
• square：方形。
• triangle：三角形。

size

<length>

5px

否

高亮点的大小。

strokeWidth

<length>

1px

否

边框宽度

strokeColor

<color>

#ff0000

否

边框颜色。

fillColor

<color>

#ff0000

否

填充颜色。

表7 ChartLoop

名称

类型

默认值

必填

描述

margin

<length>

1

否

擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。

gradient

boolean

false

否

是否需要渐变擦除。

表8 Point5+

名称

类型

默认值

必填

描述

value

number

0

是

表示绘制点的Y轴坐标。

pointStyle

PointStyle

-

否

表示当前数据点的绘制样式。

description

string

-

否

表示当前点的注释内容。

textLocation

string

-

否

可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。

textColor

<color>

#000000

否

表示注释文字的颜色。

lineDash

string

solid

否

表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。

lineColor

<color>

#000000

否

表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。

表9 DataSegment5+

名称

类型

默认值

必填

描述

startColor

Color

-

否

起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。

endColor

Color

-

否

终止位置的颜色，设置endColor必须设置startColor。

不设置startColor时，会使用系统默认预置的颜色数组。

value

number

0

是

占比数据的所占份额，最大100。

name

string

-

否

此类数据的名称。

当类型为量规图时，还支持如下属性：

样式

除支持通用样式外，还支持如下样式：

事件

支持通用事件。

方法

除支持通用方法外，还支持如下方法：

示例

1.线形图

<!-- xxx.hml -->
<div class="container">
  <stack class="chart-region">
    <image class="chart-background" src="common/background.png"></image>
    <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
  </stack>
  <button value="Add data" onclick="addData"></button>
</div>

 

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chart-region {
  height: 400px;
  width: 700px;
}
.chart-background {
  object-fit: fill;
}
.chart-data {
  width: 700px;
  height: 600px;
}
button {
  width: 100%;
  height: 50px;
  background-color: #F4F2F1;
  text-color: #0C81F3;
}

// xxx.js
export default {
  data: {
    lineData: [
      {
        strokeColor: '#0081ff',
        fillColor: '#cce5ff',
        data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
        gradient: true,
      }
    ],
    lineOps: {
      xAxis: {
        min: 0,
        max: 20,
        display: false,
      },
      yAxis: {
        min: 0,
        max: 1000,
        display: false,
      },
      series: {
        lineStyle: {
          width: "5px",
          smooth: true,
        },
        headPoint: {
          shape: "circle",
          size: 20,
          strokeWidth: 5,
          fillColor: '#ffffff',
          strokeColor: '#007aff',
          display: true,
        },
        loop: {
          margin: 2,
          gradient: true,
        }
      }
    },
  },
  addData() {
    this.$refs.linechart.append({
      serial: 0,
      data: [Math.floor(Math.random() * 400) + 400]
    })
  }
}

 

柱状图

<!-- xxx.hml -->
<div class="container">
  <stack class="data-region">
    <image class="data-background" src="common/background.png"></image>
    <chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart>
  </stack>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.data-region {
  height: 400px;
  width: 700px;
}
.data-background {
  object-fit: fill;
}
.data-bar {
  width: 700px;
  height: 400px;
}

 

// xxx.js
export default {
  data: {
    barData: [
      {
        fillColor: '#f07826',
        data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
      },
      {
        fillColor: '#cce5ff',
        data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
      },
      {
        fillColor: '#ff88bb',
        data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
      },
    ],
    barOps: {
      xAxis: {
        min: 0,
        max: 20,
        display: false,
        axisTick: 10,
      },
      yAxis: {
        min: 0,
        max: 1000,
        display: false,
      },
    },
  }
}

量规图 

 

<!-- xxx.hml -->
<div class="container">
  <div class="gauge-region">
    <chart class="data-gauge" type="gauge" percent = "50"></chart>
  </div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gauge-region {
  height: 400px;
  width: 400px;
}
.data-gauge {
  colors: #83f115, #fd3636, #3bf8ff;
  weights: 4, 2, 1;
}