uni-halo/.agents/bak-skills/uniapp-ucharts/examples/platform-specific/h5.md

H5 Platform

H5 平台注意事项

在 H5 平台使用 uCharts 时的特殊注意事项。

manifest.json 配置

{
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/"
    },
    "devServer": {
      "https": false,
      "port": 8080
    },
    "publicPath": "/",
    "template": "index.html"
  }
}

Canvas 支持

H5 平台完全支持 Canvas，可以使用所有 uCharts 功能。

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

<script>
export default {
  data() {
    return {
      chartData: {
        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '数据',
          data: [120, 200, 150, 80, 70, 110, 130]
        }]
      },
      opts: {
        color: ['#409EFF'],
        padding: [15, 15, 0, 15],
        enableScroll: false
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 400px;
}
</style>

响应式布局

H5 平台可以使用媒体查询：

<style lang="scss" scoped>
.container {
  width: 100%;
  
  /* #ifdef H5 */
  @media (min-width: 768px) {
    max-width: 1200px;
    margin: 0 auto;
  }
  /* #endif */
}
</style>

条件编译

使用条件编译处理 H5 平台特定逻辑：

<template>
  <view>
    <!-- #ifdef H5 -->
    <view>H5 平台特有内容</view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  methods: {
    loadChartData() {
      // #ifdef H5
      // H5 平台特定代码
      fetch('/api/chart-data')
        .then(res => res.json())
        .then(data => {
          this.chartData = data
        })
      // #endif
    }
  }
}
</script>

注意事项

1. Canvas 支持：H5 平台完全支持 Canvas
2. 性能优化：H5 平台可以使用更多 Web API 优化性能
3. 响应式设计：可以使用媒体查询实现响应式布局
4. 调试工具：可以使用浏览器开发者工具调试
5. 兼容性：注意不同浏览器的兼容性