HarmonyOS 实战开发 —— 高级图表实现解决方案

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

方案描述

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

使用准备

1.下载三方库控制台输入：ohpm install @ohos/mpchart。

2.初始化图表配置构建类。

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

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'; //图表数据结构基础类

3.配置图表指定样式。

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

图表生成分为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);
  right