鸿蒙HarmonyOS-图表应用_鸿蒙开发 图表

通过调用 initCurveData 函数，实现曲线图表所需数据的初始化。该函数生成随机曲线数据点，并通过设置渐变填充颜色提升了图表的视觉效果。详细内容请查看相关代码和注释：

/**
 * 初始化数据
 * @param count 曲线图点的个数
 * @param range y轴范围
 * @returns LineData 曲线图数据对象
 */
private initCurveData(count: number, range: number): LineData {
  // 创建存储曲线数据点的列表
  let values = new JArrayList<EntryOhos>();
 
  // 生成随机曲线数据点
  for (let i = 0; i < count; i++) {
    let val: number = Math.random() * (range + 1) + 20;
    values.add(new EntryOhos(i, val));
  }
 
  // 渐变填充颜色设置
  let gradientFillColor = new Array<ColorStop>();
  gradientFillColor.push(['#ffffffff', 0.3]);
  gradientFillColor.push(['#0000ffff', 1.0]);
 
  // 创建曲线数据集列表
  let dataSet = new JArrayList<ILineDataSet>();
 
  // 创建曲线数据集
  let set1 = new LineDataSet(values, "DataSet 1");
  set1.setDrawFilled(true); //设置是否绘制填充
  set1.setDrawValues(false); //设置是否绘制数值
  set1.setMode(Mode.CUBIC_BEZIER); //设置贝塞尔曲线模式
  set1.setGradientFillColor(gradientFillColor);//渐变色填充           
  set1.setColorByColor(Color.Black);//设置数据点颜色
  set1.setLineWidth(1); //设置线条宽度
  set1.setDrawCircles(false); //设置是否绘制数据点圆点
  // 将数据集添加到数据集列表
  dataSet.add(set1);
  // 返回曲线图数据对象
  return new LineData(dataSet);
}

 //设置顶部轴的参数
    this.topAxis.setLabelCount(5, false);//设置轴的标签个数
    this.topAxis.setPosition(XAxisPosition.TOP);//设置轴的位置在顶部
    this.topAxis.setAxisMinimum(0);//设置轴的最小值
    this.topAxis.setAxisMaximum(44);//设置轴的最大值
    this.topAxis.setDrawGridLines(true);//设置是否绘制网格线
 
    //设置底部轴的参数
    this.bottomAxis.setLabelCount(5, false);//设置轴的标签个数
    this.bottomAxis.setPosition(XAxisPosition.BOTTOM);//设置轴的位置在底部
    this.bottomAxis.setAxisMinimum(0);//设置轴的最小值
    this.bottomAxis.setAxisMaximum(44);//设置轴的最大值
    this.bottomAxis.setDrawAxisLine(true);//设置是否绘制轴线
    this.bottomAxis.setDrawLabels(true);//设置是否绘制标签

this.leftAxis = new YAxis(AxisDependency.LEFT);//设置轴位置
this.leftAxis.setLabelCount(7, false);//设置标签个数
this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);//设置轴标签在图表外侧
this.leftAxis.setSpaceTop(15);//设置顶部距离
this.leftAxis.setAxisMinimum(-50);//设置轴的最小值
this.leftAxis.setAxisMaximum(200);//设置轴的最大值
this.leftAxis.enableGridDashedLine(5,5,0)//设置网格线虚线效果
 
this.rightAxis = new YAxis(AxisDependency.RIGHT);//设置轴位置
this.rightAxis.setDrawGridLines(false);//设置是否绘制网格线
this.rightAxis.setLabelCount(7, false);//设置标签个数
this.rightAxis.setSpaceTop(11);//设置顶部距离
this.rightAxis.setAxisMinimum(-50); //设置轴的最小值
this.rightAxis.setAxisMaximum(200);//设置轴的最大值
this.rightAxis.setDrawAxisLine(true);//设置是否绘制轴线
this.rightAxis.setDrawLabels(true);//设置是否绘制标签

//上方限制线
let upperLimtLine:LimitLine= new LimitLine(150, "Upper Limit"); //设置线条位置和文字说明
upperLimtLine.setLineWidth(4); //设置线条宽度
upperLimtLine.enableDashedLine(5, 5, 0);//设置虚线效果
upperLimtLine.setLabelPosition(LimitLabelPosition.RIGHT_TOP);//设置文字说明的位置
upperLimtLine.setTextSize(10);//设置文字大小
 
//下方限制线
let lowerLimtLine:LimitLine= new LimitLine(-30, "Lower Limit");
lowerLimtLine.setLineWidth(4);
lowerLimtLine.enableDashedLine(5, 5, 0);
lowerLimtLine.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
lowerLimtLine.setTextSize(10);

//添加两条限制线
this.leftAxis.addLimitLine(upperLimtLine);
this.leftAxis.addLimitLine(lowerLimtLine);

//设置图表的顶部和底部轴
this.lineChartModel.setTopAxis(this.topAxis);
this.lineChartModel.setBottomAxis(this.bottomAxis);
//设置图表的左轴和右轴
this.lineChartModel.setLeftAxis(this.leftAxis);
this.lineChartModel.setRightAxis(this.rightAxis);

//设置图表的宽高
this.lineChartModel.setWidth(this.mWidth);
this.lineChartModel.setHeight(this.mHeight);
//设置图表的偏移量
this.lineChartModel.setMinOffset(this.minOffset);

//设置图标数据
this.lineChartModel.setLineData(this.lineData);
//初始化图表
this.lineChartModel.init();

 build() {
    Stack({ alignContent: Alignment.TopStart }) {
        LineChart({lineChartModel: this.lineChartModel})
    }
  }

 OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包