使用uni实现一个简单的星盘

首先，我们需要了解什么是星盘。星盘是一种用于占星术的工具，用于表示天体在特定时间的位置和相对于地球的角度。它通常由一个圆形图案组成，被分成12个“宫位”，每个宫位代表着不同的领域，例如健康、家庭、事业等等。

下面是如何使用uni实现一个简单的星盘：

1. 创建一个uni-app项目，选择自定义模式，并选择需要的基础组件（如vue-router、uni-ui等）。

2. 在pages文件夹中创建一个名为“star-chart”的页面。

3. 在“star-chart”页面中，创建一个canvas元素，并设置其宽高。

<template>
  <view class="container">
    <canvas class="star-chart" canvas-id="starChart" style="width: 100%; height: 100%;"></canvas>
  </view>
</template>

4. 在“star-chart”页面中，编写JS代码，绘制星盘。这里我们使用uni的canvas API来绘制。

<script>
  import * as echarts from '@/components/ec-canvas/echarts';
  import { getAstroData } from '@/utils/astro';
  import { getStarChartOption } from '@/utils/echarts';

  export default {
    data() {
      return {
        ec: null, // echarts实例
        chartData: {}, // 星盘数据
      };
    },
    onLoad() {
      // 获取星盘数据
      this.chartData = getAstroData();

      // 初始化echarts实例
      this.ec = echarts.init(this.$refs.canvas, null, {
        width: uni.getSystemInfoSync().windowWidth,
        height: uni.getSystemInfoSync().windowHeight,
      });

      // 绘制星盘
      this.ec.setOption(getStarChartOption(this.chartData));
    },
    beforeDestroy() {
      // 销毁echarts实例
      if (this.ec) {
        this.ec.dispose();
        this.ec = null;
      }
    },
  };
</script>

5. 在utils文件夹中，编写JS代码，生成星盘数据和echarts配置。

// 获取星盘数据
export function getAstroData() {
  // 这里使用mock数据，实际应该根据具体需求获取真实数据
  const data = {
    planets: [
      { name: 'Sun', longitude: 120.0 },
      { name: 'Moon', longitude: 60.0 },
      { name: 'Mercury', longitude: 90.0 },
      { name: 'Venus', longitude: 150.0 },
      { name: 'Mars', longitude: 180.0 },
      { name: 'Jupiter', longitude: 240.0 },
      { name: 'Saturn', longitude: 300.0 },
      { name: 'Uranus', longitude: 30.0 },
      { name: 'Neptune', longitude: 330.0 },
      { name: 'Pluto', longitude: 270.0 },
    ],
    houses: [
      { number: 1, sign: 'Aries', longitude: 0.0 },
      { number: 2, sign: 'Taurus', longitude: 30.0 },
      { number: 3, sign: 'Gemini', longitude: 60.0 },
      { number: 4, sign: 'Cancer', longitude: 90.0 },
      { number: 5, sign: 'Leo', longitude: 120.0 },
      { number: 6, sign: 'Virgo', longitude: 150.0 },
      { number: 7, sign: 'Libra', longitude: 180.0 },
      { number: 8, sign: 'Scorpio', longitude: 210.0 },
      { number: 9, sign: 'Sagittarius', longitude: 240.0 },
      { number: 10, sign: 'Capricorn', longitude: 270.0 },
      { number: 11, sign: 'Aquarius', longitude: 300.0 },
      { number: 12, sign: 'Pisces', longitude: 330.0 },
    ],
  };
  return data;
}

// 获取echarts配置
export function getStarChartOption(data) {
  // 这里使用mock数据，实际应该根据具体需求生成真实配置
  const option = {
    title: {
      text: '星盘',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}°',
    },
    xAxis: {
      type: 'value',
      min: 0,
      max: 360,
      splitNumber: 12,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 360,
      splitNumber: 12,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
    },
    series: [
      {
        name: 'planets',
        type: 'scatter',
        data: data.planets.map((item) => ({
          name: item.name,
          value: [item.longitude, 0],
          symbolSize: 10,
          itemStyle: { color: '#f00' },
        })),
      },
      {
        name: 'houses',
        type: 'scatter',
        data: data.houses.map((item) => ({
          name: `House ${item.number}`,
          value: [item.longitude, 0],
          symbolSize: 20,
          itemStyle: { color: '#00f' },
        })),
      },
    ],
  };
  return option;
}

6. 在App.vue中引入echarts，并注册组件。

<script>
  import echarts from '@/components/ec-canvas/echarts';

  export default {
    onLaunch() {
      // 注册echarts组件
      uni.$registerComponent('ec-canvas', echarts);
    },
  };
</script>

至此，一个简单的星盘就完成了。需要注意的是，这里只是一个简单的示例，实际应用中需要根据具体需求进行修改和优化。