mpchart

 ohpm install @ohos/mpchart

 import {
  BarChart, // 柱状图图表类
  BarChartModel, // 柱状图配置构建类
  BarData, // 柱状图数据包
  BarDataSet, // 柱状图数据集合
  BarEntry, // 柱状图数据结构
  ChartGesture, // 手势事件模式
  Description, // 图表Description(描述)部件
  EntryOhos, // 图表数据结构基础类
  Fill, // 图表填充类型构建类
  Highlight, // 图表高亮数据
  IBarDataSet, // 柱状图数据集合的操作类
  JArrayList, // 工具类：数据集合
  Legend, // 图表Legend(图例)部件
  LimitLabelPosition, // 图表的LimitLine标签位置枚举类
  LimitLine, // 图表LimitLine
  MarkerView, // 图表的Marker(标志气泡)部件
  OnChartGestureListener, // 手势事件监听
  OnChartValueSelectedListener, // 数据选择监听
  XAxis, // 图表X轴部件
  XAxisPosition, // 图表X轴标签位置枚举类
  YAxis, // 图表Y轴部件
  YAxisLabelPosition // 图表Y轴标签位置枚举类
} from '@ohos/mpchart';

// 构造数据选择监听器
  private valueSelectedListener: OnChartValueSelectedListener = {
    onValueSelected: (e: EntryOhos, h: Highlight) => {
    // ...todoSomething
    },
    onNothingSelected: () => {
    // ...todoSomething
    }
  }
  
  // 构造手势识别事件监听器
  private chartGestureListener: OnChartGestureListener = {
    onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => {
    },
    onChartGestureEnd: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => {
    // ...todoSomething
    },
    onChartLongPressed: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
    // ...todoSomething
    },
    onChartDoubleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
    // ...todoSomething
    },
    onChartSingleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
    // ...todoSomething
    },
    onChartFling: (isTouchEvent: boolean, me1: TouchEvent | GestureEvent, me2: TouchEvent, velocityX: number, velocityY: number) => {
    // ...todoSomething
    },
    onChartScale: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, scaleX: number, scaleY: number) => {
    // ...todoSomething
    },
    onChartTranslate: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, dX: number, dY: number) => {
    // ...todoSomething
    }
  }
  
  // 图表数据初始化
  aboutToAppear() {
  
  	// Step1:必须：初始化图表配置构建类
    this.model = new BarChartModel();
    
    // Step2:配置图表指定样式，各部件间没有先后之分
    
    // 为图表添加数据选择的监听器
    this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
    // 为图表添加手势识别监听器
    this.model.setOnChartGestureListener(this.chartGestureListener);
	// 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
    let description: Description | null = this.model.getDescription()
    if (description) {
      description.setEnabled(false);
    }
	// 获取图表图例部件，设置图表图例部件不可用
    let l: Legend | null = this.model.getLegend();
    if (l) {
      l.setEnabled(false);
    }
    // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
    this.model.setMaxVisibleValueCount(40);
	// 是否绘制图表的背景色，绘制范围为图表柱状图的绘制范围，不包含轴线之外的部分
    this.model.setDrawGridBackground(false);
    // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格
    this.model.setGridBackgroundColor('#500000ff')
    // 设置不绘制柱状图的柱体阴影背景
    this.model.setDrawBarShadow(false);
	// 设置柱状图的数值在柱体上方
    this.model.setDrawValueAboveBar(false);
    // 设置柱状图的高亮范围是否为整个柱体，只在堆叠柱状图中有区别
    this.model.setHighlightFullBarEnabled(false);
	// 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
    this.limitLine1 = new LimitLine(120, 'Upper Limit');
    this.limitLine1.setLineWidth(4);
    this.limitLine1.enableDashedLine(10, 10, 0);
    this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
    this.limitLine1.setTextSize(10);

    this.limitLine2 = new LimitLine(50, 'Lower Limit');
    this.limitLine2.setLineWidth(4);
    this.limitLine2.enableDashedLine(10, 10, 0);
    this.limitLine2.setLineColor(Color.Yellow);
    this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
    this.limitLine2.setTextSize(10);

    // 设置图表左Y轴信息
    this.leftAxis = this.model.getAxisLeft();
    if (this.leftAxis) {
      this.leftAxis.setAxisMinimum(0); // this replaces setStartAtZero(true)
      this.leftAxis.setDrawLimitLinesBehindData(false);

      // 添加LimitLines
      this.leftAxis.addLimitLine(this.limitLine1);
      this.leftAxis.addLimitLine(this.limitLine2);
    }
	// 设置图表右Y轴信息
    this.rightAxis = this.model.getAxisRight();
    if (this.rightAxis) {
      this.rightAxis.setEnabled(false);
      this.rightAxis.setAxisMinimum(0);
    }
	// 设置X轴信息
    this.xAxis = this.model.getXAxis();
    if (this.xAxis) {
      this.xAxis.setPosition(XAxisPosition.BOTTOM);
    }
	// 为图表设置markerView
    this.normalMarker = new MarkerView();
    this.model.setMarker(this.normalMarker);
    // 也可设置定义图表MarkerView
    this.stackMarker = new CustomMarkerView();
	// 生成单一颜色数据
    this.data = this.getNormalData();
    // 将数据与图表配置类绑定
    this.model.setData(this.data);
    // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据
    this.model.setVisibleXRangeMaximum(20);
  }

   private getNormalData(): BarData {
    let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
    values.add(new BarEntry(1, 73.3));
    values.add(new BarEntry(2, 5.4));

    let dataSet: BarDataSet = new BarDataSet(values, 'DataSet');
    dataSet.setHighLightColor(Color.Black);
    dataSet.setDrawIcons(false);
    // 为柱体添加颜色信息
    dataSet.setColorByColor(Color.Pink);

    let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
    dataSetList.add(dataSet);

    let barData: BarData = new BarData(dataSetList);
    //设置柱状图宽度
    barData.setBarWidth(0.85);
    //设置顶部圆角半径
    barData.setTopRadius(5);
    return barData;
  }

  private getGradientData(): BarData {
    let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
    values.add(new BarEntry(1, 32.9));
    values.add(new BarEntry(2, 44.7));

    let dataSet: BarDataSet = new BarDataSet(values, 'DataSet');
    dataSet.setHighLightColor(Color.Black);
    dataSet.setDrawIcons(false);
    let startColor1: string = '#ffffbb33';
    let startColor2: string = '#ff33b5e5';
    let startColor3: string = '#ffffbb33';
    let startColor4: string = '#ff99cc00';
    let startColor5: string = '#ffff4444';
    let endColor1: string = '#ff0099cc';
    let endColor2: string = '#ffaa66cc';
    let endColor3: string = '#ff669900';
    let endColor4: string = '#ffcc0000';
    let endColor5: string = '#ffff8800';
    let gradientFills: JArrayList<Fill> = new JArrayList<Fill>();
    gradientFills.add(new Fill(startColor1, endColor1));
    gradientFills.add(new Fill(startColor2, endColor2));
    gradientFills.add(new Fill(startColor3, endColor3));
    gradientFills.add(new Fill(startColor4, endColor4));
    gradientFills.add(new Fill(startColor5, endColor5));
	// 为柱体添加渐变的颜色信息
    dataSet.setFills(gradientFills);

    let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
    dataSetList.add(dataSet);

    let barData: BarData = new BarData(dataSetList);
    barData.setBarWidth(0.85);
    return barData;
  }

  private getStackData(): BarData {
    let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
    values.add(new BarEntry(1, [38.0, 28.0, 39.8]));
    values.add(new BarEntry(2, [18.2, 16.1, 16.1]));

    let set1: BarDataSet | null = null;
    set1 = new BarDataSet(values, "Statistics Vienna 2014");
    set1.setDrawIcons(false);
    // 为柱体添加指定分段的颜色信息
    set1.setColorsByArr([Color.Red, Color.Green, Color.Pink]);
    set1.setStackLabels(["Births", "Divorces", "Marriages"]);

    let dataSets: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
    dataSets.add(set1);

    let data: BarData = new BarData(dataSets);
    data.setValueTextColor(Color.White);
    return data;
  }

// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过barData.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
BarChart({ model: this.model })
  .width('100%')
  .height('30%')

import {
  JArrayList, // 工具类：数据集合
  XAxis, // 图表X轴部件
  XAxisPosition, // 图表X轴标签位置枚举类
  YAxis, // 图表Y轴部件
  Description, // 图表描述标签
  Legend, // 图表Legend(图例)部件
  OnChartValueSelectedListener, //
  Highlight,// 图表高亮数据
  EntryOhos,// 图表数据结构基础类
  YAxisLabelPosition,// 图表Y轴标签位置枚举类
  LineDataSet, //线形图数据集合
  ILineDataSet, // 线形图数据集合的操作类
  LineData, //线形图数据包
  Mode, //线形图形状
  LineChart, // 线形图图表类
  LineChartModel,// 线形图配置构建类
  LimitLine, // 图表LimitLine
  LimitLabelPosition, // 图表的LimitLine标签位置枚举类
  ChartColorStop, //颜色类
  LegendForm, //图例形状
} from '@ohos/mpchart';

