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

nvue Platform

nvue 平台注意事项

在 nvue 页面使用 uCharts 时的特殊注意事项。

manifest.json 配置

{
  "app-plus": {
    "nvueStyleCompiler": "uni-app",
    "nvue": {
      "flex-direction": "column"
    }
  }
}

Canvas 限制

nvue 平台对 Canvas 的支持可能有限，需要注意：

<template>
  <view class="container">
    <!-- #ifndef APP-PLUS-NVUE -->
    <qiun-data-charts 
      type="line"
      :opts="opts"
      :chartData="chartData"
    />
    <!-- #endif -->
    
    <!-- #ifdef APP-PLUS-NVUE -->
    <view class="nvue-tip">nvue 平台可能不支持 Canvas 图表</view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {}
    }
  }
}
</script>

<style scoped>
.container {
  flex-direction: column;
  padding: 20rpx;
}

.nvue-tip {
  padding: 20rpx;
  text-align: center;
  color: #909399;
}
</style>

样式限制

nvue 平台样式有限制：

<style lang="scss" scoped>
.container {
  /* nvue 支持的样式 */
  flex-direction: column;
  padding: 20rpx;
  
  /* nvue 不支持的样式需要条件编译 */
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
}
</style>

注意事项

1. Canvas 限制：nvue 平台对 Canvas 的支持可能有限
2. 样式限制：nvue 不支持所有 CSS 属性
3. 条件编译：使用条件编译处理兼容性问题
4. 性能：nvue 性能更好，但功能有限
5. 替代方案：考虑使用其他图表方案或条件编译