uni-halo/.agents/bak-skills/uniapp-ucharts/examples/integration/pages-config.md

Pages Configuration

pages.json 配置

在 UniApp 项目中，pages.json 是页面配置文件，需要正确配置以使用 uCharts。

基本配置

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
    }
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniApp",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f5f5f5"
  }
}

图表页面配置

{
  "pages": [
    {
      "path": "pages/chart/chart",
      "style": {
        "navigationBarTitleText": "图表",
        "navigationBarBackgroundColor": "#409EFF",
        "navigationBarTextStyle": "white",
        "backgroundColor": "#f5f5f5"
      }
    }
  ]
}

下拉刷新配置

如果图表页面需要下拉刷新：

{
  "pages": [
    {
      "path": "pages/chart/chart",
      "style": {
        "navigationBarTitleText": "图表",
        "enablePullDownRefresh": true
      }
    }
  ]
}

页面中处理下拉刷新：

<template>
  <view>
    <qiun-data-charts 
      type="line"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {}
    }
  },
  onPullDownRefresh() {
    // 刷新图表数据
    this.loadChartData()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  methods: {
    loadChartData() {
      // 加载图表数据
    }
  }
}
</script>

完整示例

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
    }
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/chart/line",
      "style": {
        "navigationBarTitleText": "折线图"
      }
    },
    {
      "path": "pages/chart/bar",
      "style": {
        "navigationBarTitleText": "柱状图"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniApp",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f5f5f5"
  }
}

注意事项

1. easycom 配置：必须在 pages.json 中配置 easycom
2. 路径正确性：确保组件路径正确
3. 样式配置：合理配置页面样式
4. 平台差异：注意不同平台的配置差异
5. 性能优化：合理配置下拉刷新和上拉加载