Pinia 集成

script setup

import { RadarChart } from "echarts/charts";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { useScoreStore } from "./score";

definePage({
  style: {
    navigationBarTitleText: "Pinia 集成"
  }
});

echarts.use([
  RadarChart,
  CanvasRenderer
]);

const { metrics, getOption, isMax, isMin, increase } = useScoreStore();

const metricIndex = shallowRef(0);

score.ts

import type { RadarSeriesOption } from "echarts/charts";
import type { ComposeOption } from "echarts/core";
import { defineStore } from "pinia";
import { computed, ref } from "vue";
import { GLOBAL_OPTION } from "../echarts";

type EChartsOption = ComposeOption<RadarSeriesOption>;

export const useScoreStore = defineStore("score", () => {
  const scores = ref([
    { name: "Attack", max: 20, value: 19 },
    { name: "Defense", max: 20, value: 9 },
    { name: "Speed", max: 20, value: 18 },
    { name: "Strength", max: 20, value: 16 },
    { name: "Endurance", max: 20, value: 16 },
    { name: "Agility", max: 20, value: 20 }
  ]);

  const metrics = computed(() => {
    return scores.value.map(({ name }, index) => ({
      label: name,
      value: index
    }));
  });

  function getOption(activeIndex: number) {
    return {
      ...GLOBAL_OPTION,
      radar: {
        indicator: scores.value.map(({ name, max }, index) => {
          return {
            name,
            max,
            color: index === activeIndex ? "goldenrod" : undefined
          };
        }),
        splitNumber: 4
      },
      series: [
        {
          type: "radar",
          data: [
            { value: scores.value.map(({ value }) => value) }
          ]
        }
      ]
    } satisfies EChartsOption;
  }

  function isMax(index: number) {
    const { value, max } = scores.value[index];

    return value >= max;
  }

  function isMin(index: number) {
    const { value } = scores.value[index];

    return value <= 0;
  }

  function increase(index: number, value: number) {
    const metric = scores.value[index];

    metric.value = Math.max(0, Math.min(metric.max, metric.value + value));
  }

  return {
    scores,
    metrics,
    getOption,
    isMax,
    isMin,
    increase
  };
});

template

<app-page>
  <uni-echarts custom-class="h-75" :option="getOption(metricIndex)" autoresize></uni-echarts>

  <wd-cell-group class="mt-2">
    <wd-picker
      v-model="metricIndex"
      label="对象"
      :columns="metrics"
      align-right
    ></wd-picker>

    <wd-cell title="控制" center>
      <wd-button
        class="!mr-2"
        type="error"
        size="small"
        plain
        :disabled="isMin(metricIndex)"
        @click="increase(metricIndex, -1)"
      >
        减少
      </wd-button>

      <wd-button
        type="success"
        size="small"
        plain
        :disabled="isMax(metricIndex)"
        @click="increase(metricIndex, 1)"
      >
        增加
      </wd-button>
    </wd-cell>
  </wd-cell-group>
</app-page>

global

export const GLOBAL_OPTION = {
  textStyle: {
    fontFamily: `MiSans, Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif`
  }
};