// 构造数据选择监听器
  private valueSelectedListener: OnChartValueSelectedListener = {
    onValueSelected: (e: EntryOhos, h: Highlight) => {
    // ...todoSomething
    },
    onNothingSelected: () => {
    // ...todoSomething
    }
  }
  
  // 图表数据初始化
  aboutToAppear() {
  
  	// Step1:必须：初始化图表配置构建类
    this.model = new LineChartModel();
    
    // Step2:配置图表指定样式，各部件间没有先后之分
    
    // 为图表添加数据选择的监听器
    this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
	// 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
    let description: Description | null = this.model.getDescription()
    if (description) {
      description.setEnabled(false);
    }
    
	// 获取图表图例部件，设置图表图例形状为线形
    let legend: Legend | null = this.model.getLegend();
    if (legend) {
      legend.setEnabled(true);
      // draw legend entries as lines
      legend.setForm(LegendForm.LINE);
    }
    
    // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
    this.model.setMaxVisibleValueCount(60);
    
	// 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
    this.limitLine1 = new LimitLine(120, 'Upper Limit');
    this.limitLine1.setLineWidth(4);
    //设置虚线样式
    this.limitLine1.enableDashedLine(10, 10, 0);
    //设置标签位置
    this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
    this.limitLine1.setTextSize(10);

    this.limitLine2 = new LimitLine(50, 'Lower Limit');
    this.limitLine2.setLineWidth(4);
    this.limitLine2.enableDashedLine(10, 10, 0);
    this.limitLine2.setLineColor(Color.Yellow);
    this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
    this.limitLine2.setTextSize(10);

    // 设置图表左Y轴信息
    this.leftAxis = this.model.getAxisLeft();
    if (this.leftAxis) {
      //设置绘制标签个数
      this.leftAxis.setLabelCount(8, false);
      //设置标签位置
      this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART)
      //设置距离顶部距离
      this.leftAxis.setSpaceTop(15);
      //设置最大值
      this.leftAxis.setAxisMinimum(0);
      //设置最小值
      this.leftAxis.setAxisMaximum(200);
    }

	// 设置图表右Y轴信息
    this.rightAxis = this.model.getAxisRight();
    if (this.rightAxis) {
      this.rightAxis.setLabelCount(8, false);
      this.rightAxis.setDrawGridLines(false);
      this.rightAxis.setSpaceTop(15);
      this.rightAxis.setAxisMinimum(0);
      this.rightAxis.setAxisMaximum(200);
      this.rightAxis.setEnabled(false);
    }
    
	// 设置X轴信息
        this.xAxis = this.model.getXAxis();
    if (this.xAxis) {
      this.xAxis.setPosition(XAxisPosition.BOTTOM);
      this.xAxis.setDrawGridLines(false);
      this.xAxis.setGranularity(1);
      this.xAxis.setLabelCount(7);
    }
    
	// 为图表设置markerView
    this.normalMarker = new MarkerView();
    this.model.setMarker(this.normalMarker);
    // 也可设置定义图表MarkerView
    this.stackMarker = new CustomMarkerView();
    // 生成图表数据
    let lineData: LineData = this.getLineData();
    // 将数据与图表配置类绑定
    this.model.setData(lineData);
    // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据
    this.model.setVisibleXRangeMaximum(20);
  }

   private getLineData(): LineData {

    let start: number = 1;
    let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
    for (let i = start; i < 20; i++) {
      let val = Number(Math.random() * 141);

      if (Math.random() * 100 < 25) {
        values.add(new EntryOhos(i, val));
      } else {
        values.add(new EntryOhos(i, val));
      }
    }

    this.dataSet = new LineDataSet(values, 'DataSet');
    this.dataSet.setHighLightColor(Color.Black);
    this.dataSet.setDrawIcons(false);

    this.dataSet.setMode(Mode.LINEAR); //直线模式
    this.dataSet.setDrawCircles(true); //折线点画圆圈
    this.dataSet.setDrawCircleHole(false); //设置内部孔
    this.dataSet.setColorByColor(Color.Black); //设置折线颜色

    //渐变色填充
    let gradientFillColor = new JArrayList<ChartColorStop>();
    gradientFillColor.add(["#0C0099CC", 0.2]);
    gradientFillColor.add(["#7F0099CC", 0.4]);
    gradientFillColor.add(["#0099CC", 1.0]);
    this.dataSet.setGradientFillColor(gradientFillColor);
    this.dataSet.setDrawFilled(true);


    // 设置数据点的颜色
    this.dataSet.setCircleColor(Color.Blue); // 可以设置为想要的颜色

    // 设置数据点的半径
    this.dataSet.setCircleRadius(4); // 设置半径大小
    this.dataSet.setCircleHoleRadius(2); //设置内径

    let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
    dataSetList.add(this.dataSet);

    let lineData: LineData = new LineData(dataSetList);
    return lineData
  }
  

// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过lineData.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
LineChart({ model: this.model })
  .width('100%')
  .height('30%')

   import {
     ChartGesture,         // 图表手势
     ColorTemplate,        // 颜色模板
     EntryOhos,            // 图表数据结构基础类
     Highlight,            // 高亮
     IPieDataSet,          // 饼状图数据集接口
     JArrayList,           // 工具类：数据集合
     Legend,               // 图表Legend(图例)部件
     MPPointF,             // MPPointF
     OnChartGestureListener,   // 图表手势监听器接口
     OnChartValueSelectedListener,  // 图表数值选择监听器接口
     PieChart,             // 饼状图组件
     PieChartModel,        // 饼状图配置构建类
     PieData,              // 饼状图数据包
     PieDataSet,           // 饼状图数据集合
     PieEntry,             // 饼状图数据结构
   } from '@ohos/mpchart';
  
  // 图表数据初始化
  
  // Step1:必须：初始化图表配置构建类
  private model: PieChartModel = new PieChartModel();
    
  aboutToAppear() {
    // Step2：配置图表的特定样式，各部件间没有先后之分

    let l: Legend | null = this.model.getLegend();
    if (l) {
      l.setEnabled(true);
    }
    this.model.animateX(1000);  // 启用X轴动画效果，动画持续时间为1000毫秒
    this.model.setUsePercentValues(true);  // 使用百分比值
    this.model.getDescription()?.setEnabled(false);  // 禁用描述信息
    this.model.setExtraOffsets(5, 10, 5, 5);  // 设置额外偏移量

    this.model.setOnChartGestureListener(this.chartGestureListener);  // 设置图表手势监听器

    this.model.setDragDecelerationFrictionCoef(0.95);  // 设置拖动减速摩擦系数

    this.model.setCenterText("mpchart");  // 设置中心文本
    this.model.setCenterTextSize(22);  // 设置中心文本大小

    this.model.setDrawHoleEnabled(true);  // 启用绘制中心孔
    this.model.setHoleColor(Color.White);  // 设置中心孔颜色

    this.model.setTransparentCircleColor(Color.Red);  // 设置透明圆环颜色
    this.model.setTransparentCircleAlpha(110);  // 设置透明圆环透明度

    this.model.setHoleRadius(58);  // 设置中心孔半径
    this.model.setTransparentCircleRadius(61);  // 设置透明圆环半径

    this.model.setDrawCenterText(true);  // 绘制中心文本

    this.model.setRotationAngle(0);  // 设置旋转角度
    // 通过触摸启用图表的旋转
    this.model.setRotationEnabled(true);
    this.model.setHighlightPerTapEnabled(true);  // 启用点击高亮效果

    this.setData(4, 10);  // 设置图表数据
  }

   // 初始化饼状图数据
  private setData(count: number, range: number): void {
    let entries: JArrayList<PieEntry> = new JArrayList<PieEntry>();

    // NOTE: The order of the entries when being added to the entries array determines their position around the center of
    // the chart.
    for (let i = 0; i < count; i++) {
      entries.add(new PieEntry(((Math.random() * range) + range / 5),
        this.parties[i % this.parties.length], undefined, undefined));
    }

    // 创建饼状图数据集对象，设置数据项和数据集名称
    let dataSet: PieDataSet = new PieDataSet(entries, "Election Results");
    // 设置是否绘制数据项图标
    dataSet.setDrawIcons(false);
    // 设置数据项之间的间隙
    dataSet.setSliceSpace(1);
    // 设置数据项图标的偏移量
    dataSet.setIconsOffset(new MPPointF(0, 40));
    // 设置选中时数据项的偏移距离
    dataSet.setSelectionShift(5);
    // 设置数据项文本颜色
    dataSet.setValueTextColor(Color.White);


    // add a lot of colors
    let colors: JArrayList<number> = new JArrayList();
    for (let index = 0; index < ColorTemplate.VORDIPLOM_COLORS.length; index++) {
      colors.add(ColorTemplate.VORDIPLOM_COLORS[index]);
    }

    for (let index = 0; index < ColorTemplate.JOYFUL_COLORS.length; index++) {
      colors.add(ColorTemplate.JOYFUL_COLORS[index]);
    }

    for (let index = 0; index < ColorTemplate.COLORFUL_COLORS.length; index++) {
      colors.add(ColorTemplate.COLORFUL_COLORS[index]);
    }
    for (let index = 0; index < ColorTemplate.LIBERTY_COLORS.length; index++) {
      colors.add(ColorTemplate.LIBERTY_COLORS[index]);
    }
    for (let index = 0; index < ColorTemplate.PASTEL_COLORS.length; index++) {
      colors.add(ColorTemplate.PASTEL_COLORS[index]);
    }
    colors.add(ColorTemplate.getHoloBlue());
    dataSet.setColorsByList(colors);
    // 生成图表数据
    let data: PieData = new PieData(dataSet);
    // 将数据与图表配置类绑定
    this.model.setData(data);
  }
  

// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过dataSet.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
PieChart({ model: this.model })
  .width('100%')
  .height('70%')

   // 导入一些图表相关的组件和类
   import {
     JArrayList,  //工具类：数据集合
     XAxis,  // 图表X轴部件
     XAxisPosition,  // 图表X轴标签位置枚举类
     YAxis,  // 图表Y轴部件
     Description,  // 图表的描述信息
     Legend,  // 图例
     OnChartValueSelectedListener,  // 图表数值选中的监听器
     Highlight,  // 高亮显示
     EntryOhos,  // 图表数据结构基础类
     YAxisLabelPosition,  // 图表Y轴标签位置枚举类
     BubbleEntry,  // 气泡图数据结构
     ChartPixelMap,  // 图表像素映射
     IBubbleDataSet,  // 气泡图数据集的接口
     BubbleDataSet,  // 气泡图数据集
     MPPointF,  // MPPonitF
     BubbleChart,  // 气泡图组件
     BubbleChartModel,  // 气泡图配置构建类
     BubbleData  // 气泡图数据
   } from '@ohos/mpchart';
  
  // 构造数据选择监听器
  private valueSelectedListener: OnChartValueSelectedListener = {
    onValueSelected: (e: EntryOhos, h: Highlight) => {
    // ...todoSomething
    },
    onNothingSelected: () => {
    // ...todoSomething
    }
  }
  
  // 图表数据初始化
  private model: BubbleChartModel | null = null;
    
  aboutToAppear() {
    // Step1:必须：初始化图表配置构建类
    this.model = new BubbleChartModel();
    // Step2：配置图表的特定样式，各部件间没有先后之分

    //设置图例
    let l: Legend | null = this.model.getLegend();
    if (l) {
      l.setEnabled(true);
    }
    
    //设置描述
    let description: Description | null = this.model.getDescription();
    if (description) {
      description.setEnabled(false);
    }

    // 设置最大可见条目数量为60
   this.model.setMaxVisibleValueCount(60);
   
   // 禁用x和y轴方向同时缩放，但是可以单独x轴方向或者y轴方向缩放
   this.model.setPinchZoom(false);
   
   // 获取X轴对象
   let xAxis: XAxis | null = this.model.getXAxis();
   if (xAxis) {
     // 设置X轴位置在底部
     xAxis.setPosition(XAxisPosition.BOTTOM);
     
     // 不绘制X轴网格线
     xAxis.setDrawGridLines(false);
   
     // 设置X轴坐标的最小间隔为1
     xAxis.setGranularity(1);
   
     // 设置X轴标签数量为7
     xAxis.setLabelCount(7);
   }
   
   // 获取左侧Y轴对象
   let leftAxis: YAxis | null = this.model.getAxisLeft();
   if (leftAxis) {
     // 设置左侧Y轴标签数量为8，不强制使用整数标签
     leftAxis.setLabelCount(8, false);
     
     // 设置左侧Y轴标签位置在图表外部
     leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
     
     // 设置顶部空白区域为15个单位
     leftAxis.setSpaceTop(15);
     
     // 设置左侧Y轴的最小值为0
     leftAxis.setAxisMinimum(0);
   }
   
   // 获取右侧Y轴对象
   let rightAxis: YAxis | null = this.model.getAxisRight();
   if (rightAxis) {
     // 设置右侧Y轴标签数量为8，不强制使用整数标签
     rightAxis.setLabelCount(8, false);
     
     // 不绘制右侧Y轴网格线
     rightAxis.setDrawGridLines(false);
     
     // 设置顶部空白区域为15个单位
     rightAxis.setSpaceTop(15);
     
     // 设置右侧Y轴的最小值为0
     rightAxis.setAxisMinimum(0);
   }
   
   // 初始化起始值为1
   let start: number = 1;
   
   // 创建气泡图数据集
   let values: JArrayList<BubbleEntry> = new JArrayList<BubbleEntry>();
   for (let i = start; i < 20; i++) {
     // 生成随机值（0到40之间）
     let val = Number(Math.random() * 41);
   
     // 按照一定概率添加气泡数据
     if (Math.random() * 100 < 25) {
       values.add(new BubbleEntry(i, val));
     } else {
       values.add(new BubbleEntry(i, val));
     }
   }
   
   // 创建气泡图数据集
   let dataSet: BubbleDataSet = new BubbleDataSet(values, 'DataSet');
   dataSet.setHighLightColor(Color.Black);
   dataSet.setDrawIcons(false);
   
   // 创建气泡图数据集列表
   let dataSetList: JArrayList<IBubbleDataSet> = new JArrayList<IBubbleDataSet>();
   dataSetList.add(dataSet);
   
   // 设置图表数据
   this.setData(5, 50);
   
   // 设置图表最大的X轴显示范围为7个单位
   this.model.setVisibleXRangeMaximum(7);

  }

   // 初始化气泡图数据
     /**
    * 设置气泡图表的数据
    * @param count 数据点的数量
    * @param range 数据点的范围
    */
   private setData(count: number, range: number): void {

    // 创建三个气泡图数据集
    let values1 = new JArrayList<BubbleEntry>();
    let values2 = new JArrayList<BubbleEntry>();
    let values3 = new JArrayList<BubbleEntry>();
    
    // 创建图标绘制对象
    let imgePaint: ChartPixelMap = new ChartPixelMap();

    // 设置图标的宽度和高度
    imgePaint.setWidth(32);
    imgePaint.setHeight(32);

    // 循环生成数据点
    for (let i = 0; i < count; i++) {
      // 向数据集添加带有图标的气泡数据点
      values1.add(new BubbleEntry(i, Math.random() * range, Math.random() * range, imgePaint));
      values2.add(new BubbleEntry(i, Math.random() * range, Math.random() * range, imgePaint));
      
      // 向数据集添加不带图标的气泡数据点
      values3.add(new BubbleEntry(i, Math.random() * range, Math.random() * range));
    }

    // 创建气泡数据集1
    let set1: BubbleDataSet = new BubbleDataSet(values1, "DS 1");
    set1.setDrawIcons(false);
    set1.setColorByColor(0x88c12552);
    set1.setIconsOffset(new MPPointF(0, 0));
    set1.setDrawValues(this.isDrawValuesEnable);

    // 创建气泡数据集2
    let set2: BubbleDataSet = new BubbleDataSet(values2, "DS 2");
    set2.setDrawIcons(false);
    set2.setIconsOffset(new MPPointF(0, 0));
    set2.setColorByColor(0x88ff6600);
    set2.setDrawValues(this.isDrawValuesEnable);

    // 创建气泡数据集3
    let set3: BubbleDataSet = new BubbleDataSet(values3, "DS 3");
    set3.setDrawIcons(false);
    set3.setIconsOffset(new MPPointF(0, 0));
    set3.setColorByColor(0x88f5c700);
    set3.setDrawValues(this.isDrawValuesEnable);

    // 创建气泡图数据集列表
    let dataSets = new JArrayList<IBubbleDataSet>();
    dataSets.add(set1);
    dataSets.add(set2);
    dataSets.add(set3);

    // 创建气泡图数据对象
    let dataResult: BubbleData = new BubbleData(dataSets);
    dataResult.setDrawValues(this.isDrawValuesEnable);
    dataResult.setValueTextSize(8);
    dataResult.setValueTextColor(Color.White);
    dataResult.setHighlightCircleWidth(1.5);
    dataResult.setHighlightEnabled(true);
    dataResult.notifyDataChanged();

    // 如果存在图表模型，则设置图表数据
    if (this.model) {
      this.model.setData(dataResult);
    }
   }  
  

// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过dataResult.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
BubbleChart({ model: this.model })
  .width('100%')
  .height('70%')

   // 导入一些图表相关的组件和类
   import {
     AxisDependency, // 轴依赖类
     CandleData, // 蜡烛图数据包
     CandleDataSet, // 蜡烛图数据集合
     CandleEntry, // 蜡烛图数据结构
     CandleStickChart, // 蜡烛图图表类
     CandleStickChartModel, // 蜡烛图配置构建类
     ChartPixelMap, // 图表像素映射类
     Description, // 图表Description(描述)部件
     JArrayList, // 工具类：数据集合
     Legend, // 图表Legend(图例)部件
     Style, // 图表样式类
     XAxis, // 图表X轴部件
     XAxisPosition, // 图表X轴标签位置枚举类
     YAxis // 图表Y轴部件
   } from '@ohos/mpchart';
    
  aboutToAppear() {
    // 图表数据初始化
    // Step1:必须：初始化图表配置构建类
    this.model = new CandleStickChartModel();
    
    // Step2：配置图表的特定样式，各部件间没有先后之分
    //设置描述
    let description: Description | null = this.model.getDescription();
    if (description) {
      description.setEnabled(false);
    }

    //设置图例
    let l: Legend | null = this.model.getLegend();
    if (l) {
      l.setEnabled(true);
    }
    
      this.model.setMaxVisibleValueCount(60);  // 设置图表最大可见数值数量为60
      this.model.setPinchZoom(false);  // 禁用捏合缩放
      this.model.setDrawGridBackground(true);  // 启用绘制网格背景
      this.model.setGridBackgroundColor(Color.White);  // 设置网格背景颜色为白色
      this.setData(40, 100);  // 设置图表数据
      
      let xAxis: XAxis | null = this.model.getXAxis();
      if (xAxis) {
        xAxis.setPosition(XAxisPosition.BOTTOM);  // 设置X轴位置在底部
        xAxis.setDrawGridLines(true);  // 启用绘制X轴网格线
      }
      
      let leftAxis: YAxis | null = this.model.getAxisLeft();
      if (leftAxis) {
        leftAxis.setLabelCount(7, false);  // 设置左侧Y轴标签数量为7，不强制使用整数标签
        leftAxis.setDrawGridLines(true);  // 启用绘制左侧Y轴网格线
        leftAxis.setDrawAxisLine(true);  // 启用绘制左侧Y轴轴线
      }
      
      let rightAxis: YAxis | null = this.model.getAxisRight();
      if (rightAxis) {
        rightAxis.setLabelCount(7, false);  // 设置右侧Y轴标签数量为7，不强制使用整数标签
        rightAxis.setDrawGridLines(true);  // 启用绘制右侧Y轴网格线
        rightAxis.setDrawAxisLine(true);  // 启用绘制右侧Y轴轴线
      }
      
      let legend: Legend | null = this.model.getLegend();
      if (legend) {
        legend.setEnabled(true);  // 启用图例
      }
  }

   // 初始化蜡烛图数据
    private setData(count: number, range: number):void{

    let values: JArrayList<CandleEntry> = new JArrayList<CandleEntry>();

    for (let i = 0; i < count; i++) {
      let val: number = (Math.random() * 40) + (range + 3);

      let high: number = Number(Math.random() * 9) + 8.0;
      let low: number = Number(Math.random() * 9) + 8.0;

      let open: number = Number(Math.random() * 6) + 1.0;
      let close: number = Number(Math.random() * 6) + 1.0;

      let even: boolean = i % 2 == 0;

      values.add(new CandleEntry(
        i,
        val + high,
        val - low,
        even ? val + open : val - open,
        even ? val - close : val + close,
        new ChartPixelMap()));
    }

      // 创建蜡烛图数据集，并设置数据集的名称为 "Data Set"
      let dataSet: CandleDataSet = new CandleDataSet(values, "Data Set");
      // 设置是否绘制图标为 false
      dataSet.setDrawIcons(false);
      // 设置数据集的轴依赖为左侧Y轴
      dataSet.setAxisDependency(AxisDependency.LEFT);
      // 设置蜡烛图阴影颜色为灰色
      dataSet.setShadowColor(Color.Gray);
      // 设置蜡烛图阴影宽度为 0.7
      dataSet.setShadowWidth(0.7);
      // 设置蜡烛图下跌蜡烛的绘制样式为填充
      dataSet.setDecreasingPaintStyle(Style.FILL);
      // 设置蜡烛图下跌蜡烛的颜色为红色
      dataSet.setDecreasingColor(Color.Red);
      // 设置蜡烛图上涨蜡烛的颜色为绿色
      dataSet.setIncreasingColor(Color.Green);
      // 设置蜡烛图上涨蜡烛的绘制样式为描边
      dataSet.setIncreasingPaintStyle(Style.STROKE);
      // 设置蜡烛图中性蜡烛的颜色为蓝色
      dataSet.setNeutralColor(Color.Blue);

    let data: CandleData = new CandleData([dataSet]);
    data.setValueTextSize(7);
    if (this.model) {
      this.model.resetTracking();
      this.model.setData(data);
    }
  }
  

   // 导入一些图表相关的组件和类
   import {
     ColorTemplate,  // 颜色模板
     CombinedChart,  // 组合图表类
     CombinedChartModel,  // 组合图表配置构建类
     CombinedData,  // 组合图表数据包
     EntryOhos,  // 图表数据结构基础类
     JArrayList,  // 工具类：数据集合
     LineData,  // 折线图数据包
     LineDataSet,  // 折线图数据集合
     Color,  // 颜色类
     Mode,  // 图表模式枚举类
     AxisDependency,  // 轴依赖类
     BarEntry,  // 柱状图数据结构
     BarData,  // 柱状图数据包
     BarDataSet,  // 柱状图数据集合
     IBarDataSet,  // 柱状图数据集合的操作类
     ScatterData,  // 散点图数据包
     ScatterDataSet,  // 散点图数据集合
     CandleData,  // 蜡烛图数据包
     CandleEntry,  // 蜡烛图数据结构
     CandleDataSet,  // 蜡烛图数据集合
     BubbleData,  // 气泡图数据包
     BubbleEntry,  // 气泡图数据结构
     BubbleDataSet,  // 气泡图数据集合
     YAxisLabelPosition,  // 图表Y轴标签位置枚举类
     XAxisPosition,  // 图表X轴标签位置枚举类
     XAxis,  // 图表X轴部件
     YAxis,  // 图表Y轴部件
     LegendHorizontalAlignment,  // 图例水平对齐方式枚举类
     LegendVerticalAlignment  // 图例垂直对齐方式枚举类
   } from '@ohos/mpchart';

   // Step1:必须：初始化图表配置构建类
   private model: CombinedChartModel = new CombinedChartModel();
    
   aboutToAppear() {
    // Step2：配置图表的特定样式，各部件间没有先后之分
    
    // 禁用图表描述
    this.model.getDescription()?.setEnabled(false);

    // 获取图例对象
    let l = this.model.getLegend();
    if (l) {
      // 启用图例
      l.setEnabled(true);
      
      // 启用图例文字自动换行
      l.setWordWrapEnabled(true);
      
      // 设置图例水平对齐方式为左侧
      l.setHorizontalAlignment(LegendHorizontalAlignment.LEFT);
      
      // 设置图例垂直对齐方式为底部
      l.setVerticalAlignment(LegendVerticalAlignment.BOTTOM);
      
      // 设置图例不绘制在图表内部
      l.setDrawInside(false);
    }

    // 设置图表最大可见数值数量为60
    this.model.setMaxVisibleValueCount(60);

    // 禁用图表的捏合缩放功能
    this.model.setPinchZoom(false);

    // 禁用图表绘制网格背景
    this.model.setDrawGridBackground(false);

    // 获取X轴对象
    let xAxis: XAxis | null = this.model.getXAxis();
    if (xAxis) {
      // 设置X轴位置在底部
      xAxis.setPosition(XAxisPosition.BOTTOM);
      
      // 不绘制X轴网格线
      xAxis.setDrawGridLines(false);
      
      // 设置X轴坐标的最小间隔为1
      xAxis.setGranularity(1);
      
      // 设置X轴标签数量为7
      xAxis.setLabelCount(7);
    }

    // 获取左侧Y轴对象
    let leftAxis: YAxis | null = this.model.getAxisLeft();
    if (leftAxis) {
      // 设置左侧Y轴标签数量为8，不强制使用整数标签
      leftAxis.setLabelCount(8, false);
      
      // 设置左侧Y轴标签位置在图表外部
      leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
      
      // 设置顶部空白区域为15个单位
      leftAxis.setSpaceTop(15);
      
      // 设置左侧Y轴的最小值为0
      leftAxis.setAxisMinimum(0);
    }

    // 获取右侧Y轴对象
    let rightAxis: YAxis | null = this.model.getAxisRight();
    if (rightAxis) {
      // 设置右侧Y轴标签数量为8，不强制使用整数标签
      rightAxis.setLabelCount(8, false);
      
      // 不绘制右侧Y轴网格线
      rightAxis.setDrawGridLines(false);
      
      // 设置顶部空白区域为15个单位
      rightAxis.setSpaceTop(15);
      
      // 设置右侧Y轴的最小值为0
      rightAxis.setAxisMinimum(0);
    }

    // 创建组合图表数据对象
    let data: CombinedData = new CombinedData();
    
    // 生成线形图数据
    this.generateLineData(data);
    
    // 生成柱状图数据
    this.generateBarData(data);
    
    // 生成气泡图数据
    this.generateBubbleData(data);
    
    // 生成散点图数据
    this.generateScatterData(data);
    
    // 生成蜡烛图数据
    this.generateCandleData(data);
    
    // 设置图表数据
    this.model.setData(data);
  }

   // 生成线形图数据
    private generateLineData(data: CombinedData): void {

    let d: LineData = new LineData();

    let entries: JArrayList<EntryOhos> = new JArrayList();

    for (let index = 0; index < this.count; index++) {

      entries.add(new EntryOhos(index + 0.5, this.getRandom(15, 5)));
    }

    let set: LineDataSet = new LineDataSet(entries, "Line DataSet");
    set.setColorByColor(Color.rgb(240, 238, 70));
    set.setLineWidth(2.5);
    set.setCircleColor(Color.rgb(240, 238, 70));
    set.setCircleRadius(5);
    set.setFillColor(Color.rgb(240, 238, 70));
    set.setMode(Mode.CUBIC_BEZIER);
    set.setDrawValues(true);
    set.setValueTextSize(10);
    set.setValueTextColor(Color.rgb(240, 238, 70));

    set.setAxisDependency(AxisDependency.LEFT);
    d.addDataSet(set);
    data.setLineData(d);

  }
  
  // 生成柱状图数据
  private generateBarData(data: CombinedData): void {

    let entries1: JArrayList<BarEntry> = new JArrayList();
    let entries2: JArrayList<BarEntry> = new JArrayList();

    for (let index = 0; index < this.count; index++) {
      entries1.add(new BarEntry(0, this.getRandom(25, 25)));

      // stacked
      entries2.add(new BarEntry(0, [this.getRandom(13, 12), this.getRandom(13, 12)]));
    }

    let set1: BarDataSet = new BarDataSet(entries1, "Bar 1");
    set1.setColorByColor(Color.rgb(60, 220, 78));
    set1.setValueTextColor(Color.rgb(60, 220, 78));
    set1.setValueTextSize(10);
    set1.setAxisDependency(AxisDependency.LEFT);

    let set2: BarDataSet = new BarDataSet(entries2, "");
    set2.setStackLabels(["Stack 1", "Stack 2"]);
    set2.setColorsByArr([Color.rgb(61, 165, 255), Color.rgb(23, 197, 255)]);
    set2.setValueTextColor(Color.rgb(61, 165, 255));
    set2.setValueTextSize(10);
    set2.setAxisDependency(AxisDependency.LEFT);

    let groupSpace = 0.06;
    let barSpace = 0.02; // x2 dataset
    let barWidth = 0.45; // x2 dataset
    // (0.45 + 0.02) * 2 + 0.06 = 1.00 -> interval per "group"

    let set: JArrayList<IBarDataSet> = new JArrayList();
    set.add(set1);
    set.add(set2);
    let d: BarData = new BarData(set);
    d.setBarWidth(barWidth);

    // make this BarData object grouped
    d.groupBars(0, groupSpace, barSpace); // start at x = 0
    data.setBarData(d);

  }

  // 生成散点图数据
  private generateScatterData(data: CombinedData): void {

    let d: ScatterData = new ScatterData();

    let entries: JArrayList<EntryOhos> = new JArrayList();

    for (let index = 0; index < this.count; index += 0.5)
      entries.add(new EntryOhos(index + 0.25, this.getRandom(10, 55)));

    let set: ScatterDataSet = new ScatterDataSet(entries, "Scatter DataSet");
    set.setColorsByArr(ColorTemplate.MATERIAL_COLORS);
    set.setScatterShapeSize(7.5);
    set.setDrawValues(false);
    set.setValueTextSize(10);
    d.addDataSet(set);
    data.setScatterData(d);
  }

   // 生成蜡烛图数据
  private generateCandleData(data: CombinedData): void {

    let d: CandleData = new CandleData();

    let entries: JArrayList<CandleEntry> = new JArrayList();

    for (let index = 0; index < this.count; index += 2) {

      entries.add(new CandleEntry(index + 1, 90, 70, 85, 75));
    }

    let set: CandleDataSet = new CandleDataSet(entries, "Candle DataSet");
    set.setDecreasingColor(Color.rgb(142, 150, 175));
    set.setShadowColor(ColorTemplate.DKGRAY);
    set.setBarSpace(0.3);
    set.setValueTextSize(10);
    set.setDrawValues(false);
    d.addDataSet(set);
    data.setCandleData(d);
  }

  //生成气泡图数据
  private generateBubbleData(data: CombinedData): void {

    let bd: BubbleData = new BubbleData();

    let entries: JArrayList<BubbleEntry> = new JArrayList();

    for (let index = 0; index < this.count; index++) {
      let y = this.getRandom(10, 105);
      let size = this.getRandom(20, 30);
      entries.add(new BubbleEntry(index + 0.5, y, size));
    }

    let set: BubbleDataSet = new BubbleDataSet(entries, "Bubble DataSet");
    set.setColorsByArr(ColorTemplate.VORDIPLOM_COLORS);
    set.setValueTextSize(10);
    set.setValueTextColor(Color.rgb(255, 255, 255));
    set.setHighlightCircleWidth(1.5);
    set.setDrawValues(true);
    bd.addDataSet(set);
    data.setBubbleData(bd);
  }
  //生成随机数据
  getRandom(range: number, start: number): number {
    return (Math.random() * range) + start;
  }

// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过data.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
CombinedChart({ model: this.model })
  .width('100%')
  .height('70%')

   // 导入一些图表相关的组件和类
   import {
     ChartColor,  // 图表颜色类
     JArrayList,  // 工具类：数据集合
     XAxis,  // 图表X轴部件
     XAxisPosition,  // 图表X轴标签位置枚举类
     Description,  // 图表Description(描述)部件
     Legend,  // 图表Legend(图例)部件
     OnChartValueSelectedListener,  // 数据选择监听
     Highlight,  // 图表高亮数据
     EntryOhos,  // 图表数据结构基础类
     RadarEntry,  // 雷达图数据结构
     RadarChart,  // 雷达图图表类
     RadarDataSet,  // 雷达图数据集合
     RadarChartModel,  // 雷达图配置构建类
     IRadarDataSet,  // 雷达图数据集合的操作类
     RadarData,  // 雷达图数据包
     YAxis,  // 图表Y轴部件
     IAxisValueFormatter,  // 轴数值格式化接口
     AxisBase,  // 轴基础类
     LegendVerticalAlignment,  // 图例垂直对齐方式枚举类
     LegendHorizontalAlignment,  // 图例水平对齐方式枚举类
     LegendOrientation,  // 图例方向枚举类
   } from '@ohos/mpchart';
    
    // Step1:必须：初始化图表配置构建类
    private model: RadarChartModel = new RadarChartModel();
    
   aboutToAppear() {
    // Step2：配置图表的特定样式，各部件间没有先后之分
    // 设置雷达图数值选择监听器
    this.model.setOnChartValueSelectedListener(this.valueSelectedListener);

    // 获取图表描述对象
    let description: Description | null = this.model.getDescription();
    if (description) {
      // 禁用图表描述
      description.setEnabled(false);
    }

    // 获取图例对象
    let l: Legend | null = this.model.getLegend();
    if (l) {
      // 启用图例
      l.setEnabled(true);
      
      // 设置图例垂直对齐方式为顶部
      l.setVerticalAlignment(LegendVerticalAlignment.TOP);
      
      // 设置图例水平对齐方式为居中
      l.setHorizontalAlignment(LegendHorizontalAlignment.CENTER);
      
      // 设置图例方向为水平
      l.setOrientation(LegendOrientation.HORIZONTAL);
      
      // 设置图例不绘制在图表内部
      l.setDrawInside(false);
      
      // 设置图例X轴方向间隔
      l.setXEntrySpace(7);
      
      // 设置图例Y轴方向间隔
      l.setYEntrySpace(5);
      
      // 设置图例文字颜色为白色
      l.setTextColor(Color.White);
    }

    // 设置雷达图网格线宽度、颜色和透明度
    this.model.setWebLineWidth(0.3);
    this.model.setWebColor(0xFFCCCCCC);
    this.model.setWebLineWidthInner(0.3);
    this.model.setWebColorInner(0xFFCCCCCC);
    this.model.setWebAlpha(100);

    // 设置雷达图顶部的额外偏移量
    this.model.setExtraTopOffset(-100);

    // 创建雷达图标记视图对象
    this.normalMarker = new RadarMarkerView();
    
    // 设置雷达图标记
    this.model.setMarker(this.normalMarker);

    // 获取X轴对象
    let xAxis: XAxis | null = this.model.getXAxis();
    if (xAxis) {
      // 设置X轴位置在底部
      xAxis.setPosition(XAxisPosition.BOTTOM);
      
      // 不绘制X轴网格线
      xAxis.setDrawGridLines(false);
      
      // 设置X轴标签文字大小
      xAxis.setTextSize(20);
      
      // 设置X轴Y轴方向的偏移量
      xAxis.setYOffset(0);
      xAxis.setXOffset(0);
      
      // 设置X轴坐标的最小间隔为1
      xAxis.setGranularity(1);
      
      // 设置X轴标签数量为7
      xAxis.setLabelCount(7);
      
      // 设置X轴数值格式化器
      xAxis.setValueFormatter(new valueFormatter());
      
      // 设置X轴标签文字颜色为白色
      xAxis.setTextColor(Color.White);
    }

    // 获取Y轴对象
    let yAxis: YAxis | null = this.model.getYAxis();
    if (yAxis) {
      // 设置Y轴标签数量为5，不强制使用整数标签
      yAxis.setLabelCount(5, false);
      
      // 设置Y轴标签文字大小
      yAxis.setTextSize(20);
      
      // 设置Y轴的最小值为0
      yAxis.setAxisMinimum(0);
      
      // 设置Y轴的最大值为80
      yAxis.setAxisMaximum(80);
      
      // 不绘制Y轴标签
      yAxis.setDrawLabels(false);
    }

    // 设置雷达图数据
    this.setData();
  }

   /**
   * 设置雷达图的数据
   */
   private setData(): void {
    let mul = 80;  // 随机值的放大倍数
    let min = 20;  // 随机值的最小基准
    let cnt = 5;   // 数据点数量

    // 创建雷达图数据点集合
    let entries1: JArrayList<RadarEntry> = new JArrayList<RadarEntry>();
    let entries2: JArrayList<RadarEntry> = new JArrayList<RadarEntry>();

    // 注意: 将数据点添加到数据点数组中的顺序决定它们在图表中心周围的位置。
    for (let i = 0; i < cnt; i++) {
      let val1 = (Math.random() * mul) + min;
      entries1.add(new RadarEntry(val1));

      let val2 = (Math.random() * mul) + min;
      entries2.add(new RadarEntry(val2));
    }

    // 创建雷达图数据集
    let set1: RadarDataSet = new RadarDataSet(entries1, "Last Week");
    set1.setColorByColor(ChartColor.rgb(103, 110, 129));
    set1.setFillColor(ChartColor.rgb(103, 110, 129));
    set1.setDrawFilled(true);
    set1.setFillAlpha(180);
    set1.setLineWidth(2);
    set1.setDrawHighlightCircleEnabled(true);
    set1.setDrawHighlightIndicators(false);

    // 创建雷达图数据集
    let set2: RadarDataSet = new RadarDataSet(entries2, "This Week");
    set2.setColorByColor(ChartColor.rgb(121, 162, 175));
    set2.setFillColor(ChartColor.rgb(121, 162, 175));
    set2.setDrawFilled(true);
    set2.setFillAlpha(180);
    set2.setLineWidth(2);
    set2.setDrawHighlightCircleEnabled(true);
    set2.setDrawHighlightIndicators(false);

    // 创建雷达图数据集合
    let sets: JArrayList<IRadarDataSet> = new JArrayList<IRadarDataSet>();
    sets.add(set1);
    sets.add(set2);

    // 创建雷达图数据对象
    let data: RadarData = new RadarData(sets);
    data.setValueTextSize(20);
    
    // 不绘制数据值
    data.setDrawValues(false);
    
    // 设置数据值文字颜色为白色
    data.setValueTextColor(Color.White);
    
    // 设置图表数据
    this.model.setData(data);
   }

// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过data.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
RadarChart({ model: this.model })
  .width('100%')
  .height('70%')

   // 导入一些图表相关的组件和类
   import {
     JArrayList,  // 工具类：数据集合
     XAxis,  // 图表X轴部件
     XAxisPosition,  // 图表X轴标签位置枚举类
     YAxis,  // 图表Y轴部件
     Description,  // 图表Description(描述)部件
     Legend,  // 图表Legend(图例)部件
     OnChartValueSelectedListener,  // 数据选择监听
     Highlight,  // 图表高亮数据
     EntryOhos,  // 图表数据结构基础类
     YAxisLabelPosition,  // 图表Y轴标签位置枚举类
     ScatterChart,  // 散点图图表类
     ScatterChartModel,  // 散点图配置构建类
     ScatterData,  // 散点图数据包
     ScatterDataSet,  // 散点图数据集合
     IScatterDataSet,  // 散点图数据集合的操作类
     ColorTemplate,  // 颜色模板
     ChartShape,  // 图表形状枚举类
   } from '@ohos/mpchart';

    
   aboutToAppear() {
    // Step1:必须：初始化图表配置构建类
    this.model = new ScatterChartModel();

    // Step2：配置图表的特定样式，各部件间没有先后之分
    // 获取图例对象
    let l: Legend | null = this.model.getLegend();
    if (l) {
      // 启用图例
      l.setEnabled(true);
    }
    
    // 设置散点图数值选择监听器
    this.model.setOnChartValueSelectedListener(this.valueSelectedListener);

    // 获取描述对象
    let description: Description | null = this.model.getDescription();
    if (description) {
      // 禁用图表描述
      description.setEnabled(false);
    }

    // 设置图表最大可见数值数量、是否支持缩放、是否绘制网格背景
    this.model.setMaxVisibleValueCount(160);
    this.model.setPinchZoom(false);
    this.model.setDrawGridBackground(false);

    // 获取X轴对象
    let xAxis: XAxis | null = this.model.getXAxis();
    if (xAxis) {
      // 设置X轴位置在底部
      xAxis.setPosition(XAxisPosition.BOTTOM);
      
      // 不绘制X轴网格线
      xAxis.setDrawGridLines(false);
      
      // 设置X轴坐标的最小间隔为1
      xAxis.setGranularity(1);
      
      // 设置X轴标签数量为7
      xAxis.setLabelCount(7);
    }

    // 获取左侧Y轴对象
    let leftAxis: YAxis | null = this.model.getAxisLeft();
    if (leftAxis) {
      // 设置左侧Y轴标签数量为8，不强制使用整数标签
      leftAxis.setLabelCount(8, false);
      
      // 设置左侧Y轴标签位置在图表外部
      leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
      
      // 设置左侧Y轴顶部空白区域大小
      leftAxis.setSpaceTop(15);
      
      // 设置左侧Y轴的最小值为0
      leftAxis.setAxisMinimum(0);
    }

    // 获取右侧Y轴对象
    let rightAxis: YAxis | null = this.model.getAxisRight();
    if (rightAxis) {
      // 设置右侧Y轴标签数量为8，不绘制右侧Y轴网格线
      rightAxis.setLabelCount(8, false);
      rightAxis.setDrawGridLines(false);
      
      // 设置右侧Y轴顶部空白区域大小
      rightAxis.setSpaceTop(15);
      
      // 设置右侧Y轴的最小值为0
      rightAxis.setAxisMinimum(0);
    }

    // 生成随机数据
    let start: number = 1;
    let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
    for (let i = start; i < 20; i++) {
      let val = Number(Math.random() * 41);

      if (Math.random() * 100 < 25) {
        values.add(new EntryOhos(i, val));
      } else {
        values.add(new EntryOhos(i, val));
      }
    }

    // 创建散点图数据集
    let dataSet: ScatterDataSet = new ScatterDataSet(values, 'DataSet');
    dataSet.setHighLightColor(Color.Black);
    dataSet.setDrawIcons(false);

    // 创建散点图数据集合
    let dataSetList: JArrayList<IScatterDataSet> = new JArrayList<IScatterDataSet>();
    dataSetList.add(dataSet);

    // 设置图表数据
    this.setData(20, 100);
  }
   
   /**
    * 设置散点图数据
    * @param xRange - X轴数据范围
    * @param yRange - Y轴数据范围
    */
   private setData(xRange: number, yRange: number): void {
   
       // 生成随机数据集合
       let values1 = this.generateRandomData(xRange, yRange);
       let values2 = this.generateRandomData(xRange, yRange);
       let values3 = this.generateRandomData(xRange, yRange);
   
       // 创建散点图数据集1
       let set1 = new ScatterDataSet(values1, "DS 1");
       set1.setScatterShape(ChartShape.SQUARE);
       set1.setColorByColor(ColorTemplate.COLORFUL_COLORS[0]);
   
       // 创建散点图数据集2
       let set2 = new ScatterDataSet(values2, "DS 2");
       set2.setScatterShape(ChartShape.CIRCLE);
       set2.setScatterShapeHoleColor(ColorTemplate.COLORFUL_COLORS[3]);
       set2.setScatterShapeHoleRadius(3);
       set2.setColorByColor(ColorTemplate.COLORFUL_COLORS[1]);
   
       // 创建散点图数据集3
       let set3 = new ScatterDataSet(values3, "DS 3");
       set3.setShapeRenderer(new CustomScatterShapeRenderer());
       set3.setColorByColor(ColorTemplate.COLORFUL_COLORS[2]);
   
       // 设置散点图数据集形状大小
       set1.setScatterShapeSize(8);
       set2.setScatterShapeSize(8);
       set3.setScatterShapeSize(8);
   
       // 创建散点图数据集合
       let dataSets: JArrayList<IScatterDataSet> = new JArrayList<IScatterDataSet>();
       dataSets.add(set1); // 添加数据集
       dataSets.add(set2);
       dataSets.add(set3);
   
       // 创建散点图数据
       let dataResult: ScatterData = new ScatterData(dataSets);
       dataResult.setDrawValues(this.isDrawValuesEnable);
       dataResult.setValueTextSize(8);
       dataResult.setHighlightEnabled(true);
   
       // 设置数据项文本大小
       dataResult.setValueTextSize(10);
   
       // 设置图表数据
       if (this.model) {
         this.model.setData(dataResult);
       }
   }

   /**
    * 生成随机散点图数据
    * @param xRange - X轴数据范围
    * @param yRange - Y轴数据范围
    * @returns 随机散点图数据集合
    */
   private generateRandomData(xRange: number, yRange: number): JArrayList<EntryOhos> {
       let values = new JArrayList<EntryOhos>();
   
       // 循环生成随机数据
       for (let i = 0; i < xRange; i++) {
         let x = i; // 在指定范围内生成随机X值
         let y = Math.random() * yRange; // 在指定范围内生成随机Y值
         values.add(new EntryOhos(x, y));
       }
       return values;
   }

// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过dataResult.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
ScatterChart({ model: this.model })
  .width('100%')
  .height('70%')

 import {
  WaterfallChart, // 瀑布图图表类
  WaterfallChartModel, // 瀑布图配置构建类
  BarData, // 瀑布图数据包
  WaterfallDataSet, // 瀑布图数据集合
  WaterfallEntry, // 瀑布图数据结构
  ChartGesture, // 手势事件模式
  Description, // 图表Description(描述)部件
  EntryOhos, // 图表数据结构基础类
  Fill, // 图表填充类型构建类
  Highlight, // 图表高亮数据
  IBarDataSet, // 瀑布图数据集合的操作类
  JArrayList, // 工具类：数据集合
  Legend, // 图表Legend(图例)部件
  LimitLabelPosition, // 图表的LimitLine标签位置枚举类
  LimitLine, // 图表LimitLine
  MarkerView, // 图表的Marker(标志气泡)部件
  OnChartGestureListener, // 手势事件监听
  OnChartValueSelectedListener, // 数据选择监听
  XAxis, // 图表X轴部件
  XAxisPosition, // 图表X轴标签位置枚举类
  YAxis, // 图表Y轴部件
  YAxisLabelPosition // 图表Y轴标签位置枚举类
} from '@ohos/mpchart';

   // 构造数据选择监听器
   private valueSelectedListener: OnChartValueSelectedListener = {
    onValueSelected: (e: EntryOhos, h: Highlight) => {
      LogUtil.log("SimpleWaterfallChartPage onValueSelected: " + e.getX());
    },
    onNothingSelected: () => {
      LogUtil.log("SimpleWaterfallChartPage onNothingSelected");
    }
  }
  
  // 构造手势识别事件监听器
  private chartGestureListener: OnChartGestureListener = {
    onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => {
    },
    onChartGestureEnd: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => {
    // ...todoSomething
    },
    onChartLongPressed: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
    // ...todoSomething
    },
    onChartDoubleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
    // ...todoSomething
    },
    onChartSingleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
    // ...todoSomething
    },
    onChartFling: (isTouchEvent: boolean, me1: TouchEvent | GestureEvent, me2: TouchEvent, velocityX: number, velocityY: number) => {
    // ...todoSomething
    },
    onChartScale: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, scaleX: number, scaleY: number) => {
    // ...todoSomething
    },
    onChartTranslate: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, dX: number, dY: number) => {
    // ...todoSomething
    }
  }
  
  // 图表数据初始化
  aboutToAppear() {
  
  	// Step1:必须：初始化图表配置构建类
    this.model = new WaterfallChartModel();
    
    // Step2:配置图表指定样式，各部件间没有先后之分
    
    // 为图表添加数据选择的监听器
    this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
    // 为图表添加手势识别监听器
    this.model.setOnChartGestureListener(this.chartGestureListener);
	// 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
    let description: Description | null = this.model.getDescription()
    if (description) {
      description.setEnabled(false);
    }
	// 获取图表图例部件，设置图表图例部件不可用
    let l: Legend | null = this.model.getLegend();
    if (l) {
      l.setEnabled(false);
    }
    // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
    this.model.setMaxVisibleValueCount(40);
	// 是否绘制图表的背景色，绘制范围为图表瀑布图的绘制范围，不包含轴线之外的部分
    this.model.setDrawGridBackground(false);
    // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格
    this.model.setGridBackgroundColor('#500000ff')
    // 设置不绘制瀑布图的柱体阴影背景
    this.model.setDrawBarShadow(false);
	// 设置瀑布图的数值在柱体上方
    this.model.setDrawValueAboveBar(false);
	// 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
    this.limitLine1 = new LimitLine(120, 'Upper Limit');
    this.limitLine1.setLineWidth(4);
    this.limitLine1.enableDashedLine(10, 10, 0);
    this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
    this.limitLine1.setTextSize(10);

    this.limitLine2 = new LimitLine(50, 'Lower Limit');
    this.limitLine2.setLineWidth(4);
    this.limitLine2.enableDashedLine(10, 10, 0);
    this.limitLine2.setLineColor(Color.Yellow);
    this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
    this.limitLine2.setTextSize(10);

    // 设置图表左Y轴信息
    this.leftAxis = this.model.getAxisLeft();
    if (this.leftAxis) {
      this.leftAxis.setAxisMinimum(0); // this replaces setStartAtZero(true)
      this.leftAxis.setDrawLimitLinesBehindData(false);

      // 添加LimitLines
      this.leftAxis.addLimitLine(this.limitLine1);
      this.leftAxis.addLimitLine(this.limitLine2);
    }
	// 设置图表右Y轴信息
    this.rightAxis = this.model.getAxisRight();
    if (this.rightAxis) {
      this.rightAxis.setEnabled(false);
      this.rightAxis.setAxisMinimum(0);
    }
	// 设置X轴信息
    this.xAxis = this.model.getXAxis();
    if (this.xAxis) {
      this.xAxis.setPosition(XAxisPosition.BOTTOM);
    }
	// 为图表设置markerView
    this.normalMarker = new MarkerView();
    this.model.setMarker(this.normalMarker);
    // 也可设置定义图表MarkerView
    this.stackMarker = new CustomMarkerView();
	// 生成单一颜色数据
    this.data = this.getNormalData();
    
    // 按Y轴刻度范围绘制多种颜色数据
    this.data = this.getSegmentationData();
    
    // 高亮最高点最低点数据
    this.data = this.getTopAndBottomHighlightData();
    
    // 将数据与图表配置类绑定
    this.model.setData(this.data);
    // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据
    this.model.setVisibleXRangeMaximum(20);
  }
  
   private getNormalData(): BarData {
    let values: JArrayList<WaterfallEntry> = new JArrayList<WaterfallEntry>();
    // 设置标记点位置及颜色
    let h1 = new WaterfallHighlight(20, 30, Color.Gray);
    let h2 = new WaterfallHighlight(30, 40, Color.Gray);
    let h3 = new WaterfallHighlight(40, 60, Color.Green);
    let h4 = new WaterfallHighlight(60, 70, Color.Red);

    values.add(new WaterfallEntry(1, 10, 30, undefined, undefined, h1));
    values.add(new WaterfallEntry(2, 15, 50));
    values.add(new WaterfallEntry(4, 5, 95, undefined, undefined, h2, h3, h4));
    values.add(new WaterfallEntry(6, 45, 80, undefined, undefined, h2, h3));

    this.dataSet = new WaterfallDataSet(values, 'DataSet');
    this.dataSet.setHighLightColor(Color.Gray);
    this.dataSet.setDrawIcons(false);
    // 为柱体添加颜色信息
    this.dataSet.setColorByColor(Color.Pink);
    this.dataSet.setValueTextSize(10)

    let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
    dataSetList.add(this.dataSet);

    let barData: BarData = new BarData(dataSetList);
    //设置瀑布图宽度
    barData.setBarWidth(0.3);
     //设置顶部圆角半径
    barData.setTopRadius(1);
    return barData;
  }

  private getSegmentationData(): BarData {
     let values: JArrayList<WaterfallEntry> = new JArrayList<WaterfallEntry>();

    values.add(new WaterfallEntry(1, 10, 70));
    values.add(new WaterfallEntry(2, 15, 80));

    this.dataSet = new WaterfallDataSet(values, 'DataSet');
    this.dataSet.setHighLightColor(Color.Gray);
    this.dataSet.setDrawIcons(false);
    this.dataSet.setColorByColor(Color.Pink);
    this.dataSet.setValueTextSize(10)

    // 根据Y刻度范围设置颜色
    let highlightList: WaterfallHighlight[] = [];
    highlightList.push(new WaterfallHighlight(0, 40, Color.Green));
    highlightList.push(new WaterfallHighlight(40, 60, Color.Orange));
    highlightList.push(new WaterfallHighlight(60, 100, Color.Pink));
    this.dataSet.setYAxisSegmentationColors(highlightList);

    let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
    dataSetList.add(this.dataSet);

    let barData: BarData = new BarData(dataSetList);
    barData.setBarWidth(0.3);
    return barData;
  }
  
  private getTopAndBottomHighlightData(): BarData {
    let values: JArrayList<WaterfallEntry> = new JArrayList<WaterfallEntry>();
    let highlightList: WaterfallHighlight[] = [];
    // Y刻度范围颜色设置
    highlightList.push(new WaterfallHighlight(0, 40, Color.Green));
    highlightList.push(new WaterfallHighlight(40, 60, Color.Orange));
    highlightList.push(new WaterfallHighlight(60, 100, Color.Pink));

    // 瀑布图数据封装
    values.add(new WaterfallEntry(1, 10, 90));
    values.add(new WaterfallEntry(2, 15, 80));
    values.add(new WaterfallEntry(3, 20, 90));

    this.dataSet = new WaterfallDataSet(values, 'DataSet');
    // 设置瀑布图选中时颜色
    this.dataSet.setHighLightColor(Color.Gray);
    this.dataSet.setDrawIcons(false);
    // 设置瀑布图颜色
    this.dataSet.setColorByColor(Color.Pink);
    // Y刻度范围颜色设置
     this.dataSet.setYAxisSegmentationColors(highlightList);
    // 最高点最低点是否高亮
    this.dataSet.setEnableMaxOrMinHighlightColor(true);
    // 最高点高亮时颜色设置
    this.dataSet.setMaxyHighlightColor(Color.Brown);
    // 最低点高亮时颜色设置
    this.dataSet.setMinyHighlightColor(Color.Yellow);

    let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
    dataSetList.add(this.dataSet);

    let barData: BarData = new BarData(dataSetList);
    barData.setBarWidth(0.3);
    return barData;
  }

// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过dataResult.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
WaterfallChart({ model: this.model })
  .width('100%')
  .height('70%')

    let charPixelMap: ChartPixelMap = new ChartPixelMap();
    let fileData = resourceMgr.getMediaContentSync($r('app.media.star').id)
    const buffer:ArrayBuffer =fileData.buffer.slice(0,fileData.buffer.byteLength);
    const imageSource = image.createImageSource(buffer)
    let pixelMap=await imageSource.createPixelMap()
    //设置自定义图标资源 PixelMap
    charPixelMap.setIcon(pixelMap)
    //设置自定义图标资源 resId
    //charPixelMap.setIcon($r('app.media.star').id)
    //设置自定义图标宽度
    charPixelMap.setWidth(20)
     //设置自定义图标高度
    charPixelMap.setHeight(20);

    let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
    for (let i = startAxis; i < endAxis; i++) {
      values.add(new BarEntry(i, Math.random() * range,charPixelMap))
    }

    let dataSet: BarDataSet = new BarDataSet(values, 'DataSet');
    dataSet.setHighLightColor(Color.Black);
    //设置显示自定义图标
    dataSet.setDrawIcons(true);
    //设置自定义图标偏移量
    dataSet.setIconsOffset(new MPPointF(0, 40));
    dataSet.setColorsByVariable(ColorTemplate.VORDIPLOM_COLORS);
    dataSet.setDrawValues(false)

// 示例代码参见 CustomGridLineChartPage
export interface GridLineConfig {
   position: number;
   lineWidth?: number;
   lineColor?: number;
   dashPathEffect?: DashPathEffectConfig
}

export interface DashPathEffectConfig {
   lineLength: number;
   spaceLength: number;
   phase: number
}

@State customUiInfo: CustomUiInfo = new CustomUiInfo(90, 50);
        
@Builder customUi() {
   // 是否在图表content内
   if (this.customUiInfo.isInbounds && this.customUiInfo.data) {
      Column() {
        Text(`2023-12-15`).fontColor(Color.Gray).fontSize(12).fontWeight(FontWeight.Bold)
        Text(`X: ${this.customUiInfo.data.getX()}`).fontColor(Color.Gray).fontSize(12)
        Text(`Y: ${this.customUiInfo.data.getY()}`).fontColor(Color.Gray).fontSize(12)
      }
   .padding(4)
      .borderRadius(6)
      .border({ width: 1, color: Color.Orange})
      .backgroundColor(0xf0f0f0)
      .width(this.customUiInfo.width)
      .height(this.customUiInfo.height)
      .margin({ left: this.customUiInfo.x, top: this.customUiInfo.y })
      .alignItems(HorizontalAlign.Start)
      .onClick(ev => {
         this.customUiInfo.showUi = false;
      })
   }
}


BarChart({ model: this.model,
   // 自定义 ui: 传入 builder
   customUiBuilder: this.customUi,
   // 通过什么事件触发
   customUiTriggerEvent: EventType.SingleTap,
   // 自定义ui的位置信息
   customUiInfo: this.customUiInfo,
})

this.model.getLegend()?.setEnabled(false);

this.model.getDescription()?.setEnabled(false);

this.model.getAxisLeft().setEnabled(false) //隐藏左边Y轴轴线，此时标签数字也隐藏

this.model.getAxisRight().setDrawAxisLine(false);

this.model.getAxisLeft().setLabelCount(8, false);//设置了8个

let leftAxis = this.model.getAxisLeft();
leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);//显示轴线在图表内部则使用INSIDE_CHART
this.leftAxis.setAxisLineColor(ColorTemplate.rgb("#ff0000"));//设置轴线颜色
leftAxis.setAxisLineWidth(1);// 设置轴线宽度
leftAxis.setTextSize(20);//设置y轴标签字体大小
leftAxis.setDrawGridLines(true);//设置显示网格线

class MyAxisValueFormatter implements IAxisValueFormatter {
  getFormattedValue(value: number, axis: AxisBase): string {
    //将原本存在的对应的value转换成需要的字符串
    switch (value) {
      case 1:
        return "一";
      case 2:
        return "二";
      case 3:
        return "三";
    }
    return '';
  }
}
...
this.topAxis.setValueFormatter(new TopAxisValueFormatter())

setTouchEnabled(enabled: boolean)//允许打开或者关闭与图表的所有触摸交互的情况。
setDragEnabled(enabled: boolean)//打开或关闭对图表的拖动。
setScaleEnabled(enabled: boolean)//打开或关闭对图表所有方向的缩放。
setScaleXEnabled(enabled: boolean)//打开或关闭x轴方向上的缩放
setScaleYEnabled(enabled: boolean)//打开或关闭y轴方向上的缩放。
setPinchZoom(enabled: boolean)//如果设置为true，手势捏合缩放被打开。如果设置为false，x和y轴不可以被手势捏合缩放。
setHighlightPerTapEnabled(enabled: boolean)//如果设置为true，在图表中选中触发高亮效果。
setHighlightPerDragEnabled(enabled: boolean)//设置为true时允许在手指滑动结束时显示高亮效果。默认：true
setHighlightIndicatorEnabled(enabled: boolean)//如果设置为true， 选中数据时，将展示指标线。
//此方法为dataset设置：
setVisibleXRangeMaximum(maxXRange： number) //设置x轴最多显示数据条数，（要在设置数据源后调用，否则是无效的）

//获取x轴
let xAxis = model.getXAxis();
//获取左y轴
let leftAxis = model.getAxisLeft();
//获取右y轴
let rightAxis = model.getAxisRight();

setEnabled(enabled: boolean)//设置轴是否被绘制。默认绘制，设置为false则不会被绘制。
setDrawLabels(enabled: boolean)//设置为true则绘制轴的标签。
setDrawAxisLine(enabled: boolean)//设置为true则绘制轴线。
setDrawGridLines(enabled: boolean)//设置为true则绘制网格线。
setTextColor(color: string | number | CanvasGradient | CanvasPattern)//设置轴标签文本颜色。
setTextSize(size: number)//设置轴标签的字体大小。
setTypeface(tf: FontFamily)//设置轴标签的FontFamily，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
setGridColor(color: number)//设置网格线颜色。
setGridLineWidth(width: number)//设置网格线宽度。
setAxisLineColor(color: number)//设置坐标轴的颜色。
setAxisLineWidth(width: number)//设置坐标轴的宽度。
enableGridDashedLine(lineLength: number, spaceLength: number, phase: number)//设置网格线虚线样式，"lineLength"控制短线条的长度，"spaceLength"控制两段线之间的间隔长度，"phase"控制开始的点。
setAxisMaxValue(max: number)//设置一个自定义的最大值，如果设置了数值，这个值将不会依赖于提供的数据自动计算。
setAxisMinValue(min: number)//设置一个自定义的最小值。如果设置了数值，这个值将不会依赖于提供的数据进行自动计算。

setAvoidFirstLastClipping(enabled: boolean)//如果设置为true，图表将避免在图表或屏幕的边缘的标签条目被裁剪掉。
setPosition(pos: XAxisPosition)//设置XAxis应该出现的位置。可以选择TOP，BOTTOM，BOTH\_SIDED，TOP\_INSIDE或者BOTTOM\_INSIDE。

