OpenHarmony图表怎么联动其他组件

在 OpenHarmony（ArkUI / eTS）应用里，“图表联动其他组件”本质上就是状态驱动 UI：图表和别的组件都绑定同一个状态（@State / @Link / AppStorage 等），当状态变化，图表和其它组件一起刷新。

下面按常见场景给你讲做法。

一、核心思路（一定要先明白）

联动 = 共享状态 + 事件修改状态

@Entry
@Component
struct Page {
  @State selectIndex: number = 0

  build() {
    Column() {
      // 图表
      MyChart(index: this.selectIndex)

      // 其他组件
      DetailPanel(index: this.selectIndex)
    }
  }
}

只要 selectIndex 变了：

• 图表重绘
• 详情面板更新

二、图表联动列表（最常见）

示例：点击列表 → 图表高亮 / 切换数据

@Entry
@Component
struct Demo {
  @State current: number = 0
  private data = ['周一', '周二', '周三']

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.data, (item, index) => {
          ListItem() {
            Text(item)
              .fontColor(this.current === index ? '#ff0000' : '#000')
              .onClick(() => {
                this.current = index
              })
          }
        })
      }

      // 图表（伪代码）
      Chart()
        .highlightIndex(this.current)
    }
  }
}

✅ 列表点击 → 改状态 → 图表联动

三、图表联动详情卡片

@State selectPoint: Point | null = null

build() {
  Column() {
    Chart()
      .onPointClick((p) => {
        this.selectPoint = p
      })

    if (this.selectPoint) {
      Text(`数值：${this.selectPoint.value}`)
    }
  }
}

点击图表上的点 → 更新状态 → 下方卡片变化

四、图表联动 Slider / Tabs

Slider 控制图表数据范围

@State range: number = 50

Slider({ value: this.range })
  .onChange(v => this.range = v)

Chart()
  .dataRange(this.range)

Tabs 切换图表类型

@State tabIndex: number = 0

Tabs({ index: this.tabIndex }) {
  TabContent() { LineChart() }
  TabContent() { BarChart() }
}
.onChange(i => this.tabIndex = i)

五、跨组件 / 跨页面联动

1️⃣ 使用 @Link（父子）

@Component
struct Child {
  @Link index: number
}

// 父组件
@State index: number = 0
Child({ index: $index })

2️⃣ 使用 AppStorage（全局）

AppStorage.SetOrCreate('chartIndex', 0)

@Component
struct ChartComp {
  @StorageLink('chartIndex') index: number
}

适合：

• 多页面
• 全局筛选条件

六、OpenHarmony 图表库注意点

如果你用的是：

• OpenHarmony 自带图表组件
• 或 三方库（如 ohos-charts / ECharts 移植）

一般支持：

• data 响应式
• onPointClick
• highlight

⚠️ 注意：

• 图表组件必须依赖 @State 才会重绘
• 不要直接改内部数组而不触发更新

七、推荐架构（实战）

状态层（@State / AppStorage）
   ↓
图表组件
   ↓
交互组件（List / Tabs / Slider）

八、如果你愿意，我可以直接帮你写

你可以告诉我：

1. 用的是 ArkUI 还是 JS UI
2. 用的是 哪个图表库
3. 想联动的是什么（列表 / 卡片 / 筛选器 / 多图表）

我可以直接给你可运行示例代码。