【鸿蒙实战开发】HarmonyOS 高级图表实现解决方案

方案描述

mpchart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。

使用准备

下载三方库控制台输入：ohpm install @ohos/mpchart。
初始化图表配置构建类。

初始化三方库得构建类，图表数据，线性数据等。

import { LineChart, LineChartModel } from '@ohos/mpchart'; // 初始化图表配置构建类 
import { XAxis, XAxisPosition } from '@ohos/mpchart'; // x轴 
import { YAxis, AxisDependency, YAxisLabelPosition } from '@ohos/mpchart'; // Y轴 
import { LineData } from '@ohos/mpchart'; // 生成图表数据 
import { LineDataSet, Mode } from '@ohos/mpchart'; //线形图数据集合 
import { EntryOhos } from '@ohos/mpchart'; //图表数据结构基础类

配置图表指定样式。

注：此步骤是初始化底层的表框架，也是就后面的网格。

图表生成分为x、y轴。

setPosition设置：

x轴（getXAxis）得显示范围：TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE，x轴只需要设置一次即可。

y轴（getAxisLeft，getAxisRight）表内左右显示范围：OUTSIDE_CHART, INSIDE_CHART，如需只设置一侧，创建实例时，添加属性添加所需侧即可。

let topAxis = this.model.getXAxis();//图表x轴 
if (topAxis) { 
  topAxis.setLabelCount(5, false);//设置绘制标签个数 
  topAxis.setPosition(XAxisPosition.TOP);//设置标签位置 
  topAxis.setAxisMinimum(0); //设置最小值 
  topAxis.setAxisMaximum(50); //设置最大值 
  topAxis.setDrawAxisLine(false)// 启用绘制x轴轴线 
  topAxis.setDrawLabels(false) // 不绘制x轴标签 
  topAxis.setDrawGridLines(false)// 不绘制X轴网格线 
} 

let leftAxis = this.model.getAxisLeft(); 
if (leftAxis) { 
  leftAxis = new YAxis(AxisDependency.LEFT); 
  leftAxis.setLabelCount(6, false); 
  leftAxis.setDrawGridLines(true);//启用绘制左侧Y轴网格线 
  leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); 
  leftAxis.setAxisMinimum(0); 
  leftAxis.setAxisMaximum(50); 
  leftAxis.setDrawLabels(true); 
  leftAxis.setDrawGridLines(true); 
} 

let rightAxis = this.model.getAxisRight(); 
if (rightAxis) { 
  rightAxis = new YAxis(AxisDependency.RIGHT); 
  rightAxis.setDrawGridLines(true); 
  rightAxis.setLabelCount(6, false); 
  rightAxis.setAxisMinimum(0); 
  rightAxis.setAxisMaximum(50); 
  rightAxis.setDrawAxisLine(false); 
  rightAxis.setDrawLabels(true); 
  rightAxis.setDrawGridLines(true); 
} 

this.model.setData(this.lineData);