mirror of https://gitee.com/xiaonuobase/snowy
58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<template>
|
||
<div id="DoughnutChartWithRoundedCorner"></div>
|
||
</template>
|
||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||
<script setup name="DoughnutChartWithRoundedCorner">
|
||
import { onMounted } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
|
||
onMounted(() => {
|
||
let Echarts = echarts.init(document.getElementById('DoughnutChartWithRoundedCorner'))
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 1048, name: 'Search Engine' },
|
||
{ value: 735, name: 'Direct' },
|
||
{ value: 580, name: 'Email' },
|
||
{ value: 484, name: 'Union Ads' },
|
||
{ value: 300, name: 'Video Ads' }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
// 绘制图表
|
||
Echarts.setOption(option)
|
||
})
|
||
</script>
|