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