鸿蒙5.0版开发：UI框架JS组件-基础组件（chart）

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

chart

图表组件，用于呈现线形图、柱状图、量规图界面。
   阐明：
  从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  子组件

不支持。
属性

除支持通用属性外，还支持如下属性：
名称类型默认值必填描述typestringline否设置图表类型（不支持动态修改），可选项有：
- bar：柱状图。
- line：线形图。
- gauge：量规图。
- progress：进度类圆形图表。
- loading：加载类圆形图表。
- rainbow：占比类圆形图表。optionsChartOptions-否图表参数设置，用于设置x轴、y轴的最小值、最大值、刻度数、是否体现，线条宽度、是否平滑等。（不支持动态修改）,量规图不收效。datasetsArray<ChartDataset>-否数据聚集，用于设置多条数据集及其背景色，量规图不收效。segmentsDataSegment | Array<DataSegment>否进度类、加载类和占比类圆形图表利用的数据结构。
DataSegment针对进度类和加载类圆形图表利用，Array<DataSegment>针对占比类图标利用，DataSegment最多9个。effectsbooleantrue否是否开启占比类、进度类圆形图表特效。animationdurationnumber3000否设置占比类圆形图表展开动画时长，单位为ms。 表1 ChartOptions
名称类型默认值必填描述xAxisChartAxis-是x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否体现。yAxisChartAxis-是y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否体现。seriesChartAxis-否数据序列参数设置，仅线形图支持。可以设置：
- 线的样式，如线宽、是否平滑。
- 线最前端位置白点的样式和大小。 表2 ChartDataset
名称类型默认值必填描述strokeColor<color>#ff6384否线条颜色，仅线形图支持。fillColor<color>#ff6384否填充颜色，线形图表示填充的渐变颜色。dataArray<number> | Array<oint>-是设置绘制线或柱中的点集。gradientbooleanfalse否设置是否体现填充渐变颜色，仅线形图支持。 表3 ChartAxis
名称类型默认值必填描述minnumber0否轴的最小值，不支持负数，仅线形图支持。maxnumber100否轴的最大值，不支持负数，仅线形图支持。axisTicknumber10否轴体现的刻度数目。
仅支持1~20，且具体体现的结果与如下计算值有关（图的宽度所占的像素/（max-min））。在柱状图中，每组数据体现的柱子数目与刻度数目一致，且柱子体现在刻度处。displaybooleanfalse否是否体现轴。color<color>#c0c0c0否轴颜色。 表4 ChartSeries
名称类型默认值必填描述lineStyleChartLineStyle-否线样式设置，如线宽、是否平滑。headPointPointStyle-否线最前端位置白点的样式和大小。topPointPointStyle-否最高点的样式和大小。bottomPointPointStyle-否最低点的样式和大小。loopChartLoop-否设置屏幕体现满时，是否需要重头开始绘制。 表5 ChartLineStyle
名称类型默认值必填描述width<length>1px否线宽设置。smoothbooleanfalse否是否平滑。 表6 PointStyle
名称类型默认值必填描述shapestringcircle否高亮点的外形。可选值为：
- 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不可见，因此不发起同时利用。gradientbooleanfalse否是否需要渐变擦除。 表8 Point
名称类型默认值必填描述valuenumber0是表示绘制点的Y轴坐标。pointStylePointStyle-否表示当前数据点的绘制样式。descriptionstring-否表示当前点的注释内容。textLocationstring-否可选值为：
- “top”：注释的绘制位置位于点的上方。
- “bottom”：注释的绘制位置位于点的下方。
- “none”：不绘制。textColor<color>#000000否表示注释文字的颜色。lineDashstringsolid否表示绘制当前线段虚线的样式。
- “dashed， 5， 5”：表示纯虚线，绘制5px的实线后留5px的空缺。
- “solid”：表示绘制实线。lineColor<color>#000000否表示绘制当前线段的颜色。此颜色不设置会默认利用整体的strokeColor。 表9 DataSegment
名称类型默认值必填描述startColorColor-否起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会利用系统默认预置的颜色数组，具体颜色值见下表。endColorColor-否终止位置的颜色，设置endColor必须设置startColor。
不设置startColor时，会利用系统默认预置的颜色数组。valuenumber0是占比数据的所占份额，最大100。namestring-否此类数据的名称。 数据组主题深色主题0起始颜色：#f7ce00，竣事颜色：#f99b11起始颜色：#d1a738，竣事颜色：#eb933d1起始颜色：#f76223，竣事颜色：#f2400a起始颜色：#e67d50，竣事颜色：#d9542b2起始颜色：#f772ac，竣事颜色：#e65392起始颜色：#d5749e，竣事颜色：#d6568d3起始颜色：#a575eb，竣事颜色：#a12df7起始颜色：#9973d1，竣事颜色：#5552d94起始颜色：#7b79f7，竣事颜色：#4b48f7起始颜色：#7977d9，竣事颜色：#f99b115起始颜色：#4b8af3，竣事颜色：#007dff起始颜色：#4c81d9，竣事颜色：#217bd96起始颜色：#73c1e6，竣事颜色：#4fb4e3起始颜色：#5ea6d1，竣事颜色：#4895c27起始颜色：#a5d61d，竣事颜色：#69d14f起始颜色：#91c23a，竣事颜色：#70ba5d8起始颜色：#a2a2b0，竣事颜色：#8e8e93起始颜色：#8c8c99，竣事颜色：#6b6b76 当类型为量规图时，还支持如下属性：
名称类型默认值必填描述percentnumber0否当前值占整体的百分比，取值范围为0-100。 样式

