61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<div style="width: 100%; height: 400px">
|
|
<chart-block :option="option"></chart-block>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "xxxxx",
|
|
|
|
data() {
|
|
return {
|
|
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" },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
};
|
|
</script>
|