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

方案描述

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);
     rightAxis.setDrawAxisLine(false);
     rightAxis.setDrawLabels(true);
     rightAxis.setDrawGridLines(true);
   }
   ​
   this.model.setData(this.lineData);
   

应用场景

解决方案：mpchart

场景一：线性表虚实线交接【曲线】

实现效果

图 1

“zh-cn_image_0000001971495045”)

核心代码

我们需要写一个MyLineDataSet类，继承自LineDataSet，也就是线型图的数据类。为什么需要这个类呢？因为我们需要在初始化数据的时候定义这个虚实相接的线是从哪里开始由实线变为虚线的，这里MyLineDataSet类的构造方法比它的父类多了一个interval参数，也就是虚实分隔点。

import { Ent