除支持通用样式外，还支持如下样式：
名称类型默认值必填描述stroke-width<length>32px（量规）
24px（占比类圆形图表）否量规、占比类圆形图表组件刻度条的宽度。start-angle<deg>240（量规）
0（占比类圆形图表）否量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。total-angle<deg>240（量规）
360（占比类圆形图表）否量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到止境为逆时针。center-x<length>-否量规组件刻度条中央位置，该样式优先于通用样式的position样式，仅量规图支持。
该样式需要和center-y和radius一起设置才能收效。center-y<length>-否量规组件刻度条中央位置，该样式优先于通用样式的position样式，仅量规图支持。
该样式需要和center-x和radius一起设置才能收效。radius<length>-否量规组件刻度条半径，该样式优先于通用样式的width和height样式，仅量规图支持。
该样式需要和center-x和center-y一起设置才能收效。colorsArray-否量规组件刻度条每一个区段的颜色，仅量规图支持。
如：colors: #ff0000, #00ff00。weightsArray-否量规组件刻度条每一个区段的权重，仅量规图支持。
如：weights: 2, 2。font-familyArray-否表示绘制注释的字体样式，支持自定义字体。font-size<length>-否表示绘制注释的字体的大小。 变乱

支持通用变乱。
示例

• 线形图
  
  1. <!-- xxx.hml -->
  2. <div class="container">
  3.   <stack class="chart-region">
  4.     <image class="chart-background" src="common/background.png"></image>
  5.     <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
  6.   </stack>
  7. </div>

  复制代码
  1. /* xxx.css */
  2. .container {
  3.   flex-direction: column;
  4.   justify-content: center;
  5.   align-items: center;
  6. }
  7. .chart-region {
  8.   height: 400px;
  9.   width: 700px;
  10. }
  11. .chart-background {
  12.   object-fit: fill;
  13. }
  14. .chart-data {
  15.   width: 700px;
  16.   height: 600px;
  17. }

  复制代码
  1. // xxx.json
  2. {
  3.   "data": {
  4.     "lineData": [
  5.       {
  6.         "strokeColor": "#0081ff",
  7.         "fillColor": "#cce5ff",
  8.         "data": [
  9.           763,
  10.           550,
  11.           551,
  12.           554,
  13.           731,
  14.           654,
  15.           525,
  16.           696,
  17.           595,
  18.           628,
  19.           791,
  20.           505,
  21.           613,
  22.           575,
  23.           475,
  24.           553,
  25.           491,
  26.           680,
  27.           657,
  28.           716
  29.         ],
  30.         "gradient": true
  31.       }
  32.     ],
  33.     "lineOps": {
  34.       "xAxis": {
  35.         "min": 0,
  36.         "max": 20,
  37.         "display": false
  38.       },
  39.       "yAxis": {
  40.         "min": 0,
  41.         "max": 1000,
  42.         "display": false
  43.       },
  44.       "series": {
  45.         "lineStyle": {
  46.           "width": "5px",
  47.           "smooth": true
  48.         },
  49.         "headPoint": {
  50.           "shape": "circle",
  51.           "size": 20,
  52.           "strokeWidth": 5,
  53.           "fillColor": "#ffffff",
  54.           "strokeColor": "#007aff",
  55.           "display": true
  56.         },
  57.         "loop": {
  58.           "margin": 2,
  59.           "gradient": true
  60.         }
  61.       }
  62.     }
  63.   }
  64. }

  复制代码
  4*4卡片
  

• 柱状图
  
  1. <!-- xxx.hml -->
  2. <div class="container">
  3.   <stack class="data-region">
  4.     <image class="data-background" src="common/background.png"></image>
  5.     <chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart>
  6.   </stack>
  7. </div>

  复制代码
  1. /* xxx.css */
  2. .container {
  3.   flex-direction: column;
  4.   justify-content: center;
  5.   align-items: center;
  6. }
  7. .data-region {
  8.   height: 400px;
  9.   width: 700px;
  10. }
  11. .data-background {
  12.   object-fit: fill;
  13. }
  14. .data-bar {
  15.   width: 700px;
  16.   height: 400px;
  17. }

  复制代码
  1. {
  2.   "data": {
  3.     "barData": [
  4.       {
  5.         "fillColor": "#f07826",
  6.         "data": [763, 550, 551, 554, 731, 654, 525, 696, 595, 628]
  7.       },
  8.       {
  9.         "fillColor": "#cce5ff",
  10.         "data": [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
  11.       },
  12.       {
  13.         "fillColor": "#ff88bb",
  14.         "data": [673, 500, 574, 483, 702, 583, 437, 506, 693, 657]
  15.       }
  16.     ],
  17.     "barOps": {
  18.       "xAxis": {
  19.         "min": 0,
  20.         "max": 20,
  21.         "display": false,
  22.         "axisTick": 10
  23.       },
  24.       "yAxis": {
  25.         "min": 0,
  26.         "max": 1000,
  27.         "display": false
  28.       }
  29.     }
  30.   }
  31. }

  复制代码
  4*4卡片
  

• 量规图
  
  1. <!-- xxx.hml -->
  2. <div class="container">
  3.   <div class="gauge-region">
  4.     <chart class="data-gauge" type="gauge" percent = "50"></chart>
  5.   </div>
  6. </div>

  复制代码
  1. /* xxx.css */
  2. .container {
  3.   flex-direction: column;
  4.   justify-content: center;
  5.   align-items: center;
  6. }
  7. .gauge-region {
  8.   height: 400px;
  9.   width: 400px;
  10. }
  11. .data-gauge {
  12.   colors: #83f115, #fd3636, #3bf8ff;
  13.   weights: 4, 2, 1;
  14. }

  复制代码
  4*4卡片
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。