1<template>
2  <v-chart
3    class="chart"
4    :option="getEchartsOption"
5  />
6</template>
7
8<script>
9import { use } from 'echarts/core'
10import { CanvasRenderer } from 'echarts/renderers'
11import { PieChart } from 'echarts/charts'
12import {
13  TitleComponent,
14  TooltipComponent,
15  LegendComponent,
16} from 'echarts/components'
17import VChart, { THEME_KEY } from 'vue-echarts'
18import { EchartsData } from '@/services/echarts_data.js'
19
20use([
21  CanvasRenderer,
22  PieChart,
23  TitleComponent,
24  TooltipComponent,
25  LegendComponent,
26])
27
28export default {
29  components: {
30    VChart,
31  },
32  provide: {
33    [THEME_KEY]: 'light',
34  },
35  props: {
36    echartsData: {
37      type: EchartsData,
38      required: true,
39    },
40  },
41  computed: {
42    getEchartsOption() {
43      return this.echartsData.getEchartsOption()
44    },
45  },
46}
47</script>
48
49<style scoped>
50.chart {
51  height: 400px;
52}
53</style>