webview/src/modules/report/SyndromeChart.vue

<script setup lang="ts">
import { provide, ref }                      from 'vue';
import VChart, { type EChartsOption, theme } from './echart';


const { dataset = [] } = defineProps<{ dataset?: { label: string; score: number; }[] }>();

const snapshot = defineModel('snapshot', { default: '' });

provide(...theme);

const option = ref<EChartsOption>({
  backgroundColor: 'transparent',
  color: [ '#38ff6e' ],
  textStyle: {
    fontStyle: 24,
  },
  radar: {
    indicator: [],
    axisLine: { lineStyle: { color: 'rgba(56,255,110, 0.2)', }, },
    splitLine: { lineStyle: { color: 'transparent', }, },
  },
  series: {
    type: 'radar',
    label: { show: false },
    data: [
      {
        value: [ 60, 73, 85, 40 ],
        name: '中医证素',
      },
    ],
  },
});

watchEffect(() => {
  const indicator: { name: string; max: number }[] = [];
  const value: number[] = [];

  for ( const item of dataset ) {
    const { label: name, score } = item;
    const max = 110;
    indicator.push({ name, max });
    value.push(score);
  }
  option.value.radar = {
    ...option.value.radar,
    indicator,
  };
  option.value.series = {
    ...option.value.series,
    data: [ { name: '中医证素', value } ],
  };
});

const chart = useTemplateRef<InstanceType<typeof VChart>>('chart');

let loaded = false;
function onFinished() {
  if (loaded || !snapshot.value.startsWith(`data:image/`)) return;
  snapshot.value = chart.value?.getDataURL() ?? '';
  loaded = true;
}
</script>
<template>
  <div class="mx-auto" style="width: 50%;">
    <div class="chart-container">
      <v-chart ref="chart" class="chart" :option="option" @finished="onFinished" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.chart-container {
  position: relative;
  padding-bottom: 100%;

  > .chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>