鸿蒙开源组件——创建精美图表库

jacksky
发布于 2022-1-11 17:08
浏览
0收藏

该三方开源库从github fork过来,主要将底层接口调用的实现修改成鸿蒙接口的实现,将三方库鸿蒙化,供开发鸿蒙应用的开发者使用

fork地址:https://github.com/blackfizz/EazeGraph

fork版本号/日期:master / 2015/10/5

EazeGraph

EazeGraph是一个用于创建精美图表库。它的主要目标是创建一个轻量级的库,该库易于使用并且高度可定制,具有“最新”外观。

原项目Readme地址:https://github.com/blackfizz/EazeGraph/blob/master/README.md

项目移植状态:支持组件所有基本功能

完成度:100%

调用差异:无

导入方法

har导入

将har包放入lib文件夹并在build.gradle添加

implementation fileTree(dir: 'libs', include: ['*.har'])

Library引用

添加本工程中的模块到任意工程中,在需要使用的模块build.gradle中添加

compile project(path: ':EazeGraphLibrary')

or

allprojects{
    repositories{
        mavenCentral()
    }
}
implementation 'io.openharmony.tpc.thirdlib:EazeGraph:1.0.2'

使用方法

Bar Chart

XML
<BarChart
            ohos:id="$+id:barchart"
            ohos:height="256vp"
            ohos:width="match_parent"
            ohos:egBarWidth="20vp"
            ohos:egFixedBarWidth="true"
            ohos:egLegendHeight="0vp"
            ohos:egShowDecimal="true"
            ohos:egShowValues="true"
            ohos:padding="10vp"/>
Java
mBarChart = (BarChart) findComponentById(ResourceTable.Id_barchart);

mBarChart.addBar(new BarModel(2.3f, 0xFF123456));
mBarChart.addBar(new BarModel(2.f, 0xFF343456));
mBarChart.addBar(new BarModel(3.3f, 0xFF563456));
mBarChart.addBar(new BarModel(1.1f, 0xFF873F56));
mBarChart.addBar(new BarModel(2.7f, 0xFF56B7F1));
mBarChart.addBar(new BarModel(2.f, 0xFF343456));
mBarChart.addBar(new BarModel(0.4f, 0xFF1FF4AC));
mBarChart.addBar(new BarModel(1.0f, 0xFF1FF4AC));
mBarChart.addBar(new BarModel(0.5f, 0xFF1FF4AC));
mBarChart.addBar(new BarModel(4.f, 0xFF1BA4E6));
mBarChart.addBar(new BarModel(2.3f, 0xFF123456));
mBarChart.addBar(new BarModel(2.f, 0xFF343456));
mBarChart.addBar(new BarModel(3.3f, 0xFF563456));
mBarChart.addBar(new BarModel(1.1f, 0xFF873F56));
mBarChart.addBar(new BarModel(2.7f, 0xFF56B7F1));
mBarChart.addBar(new BarModel(2.f, 0xFF343456));
mBarChart.addBar(new BarModel(0.4f, 0xFF1FF4AC));
mBarChart.addBar(new BarModel(4.f, 0xFF1BA4E6));

mBarChart.startAnimation();

Stacked Bar Chart

XML
<StackedBarChart
        ohos:id="$+id:stackedbarchart"
        ohos:height="256vp"
        ohos:width="match_parent"
        ohos:egBarWidth="20vp"
        ohos:egEnableScroll="false"
        ohos:egFixedBarWidth="true"
        ohos:egLegendHeight="40vp"
        ohos:egShowSeparators="true"
        ohos:egShowValues="true"
        ohos:padding="10vp"/>
Java
StackedBarModel s1 = new StackedBarModel("12.4");

s1.addBar(new BarModel(2.3f, 0xFF63CBB0));
s1.addBar(new BarModel(2.3f, 0xFF56B7F1));
s1.addBar(new BarModel(2.3f, 0xFFCDA67F));

StackedBarModel s2 = new StackedBarModel("13.4");
s2.addBar(new BarModel(1.1f, 0xFF63CBB0));
s2.addBar(new BarModel(2.7f, 0xFF56B7F1));
s2.addBar(new BarModel(0.7f, 0xFFCDA67F));

