HarmonyOS 基础之JS UI实现数据图表 精华

介绍

        数据图表泛指在屏幕中显示的，可直观展示统计信息属性（时间性、数量性等），对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地"可视化"的手段。
 
1、提升人对数据理解能力

统计图表进行数据分析，将数据变成图片，人们透过视觉化的符号，也就是统计图表展现出来的图形对比，能更快读取原始数据，提升人对数据的理解能力。
 
2、文字少，分析结果简洁明了

用统计图进行数据分析，统计图的文字成分低，不会像写作一样做文字描述及文本铺陈，图表中的文字往往只用来诠释或标注数据，出处，或是更重要的标题等，因而数据分析结果在呈现上更加简洁明了。
 
3、标题明确

统计图表会配有简洁的标题，使人一目了然就知道图表显示的是何种数据，节约阅览人的时间。

效果展示

Phone	TV

开发调试

基础布局index.hml

<div class="container">
    <div>
        <text class="title" >未来一周的雨水量变化</text>
    </div>
    <stack class="chart-region line">
        <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
    </stack>
    <div>
        <text class="title" >柱状图</text>
    </div>
    <stack class="chart-region">
        <chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart>
    </stack>
    <div>
        <text class="title" >量规图</text>
    </div>
    <stack class="chart-region">
        <chart class="data-bar" style="margin-left: 30px; margin-top: 20px;"  type="gauge" id="bar-chart" options="{{barOps}}" datasets="{{barData}}" percent = "50"></chart>
    </stack>
</div>

线形图的模拟数据

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

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

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

gradient: 是否填充渐变色

lineOps: {
            xAxis: {
                min: 0,
                max: 20,
                display: false,
            },
            yAxis: {
                min: 0,
                max: 1000,
                display: false,
            },
            series: {
                lineStyle: {
                    width: "1px",
                    smooth: true,
                },
                topPoint:{
                    shape:"circle",
                    fillColor:"#F9A11C"
                },
                headPoint: {
                    shape: "circle",
                    size: 20,
                    strokeWidth: 1,
                    fillColor: '#ffffff',
                    strokeColor: '#007aff',
                    display: true,
                },
                loop: {
                    margin: 2,
                }
            }
        }

柱状图模拟数据

data：需要渲染的数据组

fillColor：填充颜色

  barData: [
        {
            fillColor: '#B2DCD6',
            data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
        },
        {
            fillColor: '#F9A11C',
            data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
        },
        {
            fillColor: '#1A89FF',
            data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
        },
    ],
    barOps: {
        xAxis: {
            min: 0,
            max: 10,
            display: true,
            axisTick: 5,
        },
        yAxis: {
            min: 0,
            max: 1000,
            display: true,
        },
    }

量规图

量规图主要设置样式颜色渲染

/* 量规图的颜色*/
.data-gauge {
    colors: #83f115, #fd3636, #3bf8ff;
    weights: 4, 2, 1;
}

如需适配多端设备，请到main => config.json文件中进行配置

 // 多设备配置
 "deviceType": [
      "phone",
      "tv"
    ]

作者：王国菊

更多原创内容请关注：开鸿 HarmonyOS 学院

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。