1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
| // pages/index.vue <template> <div> <client-only> <v-chart class="chart" :option="option" /> </client-only> </div> </template>
<script> import { use } from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; import { PieChart } from 'echarts/charts'; import { TitleComponent, TooltipComponent, LegendComponent, } from 'echarts/components'; import VChart, { THEME_KEY } from 'vue-echarts'; import { ref, defineComponent } from 'vue';
use([ CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent, ]);
export default defineComponent({ name: 'HelloWorld', components: { VChart, }, provide: { [THEME_KEY]: 'dark', }, setup() { const option = ref({ title: { text: 'Traffic Sources', left: 'center', }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)', }, legend: { orient: 'vertical', left: 'left', data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'], }, series: [ { name: 'Traffic Sources', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ { value: 335, name: 'Direct' }, { value: 310, name: 'Email' }, { value: 234, name: 'Ad Networks' }, { value: 135, name: 'Video Ads' }, { value: 1548, name: 'Search Engines' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, }, ], });
return { option }; }, }); </script>
<style scoped> .chart { height: 100vh; } </style>
|