StackedBarModel s3 = new StackedBarModel("14.4");

s3.addBar(new BarModel(2.3f, 0xFF63CBB0));
s3.addBar(new BarModel(2.f, 0xFF56B7F1));
s3.addBar(new BarModel(3.3f, 0xFFCDA67F));

StackedBarModel s4 = new StackedBarModel("15.4");
s4.addBar(new BarModel(1.f, 0xFF63CBB0));
s4.addBar(new BarModel(4.2f, 0xFF56B7F1));
s4.addBar(new BarModel(2.1f, 0xFFCDA67F));

StackedBarModel s5 = new StackedBarModel("16.4");

s5.addBar(new BarModel(32.3f, 0xFF63CBB0));
s5.addBar(new BarModel(12.f, 0xFF56B7F1));
s5.addBar(new BarModel(22.3f, 0xFFCDA67F));

StackedBarModel s6 = new StackedBarModel("17.4");
s6.addBar(new BarModel(3.f, 0xFF63CBB0));
s6.addBar(new BarModel(.7f, 0xFF56B7F1));
s6.addBar(new BarModel(1.7f, 0xFFCDA67F));

StackedBarModel s7 = new StackedBarModel("18.4");

s7.addBar(new BarModel(2.3f, 0xFF63CBB0));
s7.addBar(new BarModel(2.f, 0xFF56B7F1));
s7.addBar(new BarModel(3.3f, 0xFFCDA67F));

StackedBarModel s8 = new StackedBarModel("19.4");
s8.addBar(new BarModel(5.4f, 0xFF63CBB0));
s8.addBar(new BarModel(2.7f, 0xFF56B7F1));
s8.addBar(new BarModel(3.4f, 0xFFCDA67F));

mStackedBarChart.addBar(s1);
mStackedBarChart.addBar(s2);
mStackedBarChart.addBar(s3);
mStackedBarChart.addBar(s4);
mStackedBarChart.addBar(s5);
mStackedBarChart.addBar(s6);
mStackedBarChart.addBar(s7);
mStackedBarChart.addBar(s8);

mStackedBarChart.startAnimation();

PieChart

XML
 <PieChart
         ohos:id="$+id:piechart"
         ohos:height="300vp"
         ohos:width="match_parent"
         ohos:egAutoCenter="true"
         ohos:egInnerValueUnit="%"
         ohos:egLegendTextSize="18fp"
         ohos:egOpenClockwise="false"
         ohos:egUsePieRotation="true"
         ohos:egValueTextSize="36fp"
         ohos:padding="10vp"/>
Java
mPieChart = (PieChart) findComponentById(ResourceTable.Id_piechart);

mPieChart.addPieSlice(new PieModel("Freetime", 15, Color.getIntColor("#FE6DA8")));
mPieChart.addPieSlice(new PieModel("Sleep", 25, Color.getIntColor("#56B7F1")));
mPieChart.addPieSlice(new PieModel("Work", 35, Color.getIntColor("#CDA67F")));
mPieChart.addPieSlice(new PieModel("Eating", 9, Color.getIntColor("#FED70E")));

mPieChart.startAnimation();

Line Chart

XML
<ValueLineChart
        ohos:id="$+id:linechart"
        ohos:height="200vp"
        ohos:width="match_parent"
        ohos:egActivateIndicatorShadow="false"
        ohos:egCurveSmoothness="0.4"
        ohos:egIndicatorLineColor="#FE6DA8"
        ohos:egIndicatorTextColor="#FE6DA8"
        ohos:egIndicatorTextUnit="g"
        ohos:egLegendHeight="40vp"
        ohos:egUseCubic="false"
        ohos:egUseDynamicScaling="false"
        ohos:egUseOverlapFill="true"/>
Java
mValueLineChart = (ValueLineChart) findComponentById(ResourceTable.Id_linechart);
loadData();

ValueLineSeries series = new ValueLineSeries();
series.setColor(0xFF63CBB0);

