ASTRO大屏应用 ASTROCANVAS-组件数据接入:组件使用静态数据

时间：2024-12-30 14:38:19

组件使用静态数据

AstroCanvas通过调用组件定义的getMockData，来获取默认静态数据。

getMockData() {
    const seviceWaterLevel = this.$t('setting.seviceWaterLevel');
    const seviceLoad = this.$t('setting.seviceLoad');
    return [
      {
        x: '00:00',
        y: 11.69,
        s: seviceWaterLevel,
      },
      {
        x: '02:30',
        y: 17.46,
        s: seviceWaterLevel,
      },
      {
        x: '05:00',
        y: 28.57,
        s: seviceWaterLevel,
      },
      {
        x: '07:30',
        y: 12.7,
        s: seviceWaterLevel,
      },
      {
        x: '10:00',
        y: 18.99,
        s: seviceWaterLevel,
      },
      {
        x: '12:30',
        y: 3.7,
        s: seviceWaterLevel,
      },
      {
        x: '15:00',
        y: 18.52,
        s: seviceWaterLevel,
      },
      {
        x: '17:30',
        y: 23.81,
        s: seviceWaterLevel,
      },
      {
        x: '20:00',
        y: 10.58,
        s: seviceWaterLevel,
      },
      {
        x: '22:30',
        y: 15.82,
        s: seviceWaterLevel,
      },
      {
        x: '24:00',
        y: 3.76,
        s: seviceWaterLevel,
      },
      {
        x: '00:00',
        y: 5.69,
        s: seviceLoad,
      },
      {
        x: '02:30',
        y: 12.46,
        s: seviceLoad,
      },
      {
        x: '05:00',
        y: 18.57,
        s: seviceLoad,
      },
      {
        x: '07:30',
        y: 25.7,
        s: seviceLoad,
      },
      {
        x: '10:00',
        y: 13.99,
        s: seviceLoad,
      },
      {
        x: '12:30',
        y: 9.7,
        s: seviceLoad,
      },
      {
        x: '15:00',
        y: 20.52,
        s: seviceLoad,
      },
      {
        x: '17:30',
        y: 28.81,
        s: seviceLoad,
      },
      {
        x: '20:00',
        y: 15.58,
        s: seviceLoad,
      },
      {
        x: '22:30',
        y: 19.82,
        s: seviceLoad,
      },
      {
        x: '24:00',
        y: 9.76,
        s: seviceLoad,
      },
    ];
  },

配置数据数据时，下图中的“静态数据”选项即为静态数据，支持直接在线编辑静态数据。

图3 静态数据