<template>
<div style="width:100vw">
<v-chart class="chart" :option="option" autoresize />
</div>
</template>
<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GraphicComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
import imgUrl from './assets/test.png';
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GraphicComponent
]);
provide(THEME_KEY, 'dark');
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'],
},
graphic: {
elements: [
{
type: 'image',
style: {
image: imgUrl,
width: 25,
height: 30
},
left: 'center',
top: 'middle'
},
]
},
series: [
{
name: 'Traffic Sources',
type: 'pie',
radius: ['55%','60%'],
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)',
},
},
},
],
});
</script>
<style scoped>
.chart {
height: 100vh;
}
</style>
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