series.addPoint(new ValueLinePoint(4.4f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(3.2f));
series.addPoint(new ValueLinePoint(2.6f));
series.addPoint(new ValueLinePoint(5.0f));
series.addPoint(new ValueLinePoint(3.5f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(0.4f));
series.addPoint(new ValueLinePoint(3.4f));
series.addPoint(new ValueLinePoint(2.5f));
series.addPoint(new ValueLinePoint(1.4f));
series.addPoint(new ValueLinePoint(4.4f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(3.2f));
series.addPoint(new ValueLinePoint(2.6f));
series.addPoint(new ValueLinePoint(5.0f));
series.addPoint(new ValueLinePoint(3.5f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(0.4f));
series.addPoint(new ValueLinePoint(3.4f));
series.addPoint(new ValueLinePoint(2.5f));
series.addPoint(new ValueLinePoint(1.0f));
series.addPoint(new ValueLinePoint(4.4f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(3.2f));
series.addPoint(new ValueLinePoint(2.6f));
series.addPoint(new ValueLinePoint(5.0f));
series.addPoint(new ValueLinePoint(3.5f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(0.4f));
series.addPoint(new ValueLinePoint(3.4f));
series.addPoint(new ValueLinePoint(2.5f));
series.addPoint(new ValueLinePoint(1.0f));
series.addPoint(new ValueLinePoint(4.2f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(3.6f));
series.addPoint(new ValueLinePoint(1.0f));
series.addPoint(new ValueLinePoint(2.5f));
series.addPoint(new ValueLinePoint(2.0f));
series.addPoint(new ValueLinePoint(1.4f));


mValueLineChart.addSeries(series);
mValueLineChart.startAnimation();

一些功能设置介绍

BarChart功能介绍

  1. 添加图表数据 mBarChart.addBar();
  2. 添加图表数据 mBarChart.addBarList();

PieChart功能介绍

  1. 添加数据 mPieChart.addPieSlice(PieModel slice);
  2. 获取当前选中的item mPieChart.getCurrentItem();.
  3. 设置选中的item mPieChart.setCurrentItem();

ValueLineChart功能介绍

  1. 添加图表数据 mValueLineChart.addSeries();
  2. 获取图表数据 mValueLineChart.getDataSeries();

StackedBarChart功能介绍

  1. 添加图表数据 mBarChart.addBar();
  2. 添加图表数据 mBarChart.addBarList();

BaseChart功能介绍

  1. 设置说明文字的颜色 mBarChart.setLegendColor();
  2. 设置说明文字的高度 mBarChart.setLegendHeight();
  3. 设置说明文字的字号 mBarChart.setLegendTextSize();
  4. 设置动画的时间 mBarChart.setAnimationTime();
  5. 设置文本 mBarChart.setEmptyDataText();
  6. 获取是否将显示的提示转化为int类型 mBarChart.isShowDecimal();
  7. 设置是否将显示的提示转化为int类型 mBarChart.setShowDecimal();
  8. 获取图表的数据 mBarChart.getData();
  9. 清除图表数据 mBarChart.clearChart();
  10. 获取动画的时间 mBarChart.getAnimationTime();
  11. 获取图表的条目间隔距离 mBarChart.getBarMargin();
  12. 获取文字 mBarChart.getEmptyDataText();
  13. 获取提示文字的颜色 mBarChart.getLegendColor();
  14. 获取提示文字的高度 mBarChart.getLegendHeight();.
  15. 获取提示文字的字体大小 mBarChart.getLegendTextSize();

BaseBarChart功能介绍

  1. 设置每页显示的柱状个数 mBarChart.setVisibleBars();
  2. 设置柱状图的边距 mBarChart.setBarMargin();
  3. 设置柱状图每个条目的宽度 mBarChart.setBarWidth();
  4. 获取图表的宽度 mBarChart.getBarWidth();
  5. 获取图表的监听 mBarChart.getOnBarClickedListener();
  6. 获取显示的条目个数 mBarChart.getVisibleBars();
  7. 设置是否修复图表条目的宽度 mBarChart.setFixedBarWidth();
  8. 设置图表的监听 mBarChart.setOnBarClickedListener();
  9. 设置是否滚动 mBarChart.setScrollEnabled();
  10. 设置滚动到最后 mBarChart.setScrollToEnd();
  11. 设置是否显示值 mBarChart.setShowValues();

EazeGraph-master.zip 4.52M 29次下载
已于2022-1-11 17:08:22修改
收藏
回复
举报
回复
    相关推荐