OpenHarmony图表如何联动

在 OpenHarmony（ArkUI / eTS） 中，“图表联动”通常指：多个图表或视图之间根据同一数据源或交互事件保持同步，例如：

• 点击一个图表，另一个图表高亮或更新
• 滑动/筛选一个图表，其他图表同步变化
• 多个图表共享同一份数据状态

下面按 常见实现方式 + 示例 说明。

一、核心思路（重点）

OpenHarmony 图表联动的本质是：

状态共享 + 事件驱动

通常使用：

• @State / @Link / @Provide / @Consume
• 自定义事件或回调函数
• 同一份数据模型

二、使用官方图表组件（如 @ohos/chart 或三方库）

1️⃣ 数据驱动联动（最推荐）

思路：
所有图表都依赖同一个 @State 数据对象。

@Entry
@Component
struct ChartLinkDemo {
  @State data: number[] = [10, 20, 30, 40]

  build() {
    Column() {
      LineChart({ data: this.data })
      BarChart({ data: this.data })

      Button('更新数据')
        .onClick(() => {
          this.data = [20, 30, 10, 50]
        })
    }
  }
}

✅ 点击按钮 → 两个图表同时变化
✅ 无需手动同步

2️⃣ 交互联动（点击 / 选中联动）

示例：点击柱状图，折线图高亮

@Entry
@Component
struct ChartClickLink {
  @State selectIndex: number = -1

  build() {
    Column() {
      BarChart({
        data: [10, 20, 30],
        onItemClick: (index: number) => {
          this.selectIndex = index
        }
      })

      LineChart({
        data: [10, 20, 30],
        highlightIndex: this.selectIndex
      })
    }
  }
}

✅ 点击柱形 → 折线图同步高亮

三、多图表共享状态（@Provide / @Consume）

适合 复杂页面 / 多个组件

// 父组件
@Entry
@Component
struct Parent {
  @Provide chartData: number[] = [5, 15, 25]

  build() {
    Column() {
      ChildA()
      ChildB()
    }
  }
}

// 子组件 A
@Component
struct ChildA {
  @Consume chartData: number[]
  build() {
    BarChart({ data: this.chartData })
  }
}

// 子组件 B
@Component
struct ChildB {
  @Consume chartData: number[]
  build() {
    LineChart({ data: this.chartData })
  }
}

✅ 一处修改，多处联动

四、时间轴 / 筛选联动（常见业务）

例如：日期选择 → 所有图表更新

@State date: string = '2024-01-01'

DatePicker({
  onChange: (value) => {
    this.date = value
    this.loadData(value)
  }
})

所有图表都依赖 date 或 filteredData

五、如果使用的是三方图表库（如 ECharts for OpenHarmony）

联动方式类似：

• 使用 setOption
• 通过事件 on('click')
• 调用 dispatchAction（如高亮）

chart.on('click', (params) => {
  otherChart.dispatchAction({
    type: 'highlight',
    dataIndex: params.dataIndex
  })
})

六、最佳实践总结

✅ 用 状态驱动，不要手动操作 DOM
✅ 联动逻辑放在 数据层
✅ 复杂联动用 @Provide/@Consume
✅ 交互联动靠 事件回调

如果你能告诉我：

• 用的是 哪套图表库（官方 / ECharts / 自绘）
• 具体联动场景（点击？筛选？滚动？）

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