McChartsV2

{
  "dependencies": {
    "@mcui/mccharts": "file:../meichuangtools"
  }
}

import { McChartsV2, McChartsController } from '@mcui/mccharts';
import type { Options, ChartClick } from '@mcui/mccharts';

import { McChartsV2, McChartsController } from '@mcui/mccharts';
import type { Options, ChartClick } from '@mcui/mccharts';

@Entry
@ComponentV2
struct ChartPage {
  private controller: McChartsController = new McChartsController();

  @Local option: Options = {
    animation: true,
    animationDuration: 800,
    textStyle: { fontFamily: 'HarmonyOS Sans', fontSize: 12 },
    tooltip: { trigger: 'axis', renderMode: 'richText' },
    grid: { left: 48, right: 24, top: 36, bottom: 38 },
    xAxis: { type: 'category', data: ['一月', '二月', '三月'] },
    yAxis: { type: 'value' },
    series: [{
      id: 'sales',
      type: 'line',
      smooth: true,
      symbolSize: 8,
      data: [120, 180, 150],
      areaStyle: { opacity: 0.16 }
    }]
  };

  build() {
    Column() {
      McChartsV2({
        options: this.option,
        controller: this.controller,
        active: true,
        enableDataZoom: false,
        onChartClick: (event: ChartClick) => {
          console.info(`${event.seriesType} · ${event.name} · ${event.value}`);
        }
      })
        .width('100%')
        .height(390)
        .backgroundColor('#FFFFFF')
        .borderRadius(12)
    }
    .padding(16)
    .width('100%')
    .height('100%')
    .backgroundColor('#F3F6FC')
  }
}

McChartsV2({
  options: this.option,
  controller: this.controller,
  resetKey: 'sales-v2',
  active: this.pageActive,
  legacyType: '',
  enableDataZoom: true,
  enableBrush: false,
  rasterText: true,
  showRenderStats: false,
  eventNames: ['brushselected', 'nativeexportrequest'],
  onChartClick: (event: ChartClick) => {
    console.info(event.seriesType, event.name, event.value);
  },
  onMarkerClick: (event: MarkerClick) => {
    console.info(event.componentType, event.dataIndex);
  },
  onChartEvent: (event: ChartEvent) => {
    console.info(event.eventName, event.params);
  }
})
  .width('100%')
  .height(390)

import { McChartsV2 } from '@mcui/mccharts';
import type { Options, ChartClick, ChartEvent } from '@mcui/mccharts';

@Local option: Options = {
  series: [{ type: 'line', data: [120, 180, 150] }]
};

McChartsV2({
  options: this.option,
  onChartClick: (event: ChartClick) => {
    console.info(event.seriesType, event.value);
  },
  onChartEvent: (event: ChartEvent) => {
    console.info(event.eventName);
  }
})

// 声明式：赋新引用
this.option = {
  ...this.option,
  series: [{ id: 'sales', type: 'line', data: nextData }]
};

// 命令式：合并更新
this.controller.setOption({
  series: [{ id: 'sales', data: [132, 201, 168] }]
});

// 替换模型
this.controller.setOption(nextOption, { notMerge: true });

// 清空后重播入场
this.controller.clear();
this.controller.setOption(nextOption, true);

McChartsV2({
  options: this.option,
  controller: this.controller,
  enableDataZoom: true,
  enableBrush: true,
  eventNames: ['brushselected'],
  onChartClick: (event) => {
    console.info(event.seriesType, event.name, event.value);
  },
  onMarkerClick: (event) => {
    console.info('marker', event.dataIndex);
  },
  onChartEvent: (event) => {
    if (event.eventName === 'brushselected') { /* raw payload */ }
  }
})