chart

说明： 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

图表组件，用于呈现线形图、柱状图、量规图界面。

权限列表

无

子组件

不支持。

属性

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

表1 ChartOptions

表2 ChartDataset

表3 ChartAxis

表4 ChartSeries

表5 ChartLineStyle

表6 PointStyle

表7 ChartLoop

表8 Point⁵⁺

表9 DataSegment⁵⁺

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

样式

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

事件

支持通用事件。

方法

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

示例

1. 线形图 html <!-- 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]
       })
     }
   }

1. 柱状图 html <!-- 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
         }
       }
     }
   }

1. 量规图 html <!-- 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;
   }

1. 进度类、加载类、占比类圆形图表 html <!-- xxx.hml --> <div class="container"> <text class="text">progress Example</text> <stack class="chart-region"> <chart class="" type="progress" segments="{{ progressdata }}"></chart> </stack> <text class="text">loading Example</text> <stack class="chart-region"> <chart class="" type="loading" segments="{{ loadingdata }}"></chart> </stack> <text class="text">rainbow Example</text> <stack class="chart-region"> <chart class="" type="rainbow" segments="{{ rainbowdata }}" effects="true" animationduration="5000"></chart> </stack> </div> css /* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; } .chart-region { height: 400px; width: 700px; margin-top: 10px; } .text { margin-top: 30px; } js // xxx.js export default { data: { progressdata: { value: 50, name: 'progress' }, loadingdata: { startColor: "#ffc0cb", endColor: "#00bfff", }, rainbowdata: [ { value: 50, name: 'item1' }, { value: 10, name: 'item2' }, { value: 20, name: 'item3' }, { value: 10, name: 'item4' }, { value: 10, name: 'item5' } ] } }

你可能感兴趣的鸿蒙文章

harmony 鸿蒙兼容JS的类Web开发范式（ArkUI.Full）

harmony 鸿蒙数据类型说明

harmony 鸿蒙button

harmony 鸿蒙divider

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙label

harmony 鸿蒙marquee

harmony 鸿蒙menu