setInverted(enabled: boolean)//如果设置为true，这个轴将被反向，那意味着最大值将被放到底部，最小值将被放到顶部。
setSpaceTop(percent: number)//设置在图表上最高处的值相比轴上最高值的顶端空间（占总轴范围的百分比）。
setSpaceBottom(percent: number)//设置在图表上最低处的值相比轴上最低处值的底部空间（总轴范围的百分比）。
setPosition(pos: YAxisLabelPosition)//设置轴标签应该被绘制的位置。INSIDE\_CHART或者OUTSIDE\_CHART中的一个。

import { EntryOhos, JArrayList, LineDataSet } from '@ohos/mpchart';
 
export class MyLineDataSet extends LineDataSet {
  interval: number = 0;
  constructor(yVals: JArrayList<EntryOhos> | null, label: string, interval: number) {
    super(yVals, label);
    this.interval = interval;
  }
}

import { EntryOhos, ILineDataSet, Style, Transformer, Utils, LineChartRenderer } from '@ohos/mpchart';
import { MyLineDataSet } from './MyLineDataSet';
 
export default class MyRender extends LineChartRenderer{
  protected drawCubicBezier(c: CanvasRenderingContext2D, dataSet: MyLineDataSet) {
    if(dataSet.interval == undefined){
      super.drawCubicBezier(c, dataSet);
      return;
    }
    if (!this.mChart || !this.mXBounds) {
      return;
    }
    const phaseY: number = this.mAnimator ? this.mAnimator.getPhaseY() : 1;
    const trans: Transformer | null = this.mChart.getTransformer(dataSet.getAxisDependency());
 
    this.mXBounds.set(this.mChart, dataSet);
 
    const intensity: number = dataSet.getCubicIntensity();
 
    let cubicPath = new Path2D();
    //实线
    let solidLinePath = new Path2D();
    //虚线
    let dashedLinePath = new Path2D();
    if (this.mXBounds.range >= 1) {
      let prevDx: number = 0;
      let prevDy: number = 0;
      let curDx: number = 0;
      let curDy: number = 0;
 
      // Take an extra point from the left, and an extra from the right.
      // That's because we need 4 points for a cubic bezier (cubic=4), otherwise we get lines moving and doing weird stuff on the edges of the chart.
      // So in the starting `prev` and `cur`, go -2, -1
      // And in the `lastIndex`, add +1
 
      const firstIndex: number = this.mXBounds.min + 1;
      const lastIndex: number = this.mXBounds.min + this.mXBounds.range;
 
      let prevPrev: EntryOhos | null;
      let prev: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 2, 0));
      let cur: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 1, 0));
      let next: EntryOhos | null = cur;
      let nextIndex: number = -1;
 
      if (cur === null) return;
 
      Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
      // let the spline start
      cubicPath.moveTo(cur.getX(), cur.getY() * phaseY);
      solidLinePath.moveTo(cur.getX(), cur.getY() * phaseY);
 
      for (let j: number = this.mXBounds.min + 1; j <= this.mXBounds.range + this.mXBounds.min; j++) {
        prevPrev = prev;
        prev = cur;
        cur = nextIndex === j ? next : dataSet.getEntryForIndex(j);
 
        nextIndex = j + 1 < dataSet.getEntryCount() ? j + 1 : j;
        next = dataSet.getEntryForIndex(nextIndex);
 
        prevDx = (cur.getX() - prevPrev.getX()) * intensity;
        prevDy = (cur.getY() - prevPrev.getY()) * intensity;
        curDx = (next.getX() - prev.getX()) * intensity;
        curDy = (next.getY() - prev.getY()) * intensity;
 
        cubicPath.bezierCurveTo(
          prev.getX() + prevDx,
          (prev.getY() + prevDy) * phaseY,
          cur.getX() - curDx,
          (cur.getY() - curDy) * phaseY,
          cur.getX(),
          cur.getY() * phaseY
        );
        if(j <= dataSet.interval){
          solidLinePath.bezierCurveTo(
            prev.getX() + prevDx,
            (prev.getY() + prevDy) * phaseY,
            cur.getX() - curDx,
            (cur.getY() - curDy) * phaseY,
            cur.getX(),
            cur.getY() * phaseY
          );
          if(j == dataSet.interval) {
            dashedLinePath.moveTo(cur.getX(),
              cur.getY() * phaseY);
          }
        }else{
          dashedLinePath.bezierCurveTo(
            prev.getX() + prevDx,
            (prev.getY() + prevDy) * phaseY,
            cur.getX() - curDx,
            (cur.getY() - curDy) * phaseY,
            cur.getX(),
            cur.getY() * phaseY
          );
        }
      }
    }
 
    // if filled is enabled, close the path
    if (dataSet.isDrawFilledEnabled()) {
      let cubicFillPath: Path2D = new Path2D();
      // cubicFillPath.reset();
      cubicFillPath.addPath(cubicPath);
 
      if (c && trans) {
        this.drawCubicFill(c, dataSet, cubicFillPath, trans, this.mXBounds);
      }
    }
 
    this.mRenderPaint.setColor(dataSet.getColor());
    this.mRenderPaint.setStyle(Style.STROKE);
 
    if (trans && trans.pathValueToPixel(cubicPath)) {
      cubicPath = trans.pathValueToPixel(cubicPath);
      solidLinePath = trans.pathValueToPixel(solidLinePath);
      dashedLinePath = trans.pathValueToPixel(dashedLinePath);
    }
 
    Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
    c.beginPath();
    c.stroke(solidLinePath);
    c.closePath();
 
    Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
    c.beginPath();
    c.setLineDash([5,5,0]);
    c.stroke(dashedLinePath);
    c.closePath();
    this.mRenderPaint.setDashPathEffect(null);
  }
 
}

//实线
let solidLinePath = new Path2D();
//虚线
let dashedLinePath = new Path2D();

solidLinePath.bezierCurveTo(
  prev.getX() + prevDx,
  (prev.getY() + prevDy) * phaseY,
  cur.getX() - curDx,
  (cur.getY() - curDy) * phaseY,
  cur.getX(),
  cur.getY() * phaseY
);

 Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
    c.beginPath();
    c.stroke(solidLinePath);
    c.closePath();
 
    Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
    c.beginPath();
    c.setLineDash([5,5,0]);
    c.stroke(dashedLinePath);
    c.closePath();

import {
  JArrayList,EntryOhos,ILineDataSet,LineData,LineChart,LineChartModel,
  Mode,
} from '@ohos/mpchart';
import { MyLineDataSet } from './MyLineDataSet';
import MyRender from './MyRender';
import data from '@ohos.telephony.data';
 
@Entry
@Component
struct Index {
  private model: LineChartModel = new LineChartModel();
 
  aboutToAppear() {
    // 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据
    let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
    // 循环生成 1 到 20 的随机数据，并添加到 values 中
    for (let i = 1; i <= 20; i++) {
      values.add(new EntryOhos(i, Math.random() * 100));
    }
    // 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet'
    let dataSet = new MyLineDataSet(values, 'DataSet', 6);
    dataSet.setMode(Mode.CUBIC_BEZIER);
    dataSet.setDrawCircles(false);
    dataSet.setColorByColor(Color.Blue)
    let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
    dataSetList.add(dataSet);
    // 创建 LineData 对象，使用 dataSetList数据，并将其传递给model
    let lineData: LineData = new LineData(dataSetList);
    this.model?.setData(lineData);
    this.model.setRenderer(new MyRender(this.model, this.model.getAnimator()!, this.model.getViewPortHandler()))
 
  }
 
  build() {
    Column() {
      LineChart({ model: this.model })
        .width('100%')
        .height('100%')
        .backgroundColor(Color.White)
    }
  }
}

class RightAxisFormatter implements IAxisValueFormatter {
  maxNumber: number = 0;
  constructor(maxNumber: number) {
    this.maxNumber = maxNumber;
  }
  getFormattedValue(value: number, axis: AxisBase): string {
    switch (value) {
      case this.maxNumber:
        return "100%";
      case this.maxNumber * 4 / 5:
        return "80%";
      case this.maxNumber * 3 / 5:
        return "60%";
      case this.maxNumber * 2 / 5:
        return "40%";
      case this.maxNumber * 1 / 5:
        return "20%";
      case 0:
        return "0%";
    }
    return "";
  }
}

//设置标签文本转换器
rightAxis?.setValueFormatter(new RightAxisFormatter(this.maxNumber));

import { Utils, XAxisRenderer } from '@ohos/mpchart';
 
export default class MyXAxisRender extends XAxisRenderer{
  protected drawGridLine(c: CanvasRenderingContext2D, x: number, y: number): void {
    Utils.resetContext2DWithoutFont(c, this.mGridPaint);
    c.beginPath();
    let bottom = this.mViewPortHandler?.contentBottom()??0;
    c.moveTo(x, bottom);
    c.lineTo(x, bottom - 10);
    c.stroke();
    c.closePath();
  }
}

this.model.setXAxisRenderer(new MyXAxisRender(this.model.getViewPortHandler(), this.model.getXAxis()!, this.model.getTransformer(AxisDependency.LEFT)!));

|---- ohos-MPChart
|     |---- entry  # 示例代码文件夹
|     |---- library  # mpchart库文件夹
|           |---- index.ets  # 对外接口
│           ├----components # 框架代码目录
│                 ├----animation # 动画目录
│                 │      
│                 ├----buffer # 缓存相关目录
│                 │      
│                 ├----chartcomponents # 各类型图表目录
│                 │      
│                 ├----charts # 各类型图表Model类目录
│                 │      
│                 ├----components   # 自定义组件目录
│                 │          
│                 ├----data   # 数据实体目录
│                 │      
│                 ├----formatter # 各种数据格式化目录
│                 │      
│                 ├----highlight # 各种图表中高亮显示操作目录
│                 │      
│                 ├----interfaces   # 对外接口目录
│                 │          
│                 ├----jobs   # 动画工作线程目录
│                 │      
│                 ├----listener  # 手势监听目录
│                 │      
│                 ├----renderer  # 各种图表绘制属性设置目录
│                 │          
│                 └----utils  # 工具类目录
│                  
└─resources # 资源文件
|     |---- README_zh.md  # 安装使用方法