mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-14 19:23:28 +08:00
522dd7cc5c
* chore: eslint flat config * chore: format * update according to review * chore: remove prettier config and format * fix: move handler to script to bypass eslint * chore: config eslint for lang=js block * docs: add surrounding empty lines for code block * chore: also minify css in csp build * chore: publint
51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup>
|
|
import { use } from "echarts/core";
|
|
import { RadarChart } from "echarts/charts";
|
|
import {
|
|
PolarComponent,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
} from "echarts/components";
|
|
import { shallowRef } from "vue";
|
|
import VChart from "../../src/ECharts";
|
|
import VExample from "./Example.vue";
|
|
import { useScoreStore } from "../data/radar";
|
|
|
|
use([RadarChart, PolarComponent, TitleComponent, TooltipComponent]);
|
|
|
|
const { metrics, getRadarData, increase, isMax, isMin } = useScoreStore();
|
|
|
|
const metricIndex = shallowRef(0);
|
|
</script>
|
|
|
|
<template>
|
|
<v-example id="radar" title="Radar chart" desc="(with Pinia integration)">
|
|
<v-chart :option="getRadarData(metricIndex)" autoresize />
|
|
<template #extra>
|
|
<p class="actions">
|
|
<select v-model="metricIndex">
|
|
<option
|
|
v-for="(metric, index) in metrics"
|
|
:value="index"
|
|
:key="index"
|
|
>
|
|
{{ metric }}
|
|
</option>
|
|
</select>
|
|
<button
|
|
@click="increase(metricIndex, 1)"
|
|
:disabled="isMax(metricIndex)"
|
|
>
|
|
Increase
|
|
</button>
|
|
<button
|
|
@click="increase(metricIndex, -1)"
|
|
:disabled="isMin(metricIndex)"
|
|
>
|
|
Decrease
|
|
</button>
|
|
</p>
|
|
</template>
|
|
</v-example>
|
|
</template>
|